<!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="stylesheet" href="../css/style2.css">
<title>Document</title>
<style>@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;1,800&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.navbar{
background-color: rgba(131, 139, 179, 0.685);
color: white;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
font-weight: 700;
}
.brand-title{
font-size: 1.5rem;
margin: .5rem;
text-transform: uppercase;
color:rgba(131, 139, 179, 0.781);
text-shadow: 0 5px 1px whitesmoke, 0 3px 1px whitesmoke;
}
.navbar-links ul{
margin: 0;
padding:0;
display: flex;
}
.navbar-links li{
list-style: none;
transition: all .5s ease-in-out;
}
.navbar-links li:hover{
background-color:rgba(131, 139, 179, 0.781);
}
.navbar-links a{
display: block;
padding: 1rem;
text-decoration: none;
color: white;
}
.toggle-btn{
display: none;
position: absolute;
top: .75rem;
right: 1rem;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.toggle-btn .bar{
height: 3px;
width: 100%;
background-color: #fff;
border-radius: 10px;
}
/*main content*/
main{
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 2rem;
position: relative;
}
.content-info h1{
font-size: 5rem;
line-height: .8;
text-transform: uppercase;
margin-bottom: .5rem;
}
.content-info a{
text-decoration: none;
background-color: rgba(131, 139, 179, 0.685);
padding: 10px;
display: inline-block;
text-transform: uppercase;
font-weight: 700;
color: white;
border-radius: 5px;
margin: 1rem .5rem 0 0;
transition: all 0.5s ease-out;
}
.content-info a:hover{
background-color:rgba(131, 139, 179, 0.781);
}
/*cta*/
.cta{
background-color:rgba(131, 139, 179, 0.781);
padding: 10px 20px;
border-radius: 5px;
width: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
}
.cta form{
display: flex;
flex-direction: column;
}
.cta label{
margin: .5rem 0;
}
.cta input{
padding: 8px;
border: none;
border-radius: 4px;
}
.cta button{
background-color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
margin: 1rem 0;
width: 15%;
text-align: center;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.cta button:hover{
background-color: whitesmoke;
}
@media (max-width:700px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.toggle-btn{
display: flex;
}
.navbar-links{
width: 100%;
display: none;
}
.navbar-links ul{
flex-direction: column;
width: 100%;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active{
display: flex;
}
/*main*/
main{
flex-direction: column;
margin: 4rem 2rem;
overflow: hidden;
}
.content-info h1{
font-size: 3rem;
}
/*cta*/
.cta button{
width: 30%;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="brand-title">Brand</div>
<a href="#" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Audio Books</a></li>
<li><a href="#">Notes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<main>
<div class="content-info">
<h1>Shana Codings</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut laboriosam nam suscipit debitis sapiente fuga.</p>
<a href="#">Sign Up</a>
<a href="#">Log In</a>
</div>
<div class="content-img">
<img src="../html/images/coding abstract vector images.webp" alt="">
</div>
</main>
<div class="cta">
<form action="#">
<label for="user">Username</label>
<input type="text" name="user" id="user" placeholder="user-name">
<span class="error"></span>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="email address">
<span class="error2"></span>
<label for="pass">Password</label>
<input type="text" name="pass" id="pass" placeholder="password">
<span class="error3"></span>
<button type="submit">Submit</button>
</form>
</div>
<script>
const toggleButton = document.getElementsByClassName("toggle-btn")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle("active")
})
</script>
</body>
</html>
Comments
Post a Comment