How to Make One Page Website using HTML and CSS

In this tutorial, you can learn How to Make One Page Website using HTML and CSS. You can see demo of website via click on below button and free source code also available for you own website.

Demo Download

Step to Make One Page Website using HTML and CSS

To make one page website usinf HTML and CSS, we need to follow below all steps:

  • Create HTML File
  • Create CSS File

1: Create HTML File

First of all, we create a index.html file and add following code in head section.

<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

after add above code, now copy below code and paste in body section.

	<div class="container">
		<div class="left"></div>

		<div class="right">
			<div class="overlay">
				<nav>
					<ul>
						<li><a href="#" class="active">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Service</a></li>
						<li><a href="#">Portfolio</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
				<h1>T-Code Scripts</h1>
				<h3>Check back for 2020 updates</h3>
				<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<button class="button">Read More</button>
				<div class="social">
					<ul>
						<li><a href="#">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<i class="fa fa-facebook" aria-hidden="true"></i>
						</a></li>

						<li><a href="#">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<i class="fa fa-twitter" aria-hidden="true"></i>
						</a></li>

						<li><a href="#">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<i class="fa fa-google-plus" aria-hidden="true"></i>
						</a></li>

						<li><a href="#">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<i class="fa fa-linkedin" aria-hidden="true"></i>
						</a></li>

						<li><a href="#">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<i class="fa fa-instagram" aria-hidden="true"></i>
						</a></li>
					</ul>
				</div>
				<div id="slider">
					<figure>
						<img src="slider/slider1.jpg">
						<img src="slider/slider2.jpg">
						<img src="slider/slider3.jpg">
						<img src="slider/slider4.jpg">
						<img src="slider/slider5.jpg">
					</figure>
				</div>

			</div>
		</div>
	</div>

In above code, we create a multiple div for left right partition, for menu bar, for social icon and slider.

2: Create CSS File

Secondly, we create a style.css file for make stylish web page.

*{
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
}
.container{
	width: 100%;
	height: 100vh;
	background-image: url(bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.left{
	width: 40%;
	height: 100%;
	float: left;
}
.right{
	width: 60%;
	height: 100%;
	float: right;
	display: flex;
	justify-content: center;
	align-items: center;
}
.right .overlay{
	width: 100%;
	height: 90%;
	background: rgba(0,0,0,.2);
	border-radius: 20px 0 0 20px;
}

/* *********************** Start Menu Bar ******************** */
nav{
	display: flex;
	justify-content: center;
}
nav ul{
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li{
	list-style: none;
	margin-left: 10px;
}
nav ul li a{
	display: block;
	margin: 10px 0;
	padding: 10px 20px;
	text-decoration: none;
	color: #fff;
	border-radius: 10px;
	text-transform: uppercase;
}
nav ul li a.active,
nav ul li a:hover{
	background: #c9ebff;
	color: #262626;
}
.right .overlay h1{
	text-align: center;
	margin-top: 50px;
	text-transform: uppercase;
	color: #fff;
	font-size: 48px;
	text-decoration: underline;
	cursor: pointer;
}
.right .overlay h3{
	text-align: left;
	margin-top: 20px;
	margin-left: 20px;
	color: #262626;
}
.right .overlay p{
	margin: 10px 20px;
	color: #262626;
	text-align: justify;
}
.button{
	padding: 16px 32px;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: transparent;
	color: #fff;
	border: 2px solid #c9ebff;
	border-radius: 5px;
}
.button:hover{
	background-color: #c9ebff;
	color: #262626;
}

/* *********************** Start Social Icon ******************** */
.social{
	margin-top: 20px;
}
.social ul{
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
.social ul li{
	list-style: none;
}
.social ul li a {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	margin: 0 10px;
}
.social ul li a:hover {
	color: #c9ebff;
	transition: 1s;
}
.social ul li a span {
	position: absolute;
	transition: transform 0.5s;
}




.social ul li a span:nth-child(1)
{
	width: 100%;
	height: 2px;
	background: #c9ebff;
	top: 0;
	left: 0;
	transform-origin: right;
}
.social ul li a:hover span:nth-child(1)
{
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s;
}

.social ul li a span:nth-child(3)
{
	width: 100%;
	height: 2px;
	background: #c9ebff;
	bottom: 0;
	left: 0;
	transform-origin: left;
}
.social ul li a:hover span:nth-child(3)
{
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s;
}




.social ul li a span:nth-child(2)
{
	top: 0;
	left: 0;
	transform: scaleY(0);
	transform-origin: bottom;
}
.social ul li a:hover span:nth-child(2)
{
	width: 2px;
	height: 100%;
	background: #fff;
	transform: scaleY(1);
	transform-origin: top;
	transition: transform .5s;
}

.social ul li a span:nth-child(4)
{
	top: 0;
	right: 0;
	transform: scaleY(0);
	transform-origin: top;
}
.social ul li a:hover span:nth-child(4)
{
	width: 2px;
	height: 100%;
	background: #fff;
	transform: scaleY(1);
	transform-origin: bottom;
	transition: transform .5s;
}

/* *********************** Start Slider ******************** */
#slider{
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
}
#slider figure{
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: slider 30s infinite;
}
#slider figure img{
	width: 20%;
	float: left;
}
@keyframes slider{
	0%{ left: 0; }
	20%{ left: 0; }
	25%{ left: -100%; }
	40%{ left: -100%; }
	45%{ left: -200%; }
	60%{ left: -200%; }
	65%{ left: -300%; }
	80%{ left: -300%; }
	85%{ left: -400%; }
	100%{ left: -400%; }
}

You just copy above code and paste in style file.

Conclusion

Today we learnt how to make a one page website using HTML and CSS. You can use this code on your own website.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Related Tags:

  • How to make responsive website
  • How to make responsive website using bootstrap
  • How to make an existing website responsive
  • Responsive web design css
  • Responsive web design examples with source code
  • Responsive web design tutorial step by step
  • Responsive website examples
  • Responsive web design template
  • Responsive css code for all screen size

Leave a Reply

Your email address will not be published. Required fields are marked *