<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>syncprogramming.com</title>
<link rel="stylesheet" href="style.css">
<style>
.sideNav{
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(206, 9, 140);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
width: 0;
}
.sideNav a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sideNav a:hover{
color: yellow;
}
.sideNav .closeBtn{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main{
transition: margin-left 0.5s;
padding: 16px;
}
</style>
</head>
<body>
<nav class="navbar" id="navbar">
<ul>
<li style="color: white; font-size: 20px; cursor: pointer;" onclick="openNav()" id="open"><span>☰</span></li>
<li><a href="">Home</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">Services</a></li>
<li><a href="">About us</a></li>
<li><a href="">Our Clients</a></li>
</ul>
<div class="searchbar">
<input type="text" placeholder="SEARCH" style="text-align: center;">
</div>
</nav>
<div class="sideNav" id="mySidenav">
<a href="#" class="closeBtn" onclick="closeNav()">×</a>
<a href="">About</a>
<a href="">Services</a>
<a href="">Clients</a>
<a href="">Contact</a>
</div>
<div class="main-container" id="main">
<div class="header">
<h1>Welcome to Sync Programming</h1>
<p style="text-align: center;">Start your own Career</p>
</div>
<div class="header-button">
<button class="getStarted">Get Started</button>
</div>
</div>
<script>
function openNav(){
document.getElementById('mySidenav').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px'
document.getElementById('open').style.display = 'none';
document.getElementById('navbar').style.marginLeft = '250px'
document.getElementById('navbar').style.display = 'none'
}
function closeNav(){
document.getElementById('mySidenav').style.width = '0';
document.getElementById('main').style.marginLeft = '0'
document.getElementById('open').style.display = 'block';
document.getElementById('navbar').style.marginLeft = '0'
document.getElementById('navbar').style.display = 'flex'
}
</script>
</body>
</html>
No comments:
Post a Comment