Need to figure out how to make a site with HTML and CSS?
You're in the correct spot. In this aide, we show you every one of the means to get from a clear screen to a functioning site that is upgraded and very gorgeous simultaneously.
Above all, what is HTML and CSS?
Indeed, you could simply look into the two terms in Wikipedia, however those definitions aren't very peruser well disposed. We should work on things a piece:
HTML (Hypertext Markup Language) characterizes the design and substance of a site page – where things go, how they are spread out, and what's on the page
CSS (Cascading Style Sheets) characterizes the styling/show of a site page and the components on it
You can't actually have one without the other – the two work together to make up the last page, its plan, and the substance that is on it.
Note; when we say "a page," what we mean is a solitary HTML report – a solitary page that is important for your site. While, "a site" is the finished thing – your entire website with all its individual site pages.
Source Code
HTML File (save as 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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Website</title>
</head>
<body>
<div class="container">
<div class="nav-bar">
<img src="logo.png" class="logo">
<h3>Codewithharsh</h3>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<button class="btn">Register Now</button>
</div>
<div class="content">
<h1>Enjoy This <br> Website</h1>
<h4>Boost Your Learning Skills..</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing<br> elit, sed do eiusmod
tempor incididunt ut labore et dolore magna <br>aliqua. Ut enim ad minim veniam,
quis nostrud exercitation
</p>
<div class="content2">
<button class="btn2">Welcome</button>
<div class="social-media">
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-pinterest"></i></a>
<a href=""><i class="fa fa-google"></i></a>
<a href=""><i class="fa fa-youtube"></i></a>
<a href=""><i class="fa fa-github"></i></a>
</div>
</div>
</div>
<img src="img1.png" class="image">
</div>
</body>
</html>To Download Images Click here
CSS File (save as style.css)
* {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
width: 100%;
background-image: url(background.png);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.nav-bar {
width: 100%;
height: 15vh;
margin: auto;
display: flex;
align-items: center;
}
.logo {
width: 50px;
cursor: pointer;
}
h3 {
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
font-size: 20px;
font-weight: 600;
color: #378de5;
}
nav {
flex: 1;
padding-left: 350px;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 20px;
}
nav ul li a {
text-decoration: none;
color: #1b1b1b;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
}
nav ul li a:hover {
border-bottom: 1px solid #378de5;
width: 25px;
color: #378de5;
height: 0.18px;
transition: border-bottom .3s;
}
.btn {
box-shadow: inset 0px 1px 0 0 #bbdaf7;
text-transform: uppercase;
background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
border-radius: 30px;
border: 1px solid #84bbf3;
cursor: pointer;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 17px;
font-weight: 700;
padding: 12px 19px;
text-decoration: none;
box-shadow: 1px 4px 12px rgba(94,28,68,.15);
text-shadow: 0px 1px 0px #528ecc;
}
.btn:hover {
box-shadow: 3px 8px 22px rgba(94,28,68,.15);
transform: scale(1.1);
transition: .2s ease-in-out;
}
/* CONTENT */
h1 {
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
font-weight: 700;
margin-top: 40px;
letter-spacing: .1em;
font-size: 53px;
color: #1641cf;
}
h4 {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 800;
margin-top: 10px;
letter-spacing: .2em;
color: #65aaee;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .1em;
margin-top: 50px;
color: #378de5;
}
.content2 {
display: flex;
align-items: center;
}
.btn2 {
background-image: linear-gradient(to right, #1a2980 0%, #26d0ce 51%, #1a2980 100%);
margin-top: 80px;
padding: 15px 45px;
text-align: center;
transition: .5s;
border: none;
outline: none;
text-transform: uppercase;
color: #fff;
font-family: 'Poppins', sans-serif;
cursor: pointer;
font-weight: 700;
font-size: 22px;
display: block;
border-radius: 30px;
background-size: 200% auto;
box-shadow: 3px 8px 22px rgba(94,28,68,.15);
}
.btn2:hover {
background-position: right center;
color: #fff;
text-decoration: none;
}
.social-media {
font-family: 'Poppins', sans-serif;
margin-top: 80px;
margin-left: 50px;
text-decoration: none;
font-size: 27px;
}
.fa {
color: #378de5;
padding: 5px;
}
.fa:hover {
transform: scale(1.2);
color: #1b1b1b;
transition: .5s;
}
.image {
height: 90%;
position: absolute;
width: 50%;
bottom: 0;
right: 0;
}Or,
Click here to get free files
0 Comments