Building a simple website header with HTML and CSS involves creating a basic HTML document and styling it with CSS. The header typically contains a navigation bar with links to various pages of the website.
To begin, you will need to create an HTML document and set up the basic structure of the webpage, including the doctype declaration, HTML tags, head tags, and body tags. Within the body tags, you can add the header element and create the navigation bar using unordered lists and list items.
Once the basic HTML structure is in place, you can start styling the header using CSS. This can involve setting the background color, font size and style, padding, and margins of the header and navigation bar. You can also style the links within the navigation bar to make them more visually appealing.
To make the navigation bar more interactive and user-friendly, you can add hover effects to the links using CSS. For example, when a user hovers over a link, you can change the background color or font color to indicate that the link is active.
Finally, you can test your code and make any necessary adjustments to ensure that the header and navigation bar are working correctly.
Overall, building a simple website header with HTML and CSS involves creating an HTML document, structuring the content of the header and navigation bar, styling the elements using CSS, and adding interactivity to the navigation bar. With these basic steps, you can create a professional-looking and functional header for your website.
HTML CODE
<section class="header" id="header">
<nav class="navbar" id="navbar">
<div class="logo">
<img src="logo.png" alt="">
</div>
<div class="link">
<ul type="none">
<li><a href="#home">home</a></li>
<li><a href="#about">about us</a></li>
<li><a href="blog">blog</a></li>
<li><a href="contact">contact</a></li>
</ul>
</div>
<div class="button">
<button>Log In</button>
<button>Sing Up</button>
</div>
</nav>
<div class="content" id="content">
<div class="text">
<p>INNOVATIVE SOLUTION FOR SOURCING CANDIDATES</p>
<h1>Help us find <b>the missing puzzle, get rewarded</b> properly</h1>
<input type="text" placeholder="Keyword,job title or company">
<button>
<ion-icon name="search-outline"></ion-icon>
</button>
</div>
<div class="img">
<img src="gg.png">
</div>
</div>
<div class="heading">
<h2> RECENTLY ADDED JOBS</h2>
</div>
<div class="service">
<div class="card">
<div class="image"><img src="logo1.png" alt=""></div>
<div class="address">
<h3>Art Director</h3>
<p>
Hermes International S.A
<br>
<span>
<ion-icon name="location-sharp"></ion-icon>Harrisburg,Pennsylvania
</span>
</p>
</div>
<div class="prize">
<h2>$12,40</h2><br>
<span>of hiring reward</span>
<img src="logo.png" alt="">
</div>
</div>
<!--============================================================card1 -->
<div class="card">
<div class="image"><img src="logo2.png" style="width:30%;height: 40%;"></div>
<div class="address">
<h3>HR Head of Operations</h3>
<p>
The Coca-Cola Company
<br>
<span>
<ion-icon name="location-sharp"></ion-icon>Atlanta,Georgia
</span>
</p>
</div>
<div class="prize">
<h2>$1,980</h2><br>
<span>of hiring reward</span>
<img src="logo.png" alt="">
</div>
</div>
<!-- ==================================================================card2 -->
<div class="card">
<div class="image"><img src="logo3.png" style="width:40%;height: 30%;"></div>
<div class="address">
<h3>Business Strategy Associate</h3>
<p>
Dropbox,Inc.
<br>
<span>
<ion-icon name="location-sharp"></ion-icon>San Franisco, California
</span>
</p>
</div>
<div class="prize">
<h2>$3,100</h2><br>
<span>of hiring reward</span>
<img src="logo.png" alt="">
</div>
</div>
<!-- ======================================================================card3 -->
<div class="card">
<div class="image"><img src="logo4.png" style="width:30%;height: 70%;"></div>
<div class="address">
<h3>Financial Analyst</h3>
<p>
McDonald's Corporation
<br>
<span>
<ion-icon name="location-sharp"></ion-icon>Columbus,Ohio
</span>
</p>
</div>
<div class="prize">
<h2>$12,40</h2><br>
<span>of hiring reward</span>
<img src="logo.png" alt="">
</div>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: #eee;
border-radius: 4rem;
}
body {
background: #eff1f7;
}
.header {
width: 100%;
height: 100vh;
background-image: url(backimg.png);
background-size: cover;
background-position: 0px;
}
.navbar {
width: 100%;
padding: 3rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
width: 50px;
height: 50px;
transform: rotate(90deg);
}
.link {
margin-left: 250px;
}
.link ul li {
display: inline-block;
margin-right: 30px;
font-size: 13px;
}
.link ul li a {
color: #eee;
font-weight: 300;
text-transform: capitalize;
}
.button button {
width: 100px;
height: 50px;
border-radius: 50px;
border: none;
color: #eee;
cursor: pointer;
margin-left: 10px;
background: transparent;
transition: .6s;
}
.button button:hover {
border-radius: 71px;
background: linear-gradient(45deg, #544cc0, #645ae4);
box-shadow: 50px -50px 100px #403a93,
-50px 50px 100px #7a6eff;
}
.content {
width: 100%;
height: 80vh;
/* background-color: #10caeb81; */
display: flex;
justify-content: space-around;
align-items: center;
}
.text {
width: 60%;
height: 100%;
/* background: rgba(255, 0, 0, 0.56); */
}
.img {
width: 30%;
height: 100%;
/* background-color: aquamarine; */
}
.text p {
font-size: 12px;
color: gray;
padding: 120px 0 0 80px;
}
.text h1 {
font-size: 35px;
font-weight: 300;
padding: 15px 0 0 80px;
color: gray;
}
.text h1 b {
color: #5d53d6;
}
.text input {
width: 75%;
margin-left: 80px;
margin-top: 30px;
padding: 17px;
border-radius: 70px;
background: linear-gradient(145deg, #f2efef, #f0f0f0);
box-shadow: 5px 5px 10px #ebe7e7,
-5px -5px 10px #ffffff;
}
::placeholder {
color: gray;
font-size: 13px;
}
.text button {
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
right: 50px;
top: 7px;
border-radius: 34px;
background: #5542d3;
box-shadow: inset -8px -8px 8px #281f63,
inset 8px 8px 8px #8265ff;
cursor: pointer;
}
.text button ion-icon {
margin: 5px 0 0 0;
font-size: 20px;
color: white;
}
.img img {
width: 400px;
height: 400px;
position: relative;
right: 100px;
}
.heading h2 {
font-size: 10px;
padding: 0 0 0 100px;
color: gray;
font-weight: 400;
}
.heading {
position: relative;
top: 50px;
}
.service {
width: 100%;
height: 70vh;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.service .card {
width: 250px;
height: 300px;
/* background: #edede9; */
margin-left: 25px;
border-radius: 1px;
background: linear-gradient(145deg, #d5d5d2, #fefef9);
box-shadow: 19px 19px 32px #ccccc8,
-19px -19px 32px #ffffff;
cursor: pointer;
transition: .5s;
}
.service .card:hover {
transform: translateY(-10px);
}
.image {
width: 100%;
height: 100px;
/* background-color: rgba(60, 255, 0, 0.819); */
display: flex;
justify-content: center;
align-items: center;
}
.image img {
width: 40%;
height: 50%;
}
.address {
width: 100%;
height: 120px;
/* background-co lor: rgba(0, 225, 255, 0.587); */
}
.address h3 {
font-size: 15px;
padding-left: 30px;
}
.address p {
font-size: 13px;
padding: 20px 0 0 30px;
line-height: 20px;
}
.address p span {
opacity: .5;
}
.prize {
width: 100%;
height: 100px;
/* background-color: #144aee7f; */
}
.prize h2 {
padding: 20px 0 0 30px;
line-height: 20px;
font-size: 20px;
background: linear-gradient(to right, #1c05ed, #595eef,
#0ac0e9, #9321da);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.prize span {
font-size: 13px;
opacity: .5;
font-weight: 400;
color: rgb(15, 0, 0);
z-index: 99999;
position: relative;
top: -25px;
left: 30px;
}
.prize img {
width: 30px;
height: 30px;
position: relative;
top: -25px;
left: 70px;
padding: 5px;
border: 1px solid gray;
border-radius: 50%;
}
Comments
Post a Comment