Skip to main content

How to create a complete website part-1

How to create a complete website part-1(source code)

Here's the video:


Hi guys how are you all I hope that you all are great and doing good today in this post I am going to give you the source code on my video called How to create a complete website so let's begin :

so guys the source code is here and I have separated all the source codes of the files:
The Source code of the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeAndMan - Your Pathway to the success</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="utils.css">
</head>
<body>
    <header>
        <nav class="flex s-bw">
            <div class="logo">
                <h1>Gautam Sharma</h1>
            </div>
            <ul class="links flex s-bw">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Social Media</a></li>
            </ul>
            <div class="left flex s-around">
                <div class="btn_div">
                    <button class="btn">Contact Us</button><button class="btn">Visit Our Blog</button>
                </div>
            </div>
        </nav>
        <section class="header-section flex s-center">
            <h1>Welcome to Code And Man</h1>
            <p>Your Pathway to the success</p>
            <div>
            <button class="btn">Instagram</button><button class="btn">Facebook</button>
            </div>
        </section>
    </header>
    <section class="contactus w-full h-full">
        <div class="heading w-full">
        <h1>Contact Us</h1>
        <p class="subtitle">feel free to contact Us!</p>
        <div class="form">
            <form action="#">
                <p class="welcome">Welcome to the form</p>
                <input class="bgnone" type="text" name="name" id="name"placeholder="Enter Your Name">
                <input class="bgnone" type="text" name="username" id="username"placeholder="Enter Your Username">
                <input class="bgnone" type="password" name="password" id="password"placeholder="Enter Your Password">
            </form>
        </div>
        </div>
    </section>
    <script src="index.js"></script>
</body>
</html>

The Source code of the style.css file:

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: cursive;
    overflow-x: hidden;
}
::selection{
    font-weight: bold;
    color:white;
    background-color: black;
    font-family:cursive;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
/* CSS Start */
nav{
    width:100%;
    height:10vh;
    color:white;
    background-color: rgb(7, 135, 255);
}
nav a{
    font-weight: 900;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.logo{
    width:20%;
}
.links{
    width:40%;
}
.left{
    width:40%;
}
.left .btn_div{
    display: flex;
    align-items: center;
    justify-content:center;
    width:100%;
}
.header-section{
    height:90vh;
    flex-direction: column;
    background-color: blue;
}
/* Styling of the contact Us */
.contactus{
    display: flex;
    justify-content: center;
    width:100vw;
    height:100vh;
    background:url("images/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.contactus h1,.contactus p{
    text-align: center;
    color:white;
}
.contactus form{
    display:flex;
    align-items: center;
    justify-content: center;
    height:90vh;
    flex-direction: column;
}
.contactus form input{
    display: block;
}
.contactus form input{
    border:none;
    outline:none;
    border-bottom:2px solid purple;
    background-color: none!important;
}
.welcome{
    font-size:2pc;
    color:white;
}

Source code of the utils.css file:
.flex{
    display:flex;
    align-items: center;
}
.s-around{
    justify-content: space-around;
}
.s-bw{
    justify-content: space-between;
}
.s-even{
    justify-content: space-evenly;
}
.s-center{
    justify-content: center;
}
.btn{
    padding:6px;
    background: transparent;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight:bold;
    outline:none;
    color:white;
    margin:0px 5px;

}
.bgnone{
    background:none;
}
.h-full{
    height:100vh;
}
.w-full{
    width:100vw;
}

The Source Code of the index.js file is not written.

I hope that you liked the source code.
Thank You guys for accessing this source code.
Labels:

Comments

Post a Comment

Popular posts from this blog

The Professional HTML Cheatsheet For beginners in 2024 for free

The Professional HTML Cheatsheet For beginners in 2024 for free Hello guys,  You will be glad to know that I am going to start a cheatsheet series for you all. In this series I am going to give you cheat sheets of all the programming languages. If you want to get all of these cheat sheets for free then you can follow this blog and visit my youtube channel if you like the video content. This is the link to my youtube channel :- https://www.youtube.com/channel/UCmbrOCauavTcwIJeXYo4pjQ This is the link to my instagram :- https://instagram.com/gautam9465580 Father of all the links (Link to all of my social media platforms) :- https://code-and-man.blogspot.com/p/my-link-tree.html Now got all the information which I want to give you before the post so now let’s get started with the post:- In today’s post I am going to give you the first cheatsheet which is of HTML so let’s begin:- Boilerplate of HTML The Boilerplate code is the common code which is used in almost all of the web pages c...
Post a Comment
Continue Reading

Arrays and conversion in Javascript || javascript complete course || #7 (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called arrays and  conversion in JavaScript so let's begin:- // ARRAYS in javascript console . log (" This is arrays in js ") var arr1 = [ 32 , 34 , 23 , 23 , 234 ," this ", {     name:" Gautam ",     class : " 8th ",     rollno: 6 } ] console . log ( arr1 ) console . log ( arr1 [ 5 ]) console . log ( arr1 .length) console . log ( arr1 . concat (' main ')); console . log ( arr1 ); // // ---------------------------------------------------- // CONVERSION IN JAVASCRIPT // Converting in to strings var num1 = 45 ; console . log ( num1 ); var str1 = String ( num1 ); console . log ( str1 ); console . log ( typeof str1 ); console . log ( typeof num1 ); var number1 = 33453434 ; console . log ( number1 , typeof number1 ); var string1 = number1 . toString (); console . log ( string1 , typeof string1 ); // ----------------------------...
Post a Comment
Continue Reading

types of operators in javascript || javascript course || codeandman (sourcecode)

hey guys how are you all today in this post I am going to give you the source code of my video called types of operators in javascript. so let's begin : here's the complete source code and the video:- // ------------------------------------------------------------------------------------ // COMPARISON OPERATORS IN JAVASCRIPT console . log (" COMPARISON OPERATORS IN JAVASCRIPT ") console . log ( 32 == 32 ) // checking if 32 is equal to 32 console . log ( 32 != 32 ) // checking if 32 is not equal to 32 console . log ( 32 >= 31 ) // checking if 32 is greater or equal to 31 console . log ( 32 < 33 ) console . log ( 32 > 30 ) console . log ( 32 <= 09 ) // ASSIGNMENT OPERATORS console . log (" --------------------------------------- ") console . log (" Assignment operators in javascript ") var d = 34 ; var e = 3 ; var a = 10 ; console . log ( d ) console . log ( d += 1 ) console . log ( d -= 3 ) console . log ( e *= 2 ) console . log...
Post a Comment
Continue Reading