Online Computer Courses Classes and Training Program

how to design a website

इस पोस्ट में मैंने एक सिम्पल सा वेबसाइट का डिजाइन तैयार कैसे करते इसके बारे में लिखा है ये सिर्फ पहला पेज (home page )है। इसे आप बहुत आसानी से बनाना सीख सकते है हमारे कोड का उपयोग करके।


step 1 इसे बनाने के लिए सबसे पहले आप एक फोल्डर create करें इसके बाद css का फोल्डर create करें उसी folder में।

जरुर पढ़ें : Web development कोर्स सीखें 

step 2 इसके बाद आप इस html कोड को कॉपी करके अपने editor में पेस्ट करें और इसे सेव उसी folder में जो अपने पहले बनाया है इसका नाम आप 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  कैसा लगा हमें कमेंट के माध्यम से जरूर बताये और कोई सवाल पूछना हो तो हमसे कमेंट  से जरूर पूछे। आप चाहे तो हमारे इंस्टिट्यूट में भी  एडमिशन लेकर वेब डेवलपर बन  सकते है। 

आप चाहे तो हमारे इंस्टिट्यूट में भी एडमिशन लेकर वेब डेवलपर बन सकते है।


Post a Comment

0 Comments