Make Complete Responsive Website Layout | Coding From Mobile | HTML, CSS, JavaScript | Mayank Salvi
HTML, CSS एवं JavaScript की help से Complete Responsive Website Layout बनाने के लिये सबसे पहले आपको एक App की जरूरत होगी
इस Tutorial में हमे सीखेंगे, Responsive Website Layout कैसे तैयार करते हैं ।
HTML, CSS एवं JavaScript की help से Complete Responsive Website Layout बनाने के लिये सबसे पहले आपको एक App की जरूरत होगी जिसकी Complete Guidence मैं मेंरे Previous Tutorial में दे चुका हूं जिसे आप नीच Link पर Click करके देख सकते हैं ।
Click Here: Make Complete Website My Previous Blog
अगर आप अपने कंप्युटर पर Coding करते हैं तो अपना Code Editor या Notepad को open करके नीचे दिये गये को Paste कीजिये।
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
header {
padding: 30px;
text-align: center;
background: #fff;
}
header h1 {
font-size: 50px;
color: #2a9dbf;
margin-bottom: 0;
}
header p {
letter-spacing: 4px;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolomn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
.fakeimg {
background-color: #2a9cbfb9;
width: 100%;
padding: 20px;
}
.card {
background-color: #fff;
padding: 20px;
margin-top: 20px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #2a9dbf;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolomn {
width: 100%;
padding: 0%;
}
}
@media screen and (max-width: 400px) {
nav a {
float: none;
width: 100%;
}
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #2a9dbf;
overflow: hidden;
position: sticky;
top: 0;
z-index: 1;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #333;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.topnav .float {
float: right;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<h1>Website Name</h1>
<P>Welcome to my website here available all notes of html</P>
</header>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#about" class="float">Login</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus doloremque delectus, ullam quas
voluptatibus in molestias hic inventore ipsam dicta</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2021</h5>
<div class="fakeimg" style="height: 200px;">Image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus doloremque delectus, ullam quas
voluptatibus in molestias hic inventore ipsam dicta</p>
</div>
</div>
<div class="rightcolomn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height: 100px;"></div>
<p>some text about me.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid repellendus
nisi itaque accusamus, vel a molestiae fuga iste distinctio, saepe temporibus magni ipsa earu</p>
</div>
<div class="card">
<h3>popular Post</h3>
<div class="fakeimg">
<p>image</p>
</div>
<div class="fakeimg">
<p>image</p>
</div>
<div class="fakeimg">
<p>image</p>
</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some Text...</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
इसके बाद आपको अपनी File को
.html या
.htm Extension से करनी है ।
Save की गई FIle को आपको Browser में Open करनी है।
यहां देख सकते हो आपका Project तैयार है।