Skip to content

Commit

Permalink
Add Creation page & Fix resource
Browse files Browse the repository at this point in the history 
❌ responsive page
  • Loading branch information
@Rifzkhy
Rifzkhy committed Dec 11, 2023
1 parent 2a74139 commit f9be6ff
Show file tree
Hide file tree
Showing 15 changed files with 104 additions and 60 deletions.
85 changes: 62 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="resources/images/logo.png">
<title>Sampit Empire</title>

<link rel="stylesheet" href="resources/vendor/aos.css" />
Expand All @@ -13,10 +14,10 @@
<nav class="navbar fixed-top navbar-expand-lg" style="background-color: #212226">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="resources/images/logo.png" alt="Logo" width="64" height="64" />
<img src="resources/images/logo.png" alt="Logo" width="50" height="50" />
</a>
<button
class="navbar-toggler"
class="navbar-toggler border-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
Expand All @@ -30,19 +31,18 @@
<div class="navbar-nav abs">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Series</a>
<a class="nav-link" href="#">Creation</a>
<a class="nav-link" href="#">Community</a>
</div>
</div>
</div>
</nav>

<div class="bg-hero jarak">
<div class="hero">
<img src="resources/images/hero.png" width="1024" height="256" alt="hero" />
</div>
</div>

<div id="about" class="jarak">
<img src="resources/images/minecraft.png" class="hero-img" alt="hero" />
<div class="container">
<h4>Hello everyone</h4>
<p>
Expand All @@ -53,15 +53,15 @@ <h4>Hello everyone</h4>
</div>
</div>

<div id="series" class="jarak">
<div id="series" class="jarak series">
<div class="container">
<div class="d-flex justify-content-center">
<img src="resources/images/series.png" width="384" alt="series" />
<div class="d-flex justify-content-center p-5">
<img src="resources/images/series.png" width="264" alt="series" />
</div>
<div class="list-series d-flex justify-content-center flex-wrap gap-4">
<div class="box">
<div class="box-season">
<img src="resources/images/bookmark.png" width="98" alt="mark" />
<img src="https://placehold.co/749x1123" width="100%" alt="">
</div>
<div class="box-text">
<h4>[ SEASON 1 ]</h4>
Expand All @@ -70,7 +70,7 @@ <h4>[ SEASON 1 ]</h4>
</div>
<div class="box">
<div class="box-season">
<img src="resources/images/bookmark.png" width="98" alt="mark" />
<img src="https://placehold.co/749x1123" width="100%" alt="">
</div>
<div class="box-text">
<h4>[ SEASON 2 ]</h4>
Expand All @@ -79,7 +79,7 @@ <h4>[ SEASON 2 ]</h4>
</div>
<div class="box">
<div class="box-season">
<img src="resources/images/bookmark.png" width="98" alt="mark" />
<img src="https://placehold.co/749x1123" width="100%" alt="">
</div>
<div class="box-text">
<h4>[ SEASON 3 ]</h4>
Expand All @@ -88,29 +88,68 @@ <h4>[ SEASON 3 ]</h4>
</div>
</div>
</div>
<div class="d-flex justify-content-center gap-3 p-3">
<img class="button-left" src="resources/images/left_button.png" width="80" alt="left button" />
<img class="button-right" src="resources/images/right_button.png" width="80" alt="right button" />
</div>
</div>

<div id="creation" class="jarak creation">
<div class="container">
<div class="d-flex justify-content-center p-5">
<img src="resources/images/creation.png" width="384" alt="creation" />
</div>
<div class="list-series d-flex justify-content-center flex-wrap gap-4">
<div class="box">
<div class="box-display">
<img src="https://placehold.co/1920x1080" width="100%" alt="">
</div>
<div class="box-text">
<h4>Season 10 Cinematic</h4>
<p>Season 10 rendered with 8K resolution</p>
</div>
</div>
<div class="box">
<div class="box-display">
<img src="https://placehold.co/1920x1080" width="100%" alt="">
</div>
<div class="box-text">
<h4>MatusriAI on Season 7</h4>
<p>Lorem ipsum, dolor sit amet consectetur.</p>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center gap-3 p-3">
<img class="button-left" src="resources/images/left_button.png" width="80" alt="left button" />
<img class="button-right" src="resources/images/right_button.png" width="80" alt="right button" />
</div>
</div>

<div class="community">
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-center p-5">
<img src="resources/images/community.png" width="384" alt="series" />
</div>

<div class="container">
<div class="d-flex flex-wrap column-gap-4">
<div class="main-screen">
<div class="screen"></div>
<div class="d-flex justify-content-center">
<img src="resources/images/discord.png" width="128" alt="Discord" />
<img src="resources/images/wa.png" width="128" alt="Discord" />
<img src="resources/images/instagram.png" width="128" alt="Discord" />
<img src="resources/images/youtube.png" width="128" alt="Discord" />
<div class="row">
<div class="col main-screen">
<div class="box-display">
<img src="https://placehold.co/1920x1080" width="100%" alt="">
</div>
<div class="d-flex justify-content-evenly p-5">
<img src="resources/images/discord.png" width="64" alt="Discord" />
<img src="resources/images/whatsapp.png" width="64" alt="Whatsapp" />
<img src="resources/images/instagram.png" width="64" alt="Instagram" />
<img src="resources/images/youtube.png" width="64" alt="Youtube" />
</div>
</div>
<div class="skin">
<img src="resources/images/rif_skin.png" width="512" alt="RIF" />
<div class="col player">
<img src="resources/images/rif_skin.png" width="512" alt="RIF" />
</div>
</div>
</div>

</div>

<script src="resources/vendor/aos.js"></script>
Expand Down
Binary file removed resources/images/bookmark.png
View file
Binary file not shown.
Binary file modified resources/images/community.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/creation.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/discord.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed resources/images/hero.png
View file
Binary file not shown.
Binary file modified resources/images/instagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/left_button.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/minecraft.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/right_button.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/series.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed resources/images/wa.png
View file
Binary file not shown.
Binary file added resources/images/whatsapp.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/youtube.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 42 additions & 37 deletions resources/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ body {
margin-bottom: 140px;
}

/* PAGE ---> About */
.bg-hero {
height: 470px;
background-image: url("../resources/images/bg_hero.png");
Expand All @@ -21,37 +22,59 @@ body {
background-size: cover;
}

.hero {
display: flex;
justify-content: center;
position: relative;
top: 80%;
filter: drop-shadow(1px 1px 1px #000000);
.hero-img {
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
max-width: 90%;
height: auto;
}

.box-season {
width: 320px;
height: 440px;
/* PAGE ---> Series */
.series .box-season {
width: 20rem;
margin: 0 auto;
background-color: #f3f3f3;
outline-style: solid;
outline-color: red;
outline-width: 4px;
border-radius: 4px;
outline-color: #AF1514;
outline-width: 5px;
}
.series .box-season:hover {
outline-color: #E62B28;
}

.box-text {
margin-top: 20px;
margin-top: 40px;
text-align: center;
}

.screen {
width: 640px;
height: 400px;
background-color: #d9d9d9;
/* PAGE ---> Creation */
.creation .box-display {
width: 30rem;
margin: 0 auto;
background-color: #f3f3f3;
outline-style: solid;
outline-color: #ffffff;
outline-width: 4px;
outline-color: #AF1514;
outline-width: 5px;
}

.creation .box-display:hover {
outline-color: #E62B28;
}

/* PAGE ---> Community */

.community .box-display {
width: 30rem;
margin: 0 auto;
background-color: #f3f3f3;
outline-style: solid;
outline-color: #F6BF51;
outline-width: 5px;
}
.community .box-display:hover {
outline-color: #FAEA61;
}

@media (min-width: 960px) {
Expand All @@ -65,28 +88,10 @@ body {
}

@media (max-width: 960px) {
.hero {
top: 80%;
}
.hero img {
width: 80%;
height: 100%;
}
}

@media (max-width: 720px) {
.hero {
top: 90%;
}
.hero img {
width: 70%;
height: 100%;
}
}

@media (max-width: 540px) {
.hero img {
width: 100%;
height: 100%;
}
}

0 comments on commit f9be6ff

Please sign in to comment.