techrunner/Neocities
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created Movie review Page

Browse Source
This commit is contained in:
TechRunner
2025-10-16 18:34:17 -05:00
parent 81e82df35d
commit 206fcf0ca9
2 changed files with 154 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
pages/movie_reviews.html
View File

@ -4,20 +4,76 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/reviews.css">
<title>Movie Reviews</title>
</head>
<body>
<div id="MainView">
<h1>Movie Reviews by the Void System</h1>
<h1>Movie Reviews <br>by the <br>Void System</h1>
<div class="reviewList">
<ul>
<li class="reviewItem">
<img src="/media/placeholder.png" alt="">
<div class="reviewOveriew">
<div class="overviewHeader">
<h4>%TITLE%</h4>
<img src="" alt="">
<h4 class="reviewTitle">%TITLE%</h4>
<h5 class="reviewRating">Rating</h5>
</div>
<p></p>
<div class="overviewContent">
<p class="reviewText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut reiciendis exercitationem harum optio ab velit! Sapiente, ducimus atque. Ab?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quidem omnis atque ratione facere explicabo, nihil quis nostrum laudantium officiis voluptatum mollitia esse distinctio, iste laborum quos ab nisi molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa quos eveniet inventore alias aspernatur ducimus facere placeat ea iusto?</p>
</div>
</div>
</li>
<li class="reviewItem">
<img src="/media/placeholder.png" alt="">
<div class="reviewOveriew">
<div class="overviewHeader">
<h4 class="reviewTitle">%TITLE%</h4>
<h5 class="reviewRating">Rating</h5>
</div>
<div class="overviewContent">
<p class="reviewText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut reiciendis exercitationem harum optio ab velit! Sapiente, ducimus atque. Ab?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quidem omnis atque ratione facere explicabo, nihil quis nostrum laudantium officiis voluptatum mollitia esse distinctio, iste laborum quos ab nisi molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa quos eveniet inventore alias aspernatur ducimus facere placeat ea iusto?</p>
</div>
</div>
</li>
<li class="reviewItem">
<img src="/media/placeholder.png" alt="">
<div class="reviewOveriew">
<div class="overviewHeader">
<h4 class="reviewTitle">%TITLE%</h4>
<h5 class="reviewRating">Rating</h5>
</div>
<div class="overviewContent">
<p class="reviewText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut reiciendis exercitationem harum optio ab velit! Sapiente, ducimus atque. Ab?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quidem omnis atque ratione facere explicabo, nihil quis nostrum laudantium officiis voluptatum mollitia esse distinctio, iste laborum quos ab nisi molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa quos eveniet inventore alias aspernatur ducimus facere placeat ea iusto?</p>
</div>
</div>
</li>
<li class="reviewItem">
<img src="/media/placeholder.png" alt="">
<div class="reviewOveriew">
<div class="overviewHeader">
<h4 class="reviewTitle">%TITLE%</h4>
<h5 class="reviewRating">Rating</h5>
</div>
<div class="overviewContent">
<p class="reviewText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut reiciendis exercitationem harum optio ab velit! Sapiente, ducimus atque. Ab?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quidem omnis atque ratione facere explicabo, nihil quis nostrum laudantium officiis voluptatum mollitia esse distinctio, iste laborum quos ab nisi molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa quos eveniet inventore alias aspernatur ducimus facere placeat ea iusto?</p>
</div>
</div>
</li>
<li class="reviewItem">
<img src="/media/placeholder.png" alt="">
<div class="reviewOveriew">
<div class="overviewHeader">
<h4 class="reviewTitle">%TITLE%</h4>
<h5 class="reviewRating">Rating</h5>
</div>
<div class="overviewContent">
<p class="reviewText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt aut reiciendis exercitationem harum optio ab velit! Sapiente, ducimus atque. Ab?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quidem omnis atque ratione facere explicabo, nihil quis nostrum laudantium officiis voluptatum mollitia esse distinctio, iste laborum quos ab nisi molestiae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa quos eveniet inventore alias aspernatur ducimus facere placeat ea iusto?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

90
stylesheets/reviews.css Normal file
View File

@ -0,0 +1,90 @@
body{
background-image: url("/media/Art/EmptySpace.png");
color: #12aaaa;
padding-top: 4vh;
display: flex;
flex-direction: column;
align-items: center;
}
#MainView{
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(174, 134, 214, 0.5);
border-radius: 100px;
overflow: hidden;
height: 90vh;
padding: 0 50px;
}
.reviewList{
overflow-y: scroll;
word-wrap: normal;
background-color: #00000055;
width: 90vw;
height: 70vh;
border-radius: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
li.reviewItem{
display: flex;
flex-direction: row;
border-radius: 40px;
background-color: #77777722;
height: 200px;
margin: 10px;
}
.reviewItem img{
border-radius: 40px;
padding: 5px;
width: 100px;
height: 200px;
}
ul{
height: 100%;
padding: 0;
margin: 0;
overflow: scroll;
}
h1{
width: 75%;
text-align: center;
margin: 0;
}
.overviewHeader{
display: flex;
flex-direction: row;
align-items: center;
}
.reviewTitle{
margin-right: 20px;
color: rgb(230, 61, 61)
}
.reviewRating{
color: rgba(245, 241, 26, 0.959)
}
.overviewContent{
overflow: scroll;
height: 125px;
}
@media(min-width: 900px){
#MainView{
width:65vw;
}
.reviewList{
width: 67vw;
}
}