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