Skip to main content

How to make a website (Part -2) - Code And Man

How to make a website (Part -2) - code and man

Hey guys how are you all today in this post I am going to give you the source code for free of my video called “How to create a website for free part 2” so let’s begin now:

The CSS Source Code

So guys at first I am going to give you the source code of the CSS so guys here’s the source code of the css:

*{

    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;

}

/* Media Queries Start */

@media (max-width:1068px) {

    nav{

        display: block!important;

        height: 15vh;

    }

    .logo{

        width:100vw;

    }

    .logo h1{

        text-align: center;

    }

    .links{

        width:100%;

 

    }

    .left{

        width:100%;

    }

    .left .btn_div{

        display: flex;

        justify-content: space-between;

        text-align: center;

    }

}

@media (max-width:600px){

    .links a {

        font-size:50%;

    }

}

@media (max-width:320px){

    .header-section h1{

        font-size: 70%;

    }

}

/* Media Queries End */

 

Here’s the source code of the index.html (same till the last post):

<!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 index.html is blank already!

I hope that you feel great after accessing this source code.

Thank You guys share this to all those who want this and who need this.

Labels:

Comments

Post a Comment

Popular posts from this blog

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

Complete HTML Tutorial for beginners

Complete HTML Tutorial for beginners   I f you want to read this in a pdf than you can get this ebook:- Getting started with the html About This Course The html is the language for creating web pages. It is used for defining the content with the html you can create very simple web pages with CSS you can make the simple web page stylish and with the Javascript you can add logic to those stylish web pages. if you want to earn money from the web development then it is compulsory for you to learn these three languages. Today in this post you will learn the html completely. so let's begin:- Introduction to Html The html is the language for defining the elements of the web page. It stands for hyper text markup language. It is easy to learn. It is the basic language for creating web pages. Tags and Elements in the HTML There are two things in the HTML:- Tags - It is the part of the text which is used for creating content.  Elements - When we insert content inside a html tag then it ...
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