How To Make Responsive Website Design Using HTML And CSS Step By Step
How To Make Responsive Website Design Using HTML And CSS Step By Step Homepage Website design | how to make a website | Landing page design
Index.html
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
| <title>Marketing you</title> |
|
|
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;1,300&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" type="text/css" href="style.css"> |
| </head> |
| <body> |
|
|
| <div id="home"> |
|
|
| <nav> |
| <div class="logo"> |
| MarketingYou |
| </div> |
| |
| |
| <ul> |
| <li><a href="#">Home</a></li> |
| <li><a href="#Discovers">Discovers</a></li> |
| <li><a href="#price">Pricing</a></li> |
| <li><a href="#contact">Support</a></li> |
| <li><a href="#" class="signup">Signup</a></li> |
| |
| </ul> |
|
|
| <span class="menubar" style="cursor: pointer; font-size: 35px; color: #fff; margin-top: 25px;" onclick="opennav()">≡</span> |
| </nav> |
|
|
| |
|
|
|
|
|
|
| <main> |
| <div class="left-side" data-aos="fade-right" |
| data-aos-offset="300" |
| data-aos-easing="ease-in-sine" |
| data-aos-duration="500"> |
| <h2>Marketing for you that never stop moving</h2> |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> |
| <a href="#">Sign Up</a> |
| </div> |
| <div class="right-side" data-aos="fade-left" > |
| <img src="banner.svg"> |
| </div> |
|
|
|
|
| </main> |
|
|
| |
| <div class="circle1"></div> |
| <div class="circle2"></div> |
|
|
| |
| </div> |
|
|
| |
| <script type="text/javascript"> |
| window.addEventListener('scroll',function(){ |
| var nav = document.querySelector('nav') |
| nav.classList.toggle('sticky', window.scrollY > 0); |
| }) |
| AOS.init(); |
|
|
| function opennav(){ |
| x = document.querySelector(".menubar"); |
| if (x.innerHTML === "≡") { |
| x.innerHTML = "×"; |
| document.querySelector("ul").style.display = "block"; |
| } |
| |
| else { |
| x.innerHTML = "≡"; |
| document.querySelector("ul").style.display = "none"; |
| } |
| } |
</script>
</body>
</html>
CSS file (style.css) |
html,body{
scroll-behavior: smooth;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#home{
height: 120vh;
background-color: #111;
color: #fff;
}
/**Circles**/
.circle1{
height: 100px;
width: 110px;
background-color: #1462DB;
border-radius: 50%;
position: absolute;
top: -10px;
left: -30px;
}
.circle2{
height: 100px;
width: 110px;
background-color: #DB1457;
border-radius: 50%;
position: absolute;
top: 85%;
left: -30px;
}
nav{
display: flex;
justify-content: space-around;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
nav ul{
display: none;
}
nav .logo{
padding: 30px 30px;
margin-left: -10px;
font-size: 20px;
color: #1462DB;
font-family: 'Raleway', sans-serif;
font-weight: bold;
}
nav ul li{
display: inline-block;
padding: 10px;
margin-right: 10px;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
nav ul li .signup{
background-color: #DB1457;
border-radius: 20px;
padding: 10px 25px;
color: #fff;
font-weight: bold;
}
nav ul li a:hover{
color: #DB1457;
}
nav ul li .signup:hover{
color: #fff;
}
.sticky{
background-color: rgb(13, 13, 14);
transition: 0.5s ease;
}
.sticky .logo{
color: #bb0669;
}
.sticky ul li a{
color: #fff;
}
.sticky .menubar{
color: #fff;
}
main{
display: flex;
justify-content: space-between;
padding-top: 70px;
}
main .left-side{
width: 40%;
margin: 6% 10% ;
}
main .left-side h2{
font-size: 40px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 200;
letter-spacing: -1px;
}
main .left-side p{
font-size: 15px;
color: #fff;
padding-bottom: 20px;
}
main .left-side a{
background-color: #DB1457;
border-radius: 20px;
padding: 10px 25px;
color: #fff;
font-weight: bold;
text-decoration: none;
font-family: 'Raleway', sans-serif;
}
main .right-side{
margin: 20px 40px;
}
@media only screen and (max-width: 600px) {
nav ul{
display: none;
}
nav ul li{
display: block;
padding: 20px 20px;
margin-right: 50px;
background-color: rgba(0,0,0,0.5);
color: #fafafa;
}
nav ul li a:hover{
color: #DB1457;
}
.circle1{
height: 50px;
width: 50px;
position: absolute;
top: 2%;
}
.circle2{
height: 50px;
width: 50px;
background-color: #DB1457;
border-radius: 50%;
position: absolute;
top: 66%;
left: -30px;
}
#homepage{
height: 95vh;
}
main{
display: flex;
flex-wrap: wrap;
}
main .left-side{
width: 100%;
}
main .right-side img{
display: none;
}
}
Tags: Responsive Website
"how to make website responsive using css
"html website"
"responsive website design"
"responsive website html css"
"responsive web design"
"website design"
"html"
"css"
"javascript"
"how to make a website using html and css"
responsive website design using html css and javascript
website restaurant light/dark mode
responsive landing page with html and css
responsive landing page using html and css
responsive landing page html css javascript
responsive landing page in html and css
responsive product landing page html and css tutorial
responsive landing page tutorial html css
responsive landing page using html css and javascript
| |
