updated home page with merch section

enjiawu · Nov 18, 2023 · 5dd1bba · 5dd1bba
1 parent 0ff80ea
commit 5dd1bba
Showing 5 changed files with 150 additions and 12 deletions.
diff --git a/css/style.css b/css/style.css
@@ -11,6 +11,10 @@ ul{
     padding: 0;
 }
 
+a{
+    text-decoration: none;
+}
+
 header{
     background-color: rgb(153, 176, 241);
     color: black;
@@ -37,7 +41,6 @@ nav{
 }
 
 a.logo{
-    text-decoration: none;
     color: black;
     font-size: 50px;
 }
@@ -91,14 +94,14 @@ a.logo{
 }
 
 main{
-    position: relative;
-    width: 100%;
-    height: 550px;
+    position: absolute;
     margin-top: 75px;
+    width: 100%;
 }
 
 .featured-video{
-    position: absolute;
+    width: 100%;
+    height: 550px;
 }
 
 .featured-video iframe{
@@ -107,14 +110,16 @@ main{
 }
 
 .listen-now-button{
-    margin: 15px 0;
+    position: relative;
+    margin: 15px auto;
     display: block;
     text-align: center;
     width: 90%;
     height: 45px;
     background-color: white;
     border: 3px solid rgb(66, 66, 66);
     border-radius: 5px;
+    transition: 0.15s;
 }
 
 .listen-now-button a{
@@ -123,4 +128,93 @@ main{
     font-family: Roboto Mono;
     font-size: 28px;
     letter-spacing: 30px;
-}
+}
+
+.listen-now-button:hover{
+    background-color: rgb(153, 176, 241);
+    border: 3px solid rgb(66, 66, 66);
+}
+
+.listen-now-button:active{
+    background-color: white;
+}
+
+.featured-merch{
+    margin-top: 85px;
+    background-color: rgb(153, 176, 241);
+    width: 100%;
+    height: 780px;
+}
+
+h1{
+    margin: 0px;
+    padding-top: 40px;
+    color: black;
+    font-family: Radio Canada;
+    text-align: center;
+    font-size: 80px;
+    letter-spacing: 50px;
+}
+
+.merch-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    margin: 0;
+    padding: 0px;
+}
+
+.merch-items img{
+    display: flex;
+    justify-content: flex-start;
+    width: 420px;
+    height: auto;
+}
+
+.merch-details{
+    margin: 0px;
+    padding: 0px;
+    font-size: 18px;
+    text-align: center;
+}
+
+
+.merch-details span{
+    font-size: 20px;
+    font-weight: bolder;
+}
+
+.more-merch-button{
+    margin: 75px auto;
+    display: block;
+    text-align: center;
+    width: 90%;
+    height: 45px;
+    background-color: rgb(153, 176, 241);
+    border: 3px solid rgb(66, 66, 66);
+    border-radius: 5px;
+    transition: 0.15s;
+}
+
+.more-merch-button a{
+    text-decoration: none;
+    color: black;
+    font-family: Roboto Mono;
+    font-size: 28px;
+    letter-spacing: 30px;
+}
+
+.more-merch-button:hover{
+    background-color: white;
+    border: 3px solid rgb(66, 66, 66);
+}
+
+.more-merch-button:active{
+    background-color: rgb(153, 176, 241);
+}
+
+.tour-title{
+    text-align: left;
+}
diff --git a/images/merch/laufeymerch-1.webp b/images/merch/laufeymerch-1.webp
diff --git a/images/merch/laufeymerch-2.webp b/images/merch/laufeymerch-2.webp
diff --git a/images/merch/laufeymerch-3.webp b/images/merch/laufeymerch-3.webp
diff --git a/index.html b/index.html
@@ -33,11 +33,55 @@
         </nav>
     </header>
 
-    <main class = "featured-video">
-        <iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=baWnsLjwTF1PQ3Kx&amp;autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-        <button class = "listen-now-button">
-            <a href = "https://laufey.ffm.to/bewitched" target="_blank">LISTEN NOW
-        </button>
+    <main>
+        <section class = "featured-video">
+            <iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=01YDSaUPALRLnz-w&amp;autoplay=1&mute=1&rel=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <button class = "listen-now-button">
+                <a href = "https://laufey.ffm.to/bewitched" target="_blank">LISTEN NOW</a>
+            </button>
+        </section>
+
+
+        <section class = "featured-merch">
+            <h1 class = "merch-title">MERCH</h1>
+            <div class = "merch-container">
+                <div class = "merch-items">
+                    <a href="#" target="_blank"><img src="/images/merch/laufeymerch-1.webp" alt="Bewitched Vinyl"></a>
+                    <p class = "merch-details">
+                        <span>Bewitched Vinyl</span><br>
+                        SGD$49.99
+                    </p>
+                </div>
+                <div class = "merch-items">
+                    <a href="#" target="_blank"><img src="/images/merch/laufeymerch-2.webp" alt="Bewitched Cassette"></a>
+                    <p class = "merch-details">
+                        <span>Bewitched Cassett</span><br>
+                        SGD$19.99
+                    </p>
+                </div>
+                <div class = "merch-items">
+                    <a href="#" target="_blank"><img src="/images/merch/laufeymerch-3.webp" alt="BewitchedSheet Music"></a>
+                    <p class = "merch-details">
+                        <span>Bewitched Sheet Music</span><br>
+                        SGD$9.99
+                    </p>
+                </div>
+            </div>
+            <button class = "more-merch-button">
+                <a href = "merch.html">MORE MERCH</a>
+            </button>
+
+        </section>
+
+        <section class = "featured-tour">
+            <h1 class = "tour-title">TOUR</h1>
+            <div class = "tour-container">
+
+                <div class = "tour-items">
+
+                </div>
+            </div>
+        </section>
     </main>