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.
Comments
Post a Comment