Create HTML Template Using Only HTML and CSS

HTML Templates | October 29, 2021

In this blog, you can learn how to create Simple Full Screen Slide Website using only HTML and CSS.

Video tutorial of In this video, you can learn how to create Simple Full Screen Slide Website using only HTML and CSS.

This tutorial video can help you to create Simple Full Screen Slide Website using only HTML and CSS.

Create HTML Template Using Only HTML and CSS[Source Codes]

This source code can help you to create Simple Full Screen Slide Website using only HTML and CSS.
Image source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="wrapper">
	<header id="header">
		<div class="container">
			<a href="#" class="logo">LOGO IT</a>
			<ul class="log">
				<li><a href="#">Login</a></li>
				<li><a href="#">SignUp</a></li>
			</ul>
		</div>
	</header>
	<div class="body-container">
		<nav class="main_nav">
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About Us</a></li>
				<li><a href="#services">Services</a></li>
				<li><a href="#contact">Contact Us</a></li>
			</ul>
		</nav>
		<section class="section" id="home" style="background-image: url(images/bg.jpg);">
			<div class="container">
				<div class="home-section">
					<h1>Home</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat.</p>
				</div>
			</div>
		</section>
		<section class="section" id="about" style="background-image: url(images/bg2.jpg);">
			<div class="container">
				<div class="home-section">
					<h2>About Us</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat.</p>
				</div>
			</div>
		</section>
		<section class="section" id="services" style="background-image: url(images/bg3.jpg);">
			<div class="container">
				<div class="services-section">
					<h2>Our Services</h2>
					<div class="services-row">
						<div class="services-col">
							<h3>Service 1</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
						</div>
						<div class="services-col">
							<h3>Service 2</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
						</div>
						<div class="services-col">
							<h3>Service 3</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section class="section" id="contact" style="background-image: url(images/bg4.jpg);">
			<div class="container">
				<div class="contact-section">
					<h2>Contact Us</h2>
					<form action="">
						<div>
							<input type="text" name="" placeholder="Name">
							<input type="text" name="" placeholder="Email">
							<select>
								<option>Services</option>
								<option>Service 1</option>
								<option>Service 2</option>
								<option>Service 3</option>
							</select>
							<input type="text" placeholder="Message">
							<input type="submit" value="Submit" name="">
						</div>
					</form>
				</div>
			</div>
		</section>

	</div>
	<footer id="footer">
		<div class="container">
			<span>Copyright © 2021 Example.com</span>
			<ul class="social_links">
				<li><a href="#"><img src="images/fb.png" alt=""></a></li>
				<li><a href="#"><img src="images/tw.png" alt=""></a></li>
				<li><a href="#"><img src="images/insta.png" alt=""></a></li>
				<li><a href="#"><img src="images/wa.png" alt=""></a></li>
			</ul>
		</div>
	</footer>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 18px;
	margin: 0;
	background: #fff;
	color: #000;
}
html{
	scroll-behavior: smooth;
}
img{
	max-width: 100%;
}

#header{
	position: fixed;
	width:100%;
	top: 0;
	left: 0;
	z-index: 10;
	padding: 15px 0;
	background:rgba(0,0,0,0.5);
}
#header .container{
	align-items: center;
}
.container{
	width: 100%;
	max-width: 1200px;
	margin-inline:auto;
	display: flex;
	justify-content: space-between;
}
.logo{
	font-size: 50px;
	font-weight: 900;
	text-decoration: none;
	line-height: 1;
	color: #fff;
}
.log{
	padding: 0;
	margin: 0;
	list-style: none;
}
.log li{
	display: inline-block;
}
.log li:first-child{
	border-right:1px solid #fff;
	padding-right: 10px;
	margin-right: 5px;
}
.log li:last-child a{
	background:#0097e6;
}
.log li:last-child a:hover{
	background:transparent;
}
.log li a{
	color: #fff;
	text-decoration: none;
	display: block;
	padding:5px 15px;
	border:2px solid #0097e6;
	border-radius: 25px;
	transition: all 0.3s ease-out;
}
.log li a:hover{
	background:#0097e6;
}
.section{
	width: 100%;
	height: 100vh;
	padding: 150px 0;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-color: rgb(0 151 230 / 50%);
	background-blend-mode: hard-light;
	display: flex;
	align-items: center;
}

.main_nav{
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.main_nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.main_nav ul li{
	margin: 10px 0;
}
.main_nav ul li a{
	font-size: 16px;
	display: block;
	padding: 12px 36px;
	background:#0097e6;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 30px 0 0 30px;
	text-align: center;
	transition: all 0.3s ease-out;
}
.main_nav ul li a:hover{
	background:#076ca0;
}

#footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	background:rgba(0,0,0,0.7);
	color: #fff;
}
#footer .container{
	align-items: center;
}
.social_links{
	padding: 0;
	margin: 0;
	list-style: none;
}
.social_links li{
	display: inline-block;
	margin-left: 5px;
}
.social_links li img{
	width: 30px;
	vertical-align: top;
}

.home-section,
.services-section,
.contact-section{
	padding: 40px;
	width: 100%;
	max-width: 800px;
	border-radius: 25px;
	background:rgb(0 59 90 / 61%);
	color: #fff;
}
h1,h2{
	font-size: 40px;
	margin:0 0 15px;
}
.services-section{
	max-width: calc(100% - 150px);
}
.services-section h2{
	text-align: center;
}
.services-row{
	display: flex;
	justify-content: space-between;
}
.services-col{
	flex:0 0 33.333%;
	padding: 0 15px;
	text-align: center;
}
.contact-section{
	max-width: 600px;
}
.contact-section input,
.contact-section select,
.contact-section textarea{
	font-family: arial;
	color: gray;
	width: 100%;
	padding: 10px 15px;
	margin: 0 0 15px;
	border:0;
	outline: 0;
	border-radius: 3px;

}
.contact-section input[type="submit"]{
	display: block;
	margin: 0 auto;
	width: 150px;
	text-align:center;
	cursor: pointer;
	background:#0097e6;
	color: #fff;
	transition: all 0.3s ease-out;
	text-transform: uppercase;
}
.contact-section input[type="submit"]:hover{
	background:#076ca0;
}

Create HTML Template Using Only HTML and CSS

Video tutorial of In this video, you can learn how to create Simple Full Screen Slide Website using only HTML and CSS.

Create HTML Template Using Only HTML and CSS[Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery