codekoriko · February 14, 2025 09:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Modern CSS Sample Page</title>
  <style>
    /* CSS Variables for consistent theming */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --bg-color: #f4f4f4;
      --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Global Styles */
    body {
      margin: 0;
      font-family: var(--font-stack);
      background: var(--bg-color);
      color: #333;
      line-height: 1.6;
    }

    /* Header styling */
    header {
      background: var(--primary-color);
      color: #fff;
      padding: 1.5rem;
      text-align: center;
    }

    /* Navigation using Flexbox */
    nav {
      display: flex;
      justify-content: center;
      background: var(--secondary-color);
      padding: 0.75rem;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 0.5rem 1rem;
      margin: 0 0.5rem;
      transition: background 0.3s ease;
    }

    nav a:hover {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

    /* Grid layout for content cards */
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      padding: 1rem;
    }

    .card {
      background: #fff;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* Simple fade-in animation */
    .fade-in {
      opacity: 0;
      animation: fadeInAnimation 2s ease forwards;
    }

    @keyframes fadeInAnimation {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    /* Responsive typography */
    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    p {
      font-size: 1rem;
    }

    /* Footer styling */
    footer {
      background: #333;
      color: #fff;
      text-align: center;
      padding: 1rem;
      margin-top: 1rem;
    }
  </style>
 </head>
 <body>
  <header>
    <h1>Modern CSS Styling</h1>
    <p>A sample page showcasing various modern CSS features.</p>
  </header>
  
  <nav>
    <a href="#home">Home</a>
    <a href="#features">Features</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
  
  <section class="container">
    <div class="card fade-in">
      <h2>Card Title 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet.</p>
    </div>
    <div class="card fade-in">
      <h2>Card Title 2</h2>
      <p>Suspendisse potenti. Proin bibendum arcu in neque facilisis, quis maximus ligula.</p>
    </div>
    <div class="card fade-in" id="card3">
      <h2>Card Title 3</h2>
      <p>Morbi ut dui sit amet sapien consequat bibendum sed non ex. Nulla facilisi.</p>
    </div>
    <div class="card fade-in">
      <h2>Card Title 4</h2>
      <p>Fusce non ex at odio lobortis dapibus. Curabitur volutpat justo sit amet nisl tempus.</p>
    </div>
  </section>
  
  <footer>
    <p>&copy; 2025 Modern CSS Sample Page</p>
  </footer>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Modern CSS Sample Page</title>
	<style>
	/* CSS Variables for consistent theming */
	:root {
	--primary-color: #3498db;
	--secondary-color: #2ecc71;
	--bg-color: #f4f4f4;
	--font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	/* Global Styles */
	body {
	margin: 0;
	font-family: var(--font-stack);
	background: var(--bg-color);
	color: #333;
	line-height: 1.6;
	}

	/* Header styling */
	header {
	background: var(--primary-color);
	color: #fff;
	padding: 1.5rem;
	text-align: center;
	}

	/* Navigation using Flexbox */
	nav {
	display: flex;
	justify-content: center;
	background: var(--secondary-color);
	padding: 0.75rem;
	}

	nav a {
	color: #fff;
	text-decoration: none;
	padding: 0.5rem 1rem;
	margin: 0 0.5rem;
	transition: background 0.3s ease;
	}

	nav a:hover {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	}

	/* Grid layout for content cards */
	.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	padding: 1rem;
	}

	.card {
	background: #fff;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	}

	/* Simple fade-in animation */
	.fade-in {
	opacity: 0;
	animation: fadeInAnimation 2s ease forwards;
	}

	@keyframes fadeInAnimation {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	/* Responsive typography */
	h1 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	}

	p {
	font-size: 1rem;
	}

	/* Footer styling */
	footer {
	background: #333;
	color: #fff;
	text-align: center;
	padding: 1rem;
	margin-top: 1rem;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Modern CSS Styling</h1>
	<p>A sample page showcasing various modern CSS features.</p>
	</header>

	<nav>
	<a href="#home">Home</a>
	<a href="#features">Features</a>
	<a href="#about">About</a>
	<a href="#contact">Contact</a>
	</nav>

	<section class="container">
	<div class="card fade-in">
	<h2>Card Title 1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet.</p>
	</div>
	<div class="card fade-in">
	<h2>Card Title 2</h2>
	<p>Suspendisse potenti. Proin bibendum arcu in neque facilisis, quis maximus ligula.</p>
	</div>
	<div class="card fade-in" id="card3">
	<h2>Card Title 3</h2>
	<p>Morbi ut dui sit amet sapien consequat bibendum sed non ex. Nulla facilisi.</p>
	</div>
	<div class="card fade-in">
	<h2>Card Title 4</h2>
	<p>Fusce non ex at odio lobortis dapibus. Curabitur volutpat justo sit amet nisl tempus.</p>
	</div>
	</section>

	<footer>
	<p>© 2025 Modern CSS Sample Page</p>
	</footer>
	</body>
	</html>