Skip to content

Instantly share code, notes, and snippets.

@iKunalmathur

iKunalmathur/index.html

Created September 1, 2022 15:47
Show Gist options
  • Save iKunalmathur/483012378cd39e0f3e08c38ed2263319 to your computer and use it in GitHub Desktop.
Save iKunalmathur/483012378cd39e0f3e08c38ed2263319 to your computer and use it in GitHub Desktop.
Download ZIP
Assignment 2 : create a beautiful fixed header with navigation links
Raw
index.html
<!-- Assignment 2 : create a beautiful fixed header with navigation links -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS Essentials</title>
<!-- styling -->
<style>
body {
padding: 0;
margin: 0;
}
.container {
padding: 1rem;
background-color: #eee;
}
.card {
border: 1px solid #333;
padding: 1rem;
margin: 0.8rem;
display: inline-block;
max-width: 400px;
background-color: #fff;
}
.card>img {
width: 100%;
height: 220px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
color: #fff;
padding: 1rem;
}
nav {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.nav-link {
margin-inline: 1rem;
color: #fff;
text-decoration: none;
font-weight: 600;
}
main {
padding: 1rem;
min-height: 100vh;
background-color: aliceblue;
}
</style>
</head>
<body style="padding-top:4rem">
<header>
<nav>
<img src="https://via.placeholder.com/300x150" alt="logo" class="logo" width="100px">
<div>
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</nav>
</header>
<main>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil tempora deleniti quod dolorum excepturi
facere facilis expedita dolores ducimus consequatur. Voluptate dignissimos odio eum minima molestiae
ducimus molestias beatae cum eius. Doloribus distinctio omnis voluptates magnam, provident ipsum tenetur
dolor odit sapiente quasi molestiae iste, sunt iusto accusantium eum officia blanditiis at enim labore
culpa? Tempora eius ipsum quod ut aspernatur in labore ratione vero harum exercitationem? Assumenda,
dolore. Modi laudantium rerum velit recusandae dolorem unde quod eveniet expedita a, enim amet rem sit
dignissimos in et repudiandae. Quisquam, omnis voluptatem fuga totam, autem deserunt maiores,
voluptatibus quo cupiditate tempore molestias quia repellendus iusto eum laudantium officiis magnam sint
in voluptatum vel! Aut beatae mollitia inventore vero incidunt id temporibus cum. Rerum officiis, aut
nemo ullam ea accusantium alias, reprehenderit, velit ex et similique minus. Nemo, voluptas esse harum
tempora atque vel laudantium maxime, eveniet quia modi non animi ullam asperiores, sit omnis pariatur
officia praesentium tenetur quam consectetur error molestias facilis labore. Pariatur sed assumenda
similique beatae cumque facere enim consequatur obcaecati, laudantium adipisci incidunt at esse atque
mollitia ad doloremque qui minima debitis repellendus. Deleniti, repudiandae cumque! Enim, inventore
quasi! A sunt est quasi repudiandae asperiores nobis labore.</p>
</div>
<div class="container">
<div class="card">
<img src="https://via.placeholder.com/320x220" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus libero, ab beatae cum dicta
aspernatur
asperiores mollitia consequuntur atque sint.</p>
<button>
Read more
</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/320x220" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus libero, ab beatae cum dicta
aspernatur
asperiores mollitia consequuntur atque sint.</p>
<button>
Read more
</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/320x220" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus libero, ab beatae cum dicta
aspernatur
asperiores mollitia consequuntur atque sint.</p>
<button>
Read more
</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/320x220" alt="image">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus libero, ab beatae cum dicta
aspernatur
asperiores mollitia consequuntur atque sint.</p>
<button>
Read more
</button>
</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil tempora deleniti quod dolorum excepturi
facere facilis expedita dolores ducimus consequatur. Voluptate dignissimos odio eum minima molestiae
ducimus molestias beatae cum eius. Doloribus distinctio omnis voluptates magnam, provident ipsum tenetur
dolor odit sapiente quasi molestiae iste, sunt iusto accusantium eum officia blanditiis at enim labore
culpa? Tempora eius ipsum quod ut aspernatur in labore ratione vero harum exercitationem? Assumenda,
dolore. Modi laudantium rerum velit recusandae dolorem unde quod eveniet expedita a, enim amet rem sit
dignissimos in et repudiandae. Quisquam, omnis voluptatem fuga totam, autem deserunt maiores,
voluptatibus quo cupiditate tempore molestias quia repellendus iusto eum laudantium officiis magnam sint
in voluptatum vel! Aut beatae mollitia inventore vero incidunt id temporibus cum. Rerum officiis, aut
nemo ullam ea accusantium alias, reprehenderit, velit ex et similique minus. Nemo, voluptas esse harum
tempora atque vel laudantium maxime, eveniet quia modi non animi ullam asperiores, sit omnis pariatur
officia praesentium tenetur quam consectetur error molestias facilis labore. Pariatur sed assumenda
similique beatae cumque facere enim consequatur obcaecati, laudantium adipisci incidunt at esse atque
mollitia ad doloremque qui minima debitis repellendus. Deleniti, repudiandae cumque! Enim, inventore
quasi! A sunt est quasi repudiandae asperiores nobis labore.</p>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment