इस पोस्ट में मैंने एक सिम्पल सा वेबसाइट का डिजाइन तैयार कैसे करते इसके बारे में लिखा है ये सिर्फ पहला पेज (home page )है। इसे आप बहुत आसानी से बनाना सीख सकते है हमारे कोड का उपयोग करके।
step 1 इसे बनाने के लिए सबसे पहले आप एक फोल्डर create करें इसके बाद उसी Folder के अंदर css नाम का फोल्डर create करें।
जरुर पढ़ें : Web development कोर्स सीखें
step 2 इसके बाद आप इस html कोड को कॉपी करके अपने editor में पेस्ट करें और इसे सेव उसी folder में करें जो आपने पहले बनाया है इसका File का नाम आप index.htm रखें।
step 3 अब आप css कोड को कॉपी करें और इसे अपने editor में पेस्ट करें फिर इसे सेव करें css folder में style.css नाम से अब आप इसमें थोड़ा बहुत एडिटिंग खुद से करें जैसे अपने बैकग्राउंड इमेज को सेट करें बाकि design css की ठीक है वॉलपेपर सेट कर लेने के बाद आप html file इंडेक्स को open कर के देख सकते है। आप का होम page बनकर तैयार हो चूका है।
Source Code:
html code:
<!DOCTYPE html>
<html>
<head>
<title>DDRI CREATIONS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="logo">
<img src="LOGO%20DIG.png">
</div>
<div class="title">
<h1>DDRI CREATIONS</h1>
</div>
<div class="button">
<a href="#" class="btn">WATCH VIDEOS</a>
<a href="#" class="btn">LEARN MORE</a>
</div>
</header>
</body>
</html>
css code:
*{
margin: 0;
padding: 0;
font-family: century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid #fff;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.logo img{
float: left;
width: 200px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
ul li.active a{
background-color: #fff;
color: #000;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
अगर आपको यह पोस्ट How to design a website कैसा लगा हमें कमेंट के माध्यम से जरूर बताये और कोई सवाल पूछना हो तो हमसे कमेंट से जरूर पूछे। आप चाहे तो हमारे इंस्टिट्यूट में भी एडमिशन लेकर वेब डेवलपर बन सकते है।
step 1 इसे बनाने के लिए सबसे पहले आप एक फोल्डर create करें इसके बाद उसी Folder के अंदर css नाम का फोल्डर create करें।
जरुर पढ़ें : Web development कोर्स सीखें
step 2 इसके बाद आप इस html कोड को कॉपी करके अपने editor में पेस्ट करें और इसे सेव उसी folder में करें जो आपने पहले बनाया है इसका File का नाम आप index.htm रखें।
step 3 अब आप css कोड को कॉपी करें और इसे अपने editor में पेस्ट करें फिर इसे सेव करें css folder में style.css नाम से अब आप इसमें थोड़ा बहुत एडिटिंग खुद से करें जैसे अपने बैकग्राउंड इमेज को सेट करें बाकि design css की ठीक है वॉलपेपर सेट कर लेने के बाद आप html file इंडेक्स को open कर के देख सकते है। आप का होम page बनकर तैयार हो चूका है।
Source Code:
html code:
<!DOCTYPE html>
<html>
<head>
<title>DDRI CREATIONS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="logo">
<img src="LOGO%20DIG.png">
</div>
<div class="title">
<h1>DDRI CREATIONS</h1>
</div>
<div class="button">
<a href="#" class="btn">WATCH VIDEOS</a>
<a href="#" class="btn">LEARN MORE</a>
</div>
</header>
</body>
</html>
css code:
*{
margin: 0;
padding: 0;
font-family: century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid #fff;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.logo img{
float: left;
width: 200px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
ul li.active a{
background-color: #fff;
color: #000;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
अगर आपको यह पोस्ट How to design a website कैसा लगा हमें कमेंट के माध्यम से जरूर बताये और कोई सवाल पूछना हो तो हमसे कमेंट से जरूर पूछे। आप चाहे तो हमारे इंस्टिट्यूट में भी एडमिशन लेकर वेब डेवलपर बन सकते है।
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें