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
In it something is. Thanks for the help in this question, can I too I can to you than that to help?