1.0 Introduction
Movie reviews are the focus of my website. A website with movie reviews is anexcellent resource for plot details. They can be helpful for discovering whether your favourite
actor or actress has appeared in any additional films that you might have missed. Websites
dedicated to movie reviews also serve the function of informing parents about the subject
matter of films and recommending those that are suitable for their children. To assist in
deciding whether or not a movie should be seen, my website identifies the genre and assigns
a grade to the movie.
2.0 Process
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Movieholic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font awesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header -->
<header>
<nav class = "navbar">
<div class = "container">
<a href = "index.html" class = "navbar-brand">Movieholic</a>
<div class = "navbar-nav">
<a href = "index.html">home</a>
<a href = "movie poster.html">movie poster</a>
<a href = "movie review.html">movie review</a>
<a href = "about.html">about</a>
</div>
</div>
</nav>
<div class = "banner">
<div class = "container">
<h1 class = "banner-title">
<span>Movieholic</span>
</h1>
<p>Where Movie Lovers Belong.</p>
</header>
<!-- end of header -->
<!-- design -->
<section class = "design" id = "design">
<div class = "container">
<div class = "title">
<h2>Movie Poster</h2>
<p>recent movies posters on the websites</p>
</div>
<div class = "design-content">
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "20th century girl.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">20th Century Girl</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "alive.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Alive</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "be with you.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Be With You</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "emergency declaration.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Emergency Declaration</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "exit.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Exit</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "forgotten.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Forgotten</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "love 911.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Love 911</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "memoir of murderer.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Memoir of Murderer</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "midnight.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Midnight</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "miracle in cell no 7.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Miracle in Cell No 7</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "my annoying brother.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">My Annoying Brother</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "my lovely angel.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">My Lovely Angel</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "on your wedding day.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">On Your Wedding Day</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "parasite.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Parasite</a>
</div>
</div>
<!-- end of item -->
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "unlocked.jpg" alt = "">
</div>
<div class = "design-title">
<a href = "#">Unlocked</a>
</div>
</div>
<!-- end of item -->
</div>
</div>
</section>
<!-- end of design -->
<!-- blog -->
<section class = "blog" id = "blog">
<div class = "container">
<div class = "title">
<h2>Movie Review</h2>
</div>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ffffff;
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #a61864;
}
</style>
</head>
<body>
<table>
<tr>
<th>Movie Name</th>
<th>Genre</th>
<th>Review</th>
</tr>
<tr>
<td>20th Century Girl</td>
<td>Melodrama</td>
<td>8/10</td>
</tr>
<tr>
<td>Alive</td>
<td>Thriller</td>
<td>7/10</td>
</tr>
<tr>
<td>Be With You</td>
<td>Fantasy</td>
<td>9/10</td>
</tr>
<tr>
<td>Emergency declaration</td>
<td>Action</td>
<td>9/10</td>
</tr>
<tr>
<td>Exit</td>
<td>Comedy</td>
<td>7/10</td>
</tr>
<tr>
<td>Forgotten</td>
<td>Mystery</td>
<td>7/10</td>
</tr>
<tr>
<td>Love 911</td>
<td>Drama</td>
<td>8/10</td>
</tr>
<tr>
<td>Memoir of Murderer</td>
<td>Crime</td>
<td>8/10</td>
</tr>
<tr>
<td>Midnight</td>
<td>Thriller</td>
<td>7/10</td>
</tr>
<tr>
<td>Miracle in Cell No 7</td>
<td>Drama</td>
<td>8/10</td>
</tr>
<tr>
<td>My Annoying Brother</td>
<td>Comedy</td>
<td>8/10</td>
</tr>
<tr>
<td>My Lovely Angel</td>
<td>Drama</td>
<td>8/10</td>
</tr>
<tr>
<td>On Your Wedding Day</td>
<td>Romance</td>
<td>9/10</td>
</tr>
<tr>
<td>Parasite</td>
<td>Thriller</td>
<td>9/10</td>
</tr>
<tr>
<td>Unlocked</td>
<td>Mystery</td>
<td>7/10</td>
</tr>
</table>
<!-- end of about -->
<!-- about -->
<section class = "design" id = "design">
<div class = "container">
<div class = "title">
<h2>About</h2>
<p>Thank you for visiting my website, where I post reviews of Korean movies.</p>
<p>I'm called Alisya. I'm 22 years old and reside in Selangor's Ampang. You can catch me ignoring calls and messages when I'm free because I'm engrossed in watching Korean movies.</p>
<p>This blog serves that purpose. You can decide what movies are worth your time and money by reading my review after I've seen them. So take a seat, unwind, and think back. You enjoy while I observe and write.</p>
<p>Thank you for visiting, and if you agree with my reviews, please spread the word!</p>
</div>
<!-- item -->
<div class = "design-item">
<div class = "design-img">
<img src = "alisya.jpg" alt = "">
</div>
</div>
<!-- end of item -->
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800;900&family=Quicksand:wght@300;400;500;600;700&display=swap');
:root{
--Playfair: 'Playfair Display', serif;
--Quicksand: 'Quicksand', sans-serif;
--Roboto: 'Roboto', sans-serif;
--dark: #000000;
--exDark: #510446;
}
*{
padding: 0;
margin: 0;
font-family: var(--Quicksand);
}
body{
line-height: 1.4;
color: var(--dark);
}
img{
width: 100%;
display: block;
}
.container{
max-width: 1320px;
margin: 0 auto;
padding: 0 1.2rem;
}
/* header */
header{
min-height: 100vh;
background: linear-gradient(rgba(73, 2, 127, 0.4), rgb(226, 152, 195)), url(logo.png) center/cover no-repeat fixed;
display: flex;
flex-direction: column;
justify-content: stretch;
}
.navbar{
background: rgba(0, 0, 0, 0.6);
padding: 1.2rem;
}
.navbar-brand{
color: rgb(255, 255, 255);
font-size: 2rem;
display: block;
text-align: center;
text-decoration: none;
font-family: var(--Playfair);
letter-spacing: 1px;
}
.navbar-nav{
padding: 0.8rem 0 0.2rem 0;
text-align: center;
}
.navbar-nav a{
text-transform: uppercase;
font-family: var(--Roboto);
letter-spacing: 1px;
font-weight: 500;
color: rgb(255, 255, 255);
text-decoration: none;
display: inline-block;
padding: 0.4rem 0.1rem;
letter-spacing: 3px;
transition: opacity 0.5s ease;
}
.navbar-nav a:hover{
opacity: 0.7;
}
.banner{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.banner-title{
font-size: 3rem;
font-family: var(--Playfair);
line-height: 1.2;
}
.banner-title span{
font-family: var(--Playfair);
color: var(--exDark);
}
.banner p{
padding: 1rem 0 2rem 0;
font-size: 1.2rem;
text-transform: capitalize;
font-family: var(--Roboto);
font-weight: 300;
word-spacing: 2px;
}
.banner form{
background: #fff;
border-radius: 2rem;
padding: 0.6rem 1rem;
display: flex;
justify-content: space-between;
}
.search-input{
font-family: var(--Roboto);
font-size: 1.1rem;
width: 100%;
outline: 0;
padding: 0.6rem 0;
border: none;
}
.search-input::placeholder{
text-transform: capitalize;
}
.search-btn{
width: 40px;
font-size: 1.1rem;
color: var(--dark);
border: none;
background: transparent;
outline: 0;
cursor: pointer;
}
/* design */
.design{
padding: 4.5rem 0;
}
.title{
text-align: center;
padding: 1rem 0;
}
.title h2{
font-family: var(--Playfair);
font-size: 2.4rem;
}
.title p{
text-transform: uppercase;
padding: 0.6rem 0;
}
.design-content{
margin: 2rem 0;
}
.design-item{
cursor: pointer;
margin: 1.5rem 0;
}
.design-img{
position: relative;
overflow: hidden;
}
.design-img::after{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.design-img img{
transition: all 0.5s ease;
}
.design-item:hover img{
transform: scale(1.2);
}
.design-img span:first-of-type{
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
background: var(--exDark);
color: #fff;
padding: 0.25rem 1rem;
}
.design-img span:last-of-type{
position: absolute;
z-index: 1;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.design-title{
padding: 1rem;
font-size: 1.2rem;
text-align: center;
width: 70%;
margin: 0 auto;
}
.design-title a{
color: var(--dark);
text-decoration: none;
text-transform: capitalize;
font-family: var(--Playfair);
}
/* blog */
.blog{
background: #f9f9f9;
padding: 4.5rem 0;
}
.blog-content{
margin: 2rem 0;
}
.blog-img{
position: relative;
}
.blog-img span{
position: absolute;
bottom: 10px;
right: 10px;
background: var(--exDark);
color: #fff;
font-size: 1.4rem;
padding: 0.3rem 0.6rem;
}
.blog-text{
margin: 2.2rem 0;
padding: 0 1rem;
}
.blog-text span{
font-weight: 300;
display: block;
padding-bottom: 0.5rem;
}
.blog-text h2{
font-family: var(--Playfair);
padding: 1rem 0;
font-size: 1.65rem;
font-weight: 500;
}
.blog-text p{
font-weight: 300;
font-size: 1.1rem;
opacity: 0.9;
padding-bottom: 1.2rem;
}
.blog-text a{
font-family: var(--Roboto);
font-size: 1.1rem;
text-decoration: none;
color: var(--dark);
display: inline-block;
background: var(--dark);
color: #fff;
padding: 0.55rem 1.2rem;
transition: all 0.5s ease;
}
.blog-text a:hover{
background: var(--exDark);
}
/* about */
.about{
padding: 4.5rem 0;
}
.about-text{
margin: 2rem 0;
}
.about-text > p{
font-size: 1.1rem;
padding: 0.6rem 0;
opacity: 0.8;
}
/* Media Queries */
@media screen and (min-width: 540px){
.navbar-nav a{
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.banner-title{
font-size: 5rem;
}
.banner form{
margin-top: 1.4rem;
width: 80%;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 768px){
.navbar .container{
display: flex;
align-items: center;
justify-content: space-between;
}
.search-input{
padding: 0.8rem 0;
}
.design-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.design-item{
margin: 0;
}
.blog-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media screen and (min-width: 992px){
.blog-content{
grid-template-columns: repeat(3, 1fr);
}
.about-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 3rem;
align-items: center;
}
}
@media screen and (min-width: 1200px){
.design-content{
grid-template-columns: repeat(3, 1fr);
}
}
Youtube link: https://youtu.be/tRH_Hew_fvQ
Comments
Post a Comment