How to Make a movie website Using HTML & CSS

In this article I will teach you how to make a website using HTML and CSS. When you create a website first step you can create a folder and then you can open your code editor first step You can create a new file when you save your html file first step you have add .html extension after file name. Second step you can create a CSS file. When you create a CSS file. Then link your CSS file in html head section. I will explain you how to create a attractive website using html CSS.

Vistaprint Clone UI Design Using HTML CSS & JavaScript Only | How to create Full Website

I have also you font awesome CDN file in this project you can see that. You can see all file in below code. In this beautiful project I used html and CSS file only you can followed these steps and you also make a beautiful website  using html CSS only

Here is HTML File code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Moive Review Website</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@500&display=swap" rel="stylesheet">
</head>
<body>


<section class="banner">
	<div class="container">
		<img src="image/logo.png" class="logo-top">
		<div class="content-container">
			<span class="rating">7,8</span>

			<h1 class="title">Ace Master X</h1>
			<span><img src="image/star.svg" class="star"></span>
			<a href="" class="an"><img src="image/tag.svg">Comedy Horror</a>
			<a href="" class="an"><img src="image/time.svg">July 15, 2020</a>
			<p class="des">The film takes place in the near future, with Earth in the grip of The Blight, an airborne disease that causes food crops to turn to grey-brown powder. It rolls and billows across the land, piling up around houses and cars like the dust-drifts in Andrei Tarkovsky’s Stalker, another film in which the characters slip between time’s cogs.</p>
			<button class="read-more">Read More</button>
		</div>

	</div>
	
</section>
<header id="myHeader">
	<div class="container">
		<img src="image/logo.png" class="logo-bottom">

		<div class="nav">
			<ul>
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Review</a></li>
				<li><a href="#">Discover</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<i class="fa fa-bars mob-menu"></i>
	</div>
</header>
<section class="highlight">
	<div class="container">
		<div class="col-div-6">
			<h1 class="title head2">Highlights today</h1>
			<p class="p1">Be sure not to miss these reviews today.</p>
		</div>
		<div class="col-div-6">
			<div class="but-box">
			<a href="#" class="tab-btn current">Latest</a>
			<a href="#" class="tab-btn">Featured</a>
			<a href="#" class="tab-btn">New</a>
			</div>
		</div>
		<div class="clearfix"></div>
		<br><br>
		<div class="box1">
			<img src="image/p1.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Ace Master X</p>
			<a href="" class="tag"><img src="image/tag.svg">  Comedy Horror</a>
		</div>
		<div class="box1">
			<img src="image/p2.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Man from the Smoke</p>
			<a href="" class="tag"><img src="image/tag.svg">  Comedy Horror</a>
		</div>
		<div class="box1">
			<img src="image/p3.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Man in the Forest</p>
			<a href="" class="tag"><img src="image/tag.svg">  Horror</a>
		</div>
		<div class="box1">
			<img src="image/p4.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Gravity Runner</p>
			<a href="" class="tag"><img src="image/tag.svg">  Superhero</a>
		</div>
		<div class="clearfix"></div>
		
	</div>
	<br><br>
</section>

<section class="ban-2">
	<div class="content-container-1">
			<span class="rating">9,8</span>

			<h1 class="title">Silent Hill</h1>
			<span><img src="image/star.svg" class="star"></span>
			<a href="" class="an"><img src="image/tag.svg">Thriller</a>
			<a href="" class="an"><img src="image/time.svg">October 15, 2018</a>
			<p class="des">The film takes place in the near future, with Earth in the grip of The Blight, an airborne disease that causes food crops to turn to grey-brown powder. It rolls and billows across the land, piling up around houses and cars like the dust-drifts in Andrei Tarkovsky’s Stalker, another film in which the characters slip between time’s cogs.</p>
			<button class="read-more">Read More</button>
			<br><br>
		</div>
</section>


<section class="new-r">
		<div class="container">
			<h1 class="title-1">New Releases</h1>
			<p class="des-1">Our most recently released reviews.</p>
			<br><br>
		<div class="box2">
			<img src="image/p1.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Ace Master X</p>
			<a href="" class="tag"><img src="image/tag.svg">  Comedy Horror</a>
		</div>
		<div class="box2">
			<img src="image/p2.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Man from the Smoke</p>
			<a href="" class="tag"><img src="image/tag.svg">  Comedy Horror</a>
		</div>
		<div class="box2">
			<img src="image/p3.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Man in the Forest</p>
			<a href="" class="tag"><img src="image/tag.svg">  Horror</a>
		</div>
		<div class="box2">
			<img src="image/p4.jpg">
			<img src="image/star.svg" class="star1">
			<p class="p2">Gravity Runner</p>
			<a href="" class="tag"><img src="image/tag.svg">  Superhero</a>
		</div>
		<div class="clearfix"></div>
			<div class="sub">
				<p>Looking for something else? Search our reviews:</p>
				<input type="text" class="text1" placeholder="Search Here"></input>
				<button class="search">search</button>
			</div>
		</div>
</section>
<footer>
	<div class="container">
		<p>Copyright © M-SoftTech design </p>
	</div>
</footer>

<script type="text/javascript">
	
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".mob-menu").click(function(){
    $('.nav').slideToggle(1000);
  });
});
</script>
</body>
</html>

Here is CSS File code:

*{
	margin: 0;
	padding: 0;
	font-family: 'Catamaran', sans-serif;
	
}
.container{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.clearfix{
	clear: both;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #194058; 
}

::-webkit-scrollbar-thumb {
  background:#f1b722; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.logo-top{
	width: 230px;
    padding-top: 3%;
}
.banner{
	background: url(../image/x.jpg);
	height: 100vh;
	background-size: 100% 100%;
}
.content-container {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-left: 100px;
    padding-bottom: 40px;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
}
.rating{
	display: inline-block;
    margin-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 30px;
    background-color: #f1b722;
    color: #fff;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
}
.title{
	max-width: 90%;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 75px;
    line-height: 65px;
    font-weight: 800;
    letter-spacing: 0px;
}
.star{
	width: 100px;
	vertical-align: middle;
}
.an{
	color: white;
	padding-left: 25px;
}
.an img{
	width: 20px;
	padding-right: 10px;
    vertical-align: middle;
}
.des{
	margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    letter-spacing:0.5px;
    width: 550px;
    line-height: 32px;
}
.read-more{
	margin-top: 10px;
    padding: 10px 35px 10px;
    border-radius: 4px;
    background-color:transparent;
    font-size: 13px;
    line-height: 30px;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.read-more:hover{
	background-color: white;
	border-color: white;
	color: #121a20;
}
header{
	background: #0c2738;
	padding: 22px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  height: 50px;
}
.mob-menu{
	 float: right;
    color: white;
    font-size: 28px!important;
    margin-top: 13px;
    display: none!important;
}
.logo-bottom{
	width: 220px;
	vertical-align: middle;
}
.highlight{
	background-color: #081b27;
	padding-top: 100px;
    padding-bottom: 100px;
   
}
.nav{
	float: right;
	margin-top: -8px;
}
.nav ul li{
	list-style: none;
	float: left;
	padding: 20px;
}
.nav ul li a{
	color: white;
	text-decoration: none;
	font-size: 18px;
	color: #899ead;
}
.nav ul li a:hover{
	color: white;
}
.active a{
	color: white!important;
	border-bottom: 2px solid #f1b722!important;
	padding-bottom: 27px;
}
.col-div-6{
	width: 50%;
	float: left;
}
.head2{
	font-size: 50px;
	letter-spacing: 2px;
}
.p1{
	margin-top: 10px;
    color: #8ea9bd;
    font-size: 22px;
    font-weight: 100;
    font-family: system-ui;
}
.current{
	background-color: #fff!important;
    color: #374550!important;
}
.tab-btn{
	margin-left: 15px;
    padding: 11px 30px 9px;
    border-radius: 40px;
    background-color: #0c2738;
    transition: background-color 200ms ease, color 200ms ease;
    color: #3b4b57;
    text-decoration: none;
}
.but-box{
	float: right;
    padding-top: 80px;
}
.box1{
	width: 23.1%;
	float: left;
	margin: 10px;
	
}
.box1 img{width: 100%; border-radius: 10px;}

.star1{
	margin-top: 20px;
	width:80px!important;
}
.p2{
	letter-spacing: 1px;
	font-size: 20px;
    color: white;
    font-weight: 600;
}
.tag{
	color: #cad3da;
	text-decoration: none;
}
.tag img{
	width: 20px!important;
	vertical-align: middle;
}
.ban-2{
	background: url(../image/ban-2.jpg);
	background-size: 100% 100%;
	height: 120vh;
	position: relative;
}
.content-container-1 {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-left: 100px;
    padding-bottom: 40px;
    background-image: linear-gradient(180deg, transparent, rgb(8 27 39));
}
.new-r{
	background-color: #081b27;

}
.title-1{
	font-size: 100px;
	text-align: center;
	color: white;
	margin-top: -50px;
	position: relative;
}
.des-1{
	text-align: center;
    color: #8ea9bd;
    font-family: system-ui;
    font-size: 24px;
    font-weight: 100;
    margin-top: -25px;
}
.box2{
	width: 48.1%;
	float: left;
	margin: 10px;
}
.box2 img{width: 100%; border-radius: 10px;}
.sub{
	padding: 100px;
	text-align: center;
}
.sub p{
	color: #f1b722;
	font-size:20px;
	font-weight:100;
	font-family:system-ui;
}
.text1{
	padding: 15px;
    width: 550px;
    border-radius: 35px;
    border: none;
    outline: none;
    margin-top: 20px;
    padding-left: 30px;
}
footer{
	background: #0c2738;
	color: #8ea9bd;
	padding: 20px;
	text-align: center;
}
.search{
	padding: 10px 35px;
    font-size: 20px;
    border-radius: 50px;
    border: none;
    background: #f1b722;
    margin-left: -91px;
    line-height: 34px;
}

@media only screen and (max-width: 1140px) {
  .container{
  	width: 800px;
  }
  .banner{
  	text-align: center;
  }
  .title{
  	font-size: 55px;
  	max-width: 100%;
  }
  .des{
  	width: 100%;
  }
  .content-container{
  	padding: 50px;
  }
  .box1{
  	width: 47.1%;
  }
  .col-div-6{
  	width: 100%;
  	text-align: center;
  }
  .but-box {
    float: none;
    padding-top: 40px;
    margin-left: -20px;
}
.content-container-1{
	padding: 50px;
}
.box2{
	width: 47.1%;
}
.text1{
	width: 450px;
}
}

@media only screen and (max-width: 850px) {
	.container{
  	width: 600px;
  }
  .mob-menu{
  	float: right;
    color: white;
    font-size: 28px!important;
    margin-top: 13px;
    display: block!important;
  }
  .nav{
    display: block;
    position: absolute;
    background: #0c2738;
    width: 100%;
    text-align: left;
    left: 0;
    top: 102px;
  }
  .nav ul li{
  	float: none;
  }
	.title{
		font-size: 35px;
	}
	.des{
		font-size: 14px;
	}
	.read-more{
		padding: 4px 21px 2px;
	}
	.p1{
		font-size: 15px;
	}
	.tab-btn{
		margin-left: 5px;
    padding: 5px 20px 5px;
	}
	.title-1{
		font-size: 55px;
	}
	.des-1{
		font-size: 20px;
	}
	.nav{
		display: none;
	}
	.box1 {
    width: 47.1%;
    margin: 0 auto;
    float: none;
    text-align: center;
    margin-bottom: 25px;
}
	.box2 {
    width: 47.1%;
    margin: 0 auto;
    float: none;
    text-align: center;
    margin-bottom: 25px;
}
.text1 {
    width: 200px;
}
}

@media only screen and (max-width: 600px) {
	.container{
  	width: 300px;
  }
  .title{
  	font-size: 20px;
  	line-height: 15px;
  }
  .des{
  	line-height: 18px;
  	font-size: 13px;
  }
  .an{
  	display: block;
  	padding-left: 0px;
  }
  .logo-bottom{
  	margin-left: -30px;
  }
  .box1, .box2{
  	width: 100%;
  }
  .highlight {
  	padding-bottom: 0px;
  }
  .ban-2{
  	height: 85vh;
  }
  .title-1 {
    font-size: 35px;
    line-height: 90px;
}
.sub {
    padding: 0px;
    text-align: center;
    padding-bottom: 24px;
}
.sub p{
	font-size: 14px;
}
}

How to Make Resume Website using HTML and CSS

If you have any problem to understand this code please watch video tutorial also

Leave a Reply

Your email address will not be published.