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
