Create a Responsive Website Using HTML, CSS !


 

Hi,  In this tutorial we will try to solve the above-mentioned query. and also we will learn how to make a fully responsive website using HTML & CSS

Common Query

  • How to create a website using HTML and CSS
  • How to create a responsive website
  • How to create a website

How To Make Fully Responsive Website Using HTML & CSS Step by Step

First of all, we need to create two files index.html and style.css then we need to do the code for it.

Step:#1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Landing Page Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header id="header">
<div class="container">
<div class="header-inner">
<div class="brand">
<h1><a href="#"> My Logo</a></h1>
</div>
<div class="navbar desktop">
<nav class="nav">
<ul class="menu-list">
<li class="menu-item"><a href="#">Menu 1</a></li>
<li class="menu-item"><a href="#">Menu 2</a></li>
<li class="menu-item"><a href="#">Menu 3</a></li>
</ul>
</nav>
</div>
<div class="toggle_menu hide_desktop"><i class="fa fa-bars"></i></div>
<div class="navbar mobile hide_desktop">
<nav class="nav">
<ul class="menu-list">
<li class="menu-item"><a href="#">Menu 1</a></li>
<li class="menu-item"><a href="#">Menu 2</a></li>
<li class="menu-item"><a href="#">Menu 3</a></li>
<button class="close"><i class="fa fa-times"></i></button>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="content">
<div class="container">
<div class="grid-row-2">
<div class="col col-left">
<h3>Idea</h2>
<h2>Startup</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>
<button class="button">Learn More</button>
</div>
<div class="col col-right"><img src="rocket.png" alt="rocket"></div>
</div>
</div>
</div>
<footer id="footer">
<div class="footer-inner">
<div class="container">
<div class="grid-row-3">
<div class="col">
<div class="grid-icon-auto">
<div class="icon">
<img src="iocn-1.png" alt="icon 1">
</div>
<div class="text">
<h3>Heading</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col">
<div class="grid-icon-auto">
<div class="icon">
<img src="iocn-2.png" alt="icon 1">
</div>
<div class="text">
<h3>Heading</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<div class="col">
<div class="grid-icon-auto">
<div class="icon">
<img src="iocn-3.png" alt="icon 1">
</div>
<div class="text">
<h3>Heading</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script>
jQuery(document).ready(function () {
jQuery(".toggle_menu").click(function () {
jQuery(".navbar.mobile").addClass("show");
});
jQuery(".close").click(function () {
jQuery(".navbar.mobile").removeClass("show");
});
})
</script>
</body>
</html>

Step:#2

Then we need to add code for style.css which code I provide in the below screen.

* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
html,body {
background: url(bg.jpg)no-repeat center / cover;
height: 100vh;
width: 100vw;
overflow-x: hidden;
}
.container {
width: 90%;
max-width: 1140px;
margin: auto;
}
/* Header Start */
ul.menu-list {
list-style: none;
display: flex;
column-gap: 50px;
}
.menu-item > a {
text-decoration: unset;
color: #fff;
font-size: 18px;
}
.brand > h1 > a {
text-decoration: unset;
color: #fff;
font-size: 35px;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
header#header {
padding: 20px 0;
}
.toggle_menu {
display: none;
}
/* Header End */
/* Content Start */
.grid-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: space-between;
}
.col-right {
text-align: right;
animation: rocket 0.6s ease-in-out;
-webkit-animation: rocket 0.6s ease-in-out;
}
@keyframes rocket {
0% {
transform: translateY(1000px);
-webkit-transform: translateY(1000px);
-moz-transform: translateY(1000px);
-ms-transform: translateY(1000px);
-o-transform: translateY(1000px);
}
100% {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
}
}
h3 {
font-size: 2em;
color: #f0962e;
text-transform: uppercase;
}
h2 {
color: #fff;
font-size: 5em;
text-transform: uppercase;
}
p {
color: #fff;
font-size: 18px;
}
.button {
font-size: 18px;
color: #fff;
padding: 10px 20px;
background: linear-gradient(to top left, #f47309, #fdcd58);
border-radius: 50px;
border: unset;
box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);
cursor: pointer;
}
.col-left p, .col-left .button {
margin-bottom: 20px;
}
/* Content End */
/* Footer Start */
footer {
padding: 20px 0;
}
.grid-icon-auto {
display: grid;
grid-template-columns: auto auto;
column-gap: 20px;
}
.grid-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
}
footer p {
color: #1541c4;
}
/* Footer End */
.hide_desktop {
display: none;
}
@media screen and (max-width: 767px) and (min-width: 200px) {
html, body {
background: #1946c7;
}
.hide_desktop {
display: block;
}
.grid-row-3,.grid-row-2 {
grid-template-columns: 1fr;
row-gap: 30px;
}
.col.col-right {
display: none;
}
footer#footer p {
color: #fff;
}
.toggle_menu {
display: block;
font-size: 25px;
color: #fff;
cursor: pointer;
}
.navbar.desktop {
display: none;
}
.navbar.mobile ul.menu-list {
display: block;
}
.navbar.mobile {
position: fixed;
width: 80vw;
right: -1000px;
top: 0;
height: 100vh;
background: #fff;
transition: right 0.8s ease-in-out;
}
.navbar.mobile.show {
right: 0;
}
h2 {
font-size: 4em;
}
h3 {
font-size: 1.3em;
}
nav.nav {
height: 100%;
background: linear-gradient(to top left, #f47309, #fdcd58);
}
.navbar.mobile ul.menu-list > li > a {
color: #1946c7;
display: inline-block;
}
button.close {
background: #f47309;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
border: transparent;
position: absolute;
bottom: 0;
}
.navbar.mobile ul.menu-list > li > a {
padding: 10px;
background: linear-gradient(to top left, #f47309, #fdcd58);
width: 100%;
color: #fff;
border-bottom: 1px solid #ddd;
}
}

Comments

Post a Comment

Popular Posts