Skip to content

Commit

Permalink
added categories section on home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kanishak-xd
Kanishak-xd committed Nov 6, 2024
1 parent 6ffd917 commit aff8e63
Show file tree
Hide file tree
Showing 9 changed files with 323 additions and 14 deletions.
52 changes: 52 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,58 @@ <h1>RS. 29,999.00</h1>
<!-- SECTION 2 -->
<section class="sections" id="section2">

<div class="categoLine"> <!--Categories heading and line -->
<h1>CATEGORIES</h1>
<img src="resources/diamondLine.png">
</div>
<div class="categBox" id="categBox1"> <!--Outer Catego Box-->
<div class="categBox" id="categBox2"> <!--Left-->
<div class="categBox" id="categBox4"> <!--Rachu Outer Box-->
<div class="categBox" id="categBox6"> <!--Rachu White Box-->
<h1>RACHU</h1>
<div class="categBox" id="categBox7"> <!--Black Box-->
<img src="resources/rightArrow-white.png">
</div>
</div>
</div>
<div class="categBox" id="categBox5"> <!--Tego Outer Box-->
<div class="categBox" id="categBox8"> <!--Tego White Box-->
<h1>TEGO</h1>
<div class="categBox" id="categBox9"> <!--Black Box-->
<img src="resources/rightArrow-white.png">
</div>
</div>
</div>
</div>
<div class="categBox" id="categBox3"> <!--Right-->
<div class="categBox" id="categBox10"> <!--Upper-->
<div class="categBox" id="categBox12"> <!--Wonju Outer Box-->
<div class="categBox" id="categBox14"> <!--Wonju White Box-->
<h1>WONJU</h1>
<div class="categBox" id="categBox15"> <!--Black Box-->
<img src="resources/rightArrow-white.png">
</div>
</div>
</div>
<div class="categBox" id="categBox13"> <!--Kira Outer Box-->
<div class="categBox" id="categBox16"> <!--Kira White Box-->
<h1>KIRA</h1>
<div class="categBox" id="categBox17"> <!--Black Box-->
<img src="resources/rightArrow-white.png">
</div>
</div>
</div>
</div>
<div class="categBox" id="categBox11"> <!--Lower Accessories Outer Box-->
<div class="categBox" id="categBox18"> <!--Accessories White Box-->
<h1>ACCESSORIES</h1>
<div class="categBox" id="categBox19"> <!--Black Box-->
<img src="resources/rightArrow-white.png">
</div>
</div>
</div>
</div>
</div>

</section>

Expand Down
Binary file added resources/AquamarineKira.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/accessoriesImg.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/diamondLine.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/kiraOrange.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/kiraPurple.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/twoKira.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.
25 changes: 25 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// document.addEventListener('DOMContentLoaded', () => {
// const sections = document.querySelectorAll('.sections');
// let currentSection = 0;
// let isScrolling = false;
// window.addEventListener('wheel', (event) => {
// if (isScrolling) return;
// isScrolling = true;
// if (event.deltaY > 0) {
// currentSection = Math.min(currentSection + 1, sections.length - 1);
// } else {
// if (currentSection === 1) {
// currentSection = 0;
// window.scrollTo({ top: 0, behavior: 'smooth' });
// } else {
// currentSection = Math.max(currentSection - 1, 0);
// }
// }
// if (currentSection !== 0) {
// sections[currentSection].scrollIntoView({ behavior: 'smooth' });
// }
// setTimeout(() => {
// isScrolling = false;
// }, 600);
// });
// });
260 changes: 246 additions & 14 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
body, html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
padding: 0px;
Expand All @@ -6,7 +9,7 @@
-webkit-font-smoothing: antialiased;
}

/* NAVIGATION BAR --------- */
/* NAVIGATION BAR --------------- */

nav {
color: black;
Expand Down Expand Up @@ -74,7 +77,7 @@ ul li img {
width: 40px;
}

/* CATEGORY STRIP --------- */
/* CATEGORY STRIP -------------- */

.categories {
display: flex;
Expand Down Expand Up @@ -109,10 +112,13 @@ ul li img {
transform: translateY(-3px);
}

/* ALL SECTIONS ---------------- */

.sections {
height: 100vh;
}
/* HERO SECTION---------------- */
/* HERO SECTION ---------------- */

#section1 {
height: 84vh;
/* background-color: #CB9DF0; */
Expand Down Expand Up @@ -235,22 +241,248 @@ ul li img {
width: 50px;
}

/* CATEGORIES SECTION---------------- */

#section2 {
/* background-color: #F0C1E1; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.categoLine {
/* background-color: #FFF9BF; */
height: 20%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 5%;
}
.categoLine h1 {
font-size: 350%;
font-weight: 500;
padding-left: 4.5%;
/* padding-top: 5%; */
}
.categoLine img {
/* padding-top: 5%; */
padding-left: 8%;
}

/* ALL CATEGBOXES------------------- */

.categBox {
display: flex;
transition: background-color 0.3s;
}










#section2 {
background-color: #F0C1E1;
#categBox1 { /* Outer Catego Box */
height: 80%;
width: 90%;
/* background-color: aquamarine; */
flex-direction: row;
gap: 1%;
}
#categBox2 { /* Left */
height: 96%;
width: 45%;
/* background-color: #CDC1FF; */
flex-direction: row;
gap: 2.5%;
}
#categBox4 { /* Rachu Outer Box */
height: 100%;
width: 49%;
background-image: url("resources/kiraOrange.png");
background-size: cover;
justify-content: center;
border-radius: 25px;
border:#000000 5px solid;
}
#categBox6 { /* Rachu Box */
height: 15%;
width: 94%;
margin-top: 142%;
background-color: #EDEDED;
flex-direction: row;
align-items: center;
border-radius: 25px;
}
#categBox6 h1 {
font-size: 270%;
margin-left: 5%;
font-weight: 600;
}
#categBox7 { /* Black Box */
height: 80%;
width: 25%;
margin-left: 22%;
background-color: #000000;
justify-content: center;
align-items: center;
border-radius: 15px;
}
#categBox5 { /* Tego Outer Box */
height: 100%;
width: 49%;
background-image: url("resources/kiraPurple.png");
background-size: cover;
justify-content: center;
border-radius: 25px;
border:#000000 5px solid;
}
#categBox8 { /* Tego Box */
height: 15%;
width: 94%;
margin-top: 142%;
background-color: #EDEDED;
flex-direction: row;
align-items: center;
border-radius: 25px;
}
#categBox8 h1 {
font-size: 270%;
margin-left: 5%;
font-weight: 600;
}
#categBox9 { /* Black Box */
height: 80%;
width: 25%;
margin-left: 32%;
background-color: #000000;
justify-content: center;
align-items: center;
border-radius: 15px;
}
#categBox3 { /* Right */
height: 96%;
width: 54%;
/* background-color: #2b00d7; */
flex-direction: column;
}
#categBox10 { /* Upper */
height: 49%;
width: 100%;
/* background-color:#CDC1FF; */
flex-direction: row;
}
#categBox12 { /* Wonju Outer Box */
height: 100%;
width: 49%;
background-image: url("resources/twoKira.png");
background-size: cover;
border: #000000 5px solid;
border-radius: 25px;
justify-content: center;
}
#categBox14 { /* Wonju Box */
height: 25%;
width: 94%;
margin-top: 49%;
background-color: #EDEDED;
flex-direction: row;
align-items: center;
border-radius: 10px;
}
#categBox14 h1 {
font-size: 270%;
margin-left: 5%;
font-weight: 600;
}
#categBox15 { /* Black Box */
height: 80%;
width: 20%;
margin-left: 33%;
background-color: #000000;
justify-content: center;
align-items: center;
border-radius: 15px;
}
#categBox15 img {
height: 70px;
width: 70px;
}
#categBox13 { /* Kira Outer Box */
height: 100%;
width: 49%;
background-image: url("resources/AquamarineKira.png");
background-size: cover;
border: #000000 5px solid;
border-radius: 25px;
margin-left: 2%;
justify-content: center;
}
#categBox16 { /* Kira White Box */
height: 25%;
width: 94%;
margin-top: 49%;
background-color: #EDEDED;
flex-direction: row;
align-items: center;
border-radius: 10px;
}
#categBox16 h1 {
font-size: 270%;
margin-left: 5%;
font-weight: 600;
}
#categBox17 { /* Black Box */
height: 80%;
width: 20%;
margin-left: 48%;
background-color: #000000;
justify-content: center;
align-items: center;
border-radius: 15px;
}
#categBox17 img {
height: 70px;
width: 70px;
}
#categBox11 { /* Lower Accessories Outer Box */
height: 49%;
width: 100%;
background-image: url("resources/accessoriesImg.png");
background-size: cover;
border: #000000 5px solid;
border-radius: 25px;
/* margin-left: 2%; */
justify-content: center;
margin-top: 2%;
}
#categBox18 { /* Accessories White Box */
height: 25%;
width: 96%;
margin-top: 23%;
background-color: #EDEDED;
flex-direction: row;
align-items: center;
border-radius: 10px;
}
#categBox18 h1 {
font-size: 270%;
margin-left: 5%;
font-weight: 600;
}
#categBox19 { /* Black Box */
height: 80%;
width: 20%;
margin-left: 49%;
margin-right: 1%;
background-color: #000000;
justify-content: center;
align-items: center;
border-radius: 15px;
}
#categBox19 img {
height: 70px;
width: 70px;
}
#categBox4:hover, #categBox5:hover, #categBox12:hover, #categBox13:hover, #categBox11:hover {
transform: translateY(-3px);
}

#section3 {
background-color: #FDDBBB;
}
Expand Down

0 comments on commit aff8e63

Please sign in to comment.