Creating Landing Page Website - playlist - codeandman (source code)

-

Hey guys how are you all Today in this post I am going to give you the source code of my Landing Page website which I created on my YouTube channel Code And Man.

Here is the link to the playlist : Landing Page 

and Here is the source code of that : 

Index.html:

<!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>Landing Page - Code And Man</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>

            <div class="left">
                <h2 class="logo">CodeAndMan Coding Classes</h2>
                <p>Learn to code for free!</p>
            </div>
            <div class="right">
                <a href="#">Home</a>
                <a href="#services">Services</a>
                <a href="#pricing">Pricing</a>
                <a href="#onevone">1 v 1 classes</a>
            </div>
        </nav>
        <div class="headersection"><h1>CodeAndMan Coding Classes</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor sit amet, consectetur adipisicing elit. Unde minima, nemo explicabo odio quas blanditiis! Totam illum voluptates eligendi</p>
            <div class="buttons">
                <button>Book Your Trial</button>
                <button>View Pricing</button>
            </div>
        </div>
        </header>

        <h1 class="heading">Our Services</h1>
        <section id="services" class="services">
            <div class="card" id="card">
                <img src="https://images.pexels.com/photos/1708912/pexels-photo-1708912.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
                <h1>Interactive Classrooms</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
            </div>
            <div class="card" id="card">
                <img src="https://images.pexels.com/photos/7447192/pexels-photo-7447192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
                <h1>1 on 1 teaching</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
            </div>
            <div class="card" id="card">
                <img src="https://images.pexels.com/photos/5905893/pexels-photo-5905893.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
                <h1>Smart Classrooms</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
            </div>
        </section>
        <h1 class="heading">Our Pricing</h1>
        <section id="pricing" class="pricing">
            <div class="pricing_card">
                <h3>Basic</h3>
                <h1>10$</h1>
                <p id="p1">per month</p>
                <div class="shape"></div>
                <!-- ----------------------------------- -->
                <p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
                <button>Select plan</button>
            </div>
            <div class="pricing_card">
                <h3>Premium</h3>
                <h1>50$</h1>
                <p id="p1">per month</p>
                <div class="shape"></div>
                <!-- ----------------------------------- -->
                <p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
                <button>Select plan</button>
            </div>

            <div class="pricing_card">
                <h3>Business</h3>
                <h1>150$</h1>
                <p id="p1">per month</p>
                <div class="shape"></div>
                <!-- ----------------------------------- -->
                <p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
                <button>Select plan</button>
            </div>
        </section>
        <h1 class="heading">
            1 v 1 classes form
        </h1>
        <section id="onevone" class="onevone">
            <form>
                <input type="text" placeholder="Enter Your Name">
                <input type="number" placeholder="Enter Your Number">
                <input type="email" placeholder="Enter Parent's Email">
                <input type="eamil"placeholder="Enter child's email (if any)">
                <textarea placeholder="Enter Data about your child" cols="30" rows="10"></textarea>
                <div class="buttons">
                <input type="submit" value="Send">
                <input type="reset" value="Reset"></div>
            </form>
        </section>
        <footer>
            copyright &copy; codeandmancodingclasses.com
        </footer>
</body>
</html>

Style.css

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}
header{
    height: 100vh;
    width:100%;
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height:10vh;
    background-color: rgb(230 230 230 / 33%);

}
nav .right{
    width:70%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
nav a{
    text-decoration: none;
    text-transform: capitalize;
    color:black;
}
.headersection{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height:90vh;
    background-image: url('https://images.pexels.com/photos/4050291/pexels-photo-4050291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
    background-size: cover;

}
.headersection h1{
    color: red;

}
.headersection p {
    width:70%;
    color:tomato;
    text-align: center;
}
.buttons button{
    padding:5px;
    border:1px solid tomato;
    background-color: rgba(18, 17, 17, 0.336);
}
.buttons button:hover{
    background-color: rgba(52, 48, 48, 0.628);
    cursor: pointer;
}
.services{
    display: flex;
    height: 80vh;
}
h1.heading{
    border-bottom:3px solid tomato;
    margin-bottom: 7px;
    text-align: center;
}
.card{
    border:0.5px solid rgb(44, 38, 38);
    text-align: center;
    display:flex;
    align-items: center;
    justify-self: center;
    flex-direction: column;
    height:81%;
    margin:0 3px;
}
.card:hover{
    transition: all 0.3s ease-in-out;
    box-shadow: 3px 3px 3px 1px grey;
    margin-bottom: 3px;
}
.card img{
    width:100%;
}
.pricing{
    height:70vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
   

}
.pricing_card{
    background-image:linear-gradient(30deg,purple 10%,aqua 80%);
    display: flex;
    flex-direction: column;
    height: 89%;
    border:1px solid purple;
    text-align: center;
    margin:0px 3px;
}
.shape{
    background-color: white;
    height: 70%;
    width: 100%;
    border-radius: 50%;
}
.para2{
    margin-top:30vh;
}
.pricing_card button{
    width:50%;
    padding:3px 5px;
    margin:auto;
    background-image: linear-gradient(10deg, aqua 10%, rgb(13, 255, 178) 90%);
}
.onevone{
    height: 100vh;
    background:url("https://images.pexels.com/photos/7190886/pexels-photo-7190886.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}
.onevone form{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.onevone form input{
    outline:none;
    border:none;
    border-bottom:3px solid purple;
    background:none;
    margin: 5px 0;
    color:white;
}
.onevone form textarea{
    outline:none;
    color:white;
    border:3px solid purple;
    box-shadow: 9px 4px 19px 4px grey;
    background:none;
}
.onevone form textarea::placeholder{
    font-weight: bold;
}
.onevone form .buttons input{
    background: orangered;
    cursor:pointer;
    padding:3px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    border:none;
    margin: 4px;

}
footer {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color:white;
    background:black;
    text-shadow: 4px 9px 2px 1px white;
}

So this was the source code so I hope that you liked this playlist and this post.

Thank You.


Comments

Post a Comment

Popular posts from this blog

The Professional HTML Cheatsheet For beginners in 2024 for free

-
Image
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...
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 ); // ----------------------------...
Continue Reading

Top 3 Websites to get copyright free images in 2024 for free

-
  Hey guys how are you all today in this post I am going to tell you the names of Top 3 Websites to get copyright free images in 2024 for free  so let's begin with this post :- Top 3 websites to get free images in 2024  (complete short video) I have got a list of the three websites. here is it:- Pexels Unsplash Pixabay Pexels Pexels is a great website for downloading copyright free material like copyright free images. It is the first website from my list to Top 3 websites to get copyright free images in 2022 for free. Do check it out because I am sure that it will be a very beneficial for your all so I hope that you will give your kind and good visit to Pexels once. Let's go to the next website now:- Unsplash The Unsplash is also a great website to get copyright free stock images.  Here you can go to a source of unsplash and you can get a random image every time you reload and you also can get a image from here about every  topic you want. Don't forget to visit...
Continue Reading