HEADER ADS 728X90

How to make an amzing website header section using html and css | BY Ascode

how to make a website header in html and css,
header template html css,
html header with image and text,
how to put logo in header css,
html header template ascode,
header html css,
header design in html,ascode, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to Ascode Blog . In this post we are going to learn how to make an amzing website header section using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML

<!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>amazing website design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="container">
    <div class="navbar">
        <div class="logo">ASCode</div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    </div>

    <div class="header">
        <div class="header-featur">
            <div class="header-content">
                <div class="tittle">creat an amazing webste</div>
                <p>Using HTMl and CSS</p>
                <a href="#">Register</a>
                <a href="#" class="btn">Login</a>

            </div>

        </div>

    </div>
    <div class="social-links">
        <span><i class="fab fa-facebook-square"></i></span>
        <span><i class="fab fa-twitter-square"></i></span>
        <span><i class="fab fa-linkedin"></i></span>
        <span><i class="fab fa-youtube-square"></i></span>

    </div>

   
</div>
   
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    cursor: url(/img-1.png), auto;
}
.container {
    position: relative;
    width: 100%;
    height: 100vh;
   
}
.navbar {
    padding: 10px 20px;
    background: #222222;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.navbar .logo {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0 8%;
    color: #fff;
}
.navbar .nav {
    margin: 0 8%;
}
.navbar .nav ul {
   display: flex;
}
.navbar .nav ul li {
  list-style: none;
}
.navbar .nav ul li a{
  text-decoration: none;
  color: #fff;
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0 10px;
  padding: 3px 5px;
  transition: 0.2s;
}
.navbar .nav ul li a:hover {
    background: #fff;
    border-radius: 5px;
    color: #000;
}
.header {
    width: 100%;
    height: 100vh;
    background-image: url(/bg-img.jpg);
}
.header .header-featur {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
}
.header-featur  .header-content {
    position: relative;
    top: 20vh;
    text-align: center;
}
.header-content .tittle {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.header-content p {
    font-size: 2rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.header-content a {
    display: inline-block;
    margin: 10px 20px;
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 5px;
    border:2px solid #fff ;
    text-decoration: none;
    background: #222222da;
    transition: 0.2s;
}
.header-content a.btn {
    background: #fff;
    color: #000;
    cursor:url("img-1.png"), auto;
}
.header-content a:hover {
    background: #fff;
    color: #000;
    transition: 0.2s;

}
.header-content a.btn:hover {
    background: #222222da;
    color: #fff;
    border: 2px solid #fff;

}
.social-links {
    display: block;
    position: absolute;
    right: 8%;
    bottom: 8%;
}
.social-links span {
    color: #fff;
    font-size: 2rem;
    margin: 10px;
    transition: 0.5s;
    padding:3px 8px;
    border-radius: 5px;
}
.social-links span:hover {
    color: #000;
    background: #fff;
}

body {
    position: relative;
    cursor:url("img-1.png"), auto;
   
}

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram