So, we were taught how to rebuild a page with HTML and CSS. We worked on the Backroads page and it is one of my favorite pages to rebuild. So, I will talk about it in parts and share the code as well. Being one of my favorite pages to build during the Africa Agility GIT bootcamp, today I will be rebuilding only the nav bar and I will add a "sign up" button and a sign-in to the nav. Something that is not part of the original design.
We started this on the 28th of June, 2023 which turned out to be Eid (Sallah) day, and because of a tight schedule classes could not be moved.
HTML CODE for the nav bar:
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200&display=swap" rel="stylesheet">
<!-- Using fonts awesome -->
<script src="https://kit.fontawesome.com/098387041e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>Backroads Navigation</title>
</head>
<body>
<header>
<!-- THE NAVIGATION -->
<img class="logo" src="images/logo.svg" alt="Backroads logo">
<nav>
<ul class="nav_links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<ul>
<li class="in"><a href="#">Sign In</a></li>
<a class="cta" href="#"><button>Sign Up</button></a>
</ul>
</header>
</body>
</html>
CSS CODE:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
/* background-color: #ffffff; */
/* color: #090809; */
}
li, a, button{
text-decoration: none;
list-style: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
body{
font-family: 'poppins', 'sans-serif';
/* font-weight: 500; */
font-size: 16px;
}
.logo{
width:10%;
cursor: pointer;
}
.in{
float: left;
transition: all 0.3s ease 0s;
padding: 0px 20px;
}
.in:hover{
color:#069fff;
padding: 0px 50px;
}
.cta{
float: right;
}
header{
padding-bottom: 100px;
}
/* I changed all anchors tagsgreish */
a{
color: #575c5c;
}
.nav_links li{
list-style: none;
display: inline-block;
padding: 0px 20px;
color: #575c5c;
}
.nav_links li a{
transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
color:#069fff;
}
button{
padding: 9px 25px;
background-color: #64c4ff;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease 0s;
color:#ffffff;
}
/*
Button*/
.ctaB button{
font-size: 1.9rem;
margin-top: 20px;
transform: uppercase;
letter-spacing: 0.5px;
}
button:hover{
background-color: #069fff;
}
THE OUTPUT
So there you have the nav
References:
#20daysinFrontendwithAA