#12 하단 리본은 pc 화면만 보이도록하고 던진다 뿅

UTA-CONNECT · Jun 19, 2021 · 68029aa · 68029aa
1 parent aafe1e9
commit 68029aa
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/public/assets/css/ribbon.css b/public/assets/css/ribbon.css
@@ -40,6 +40,46 @@
     width: 100%;
 }
 
+.ribbon-container .ticketing-1 {
+    position: absolute;
+    left: -232px;
+    top: -596px;
+    z-index: 9;
+    pointer-events: none;
+}
+
+.ribbon-container .ticketing-1 img {
+    /* width: 100%; */
+    margin-left: 640px;
+}
+
+.ribbon-container .ticketing-2 {
+    position: absolute;
+    left: -40px;
+    top: -222px;
+    z-index: -9;
+    pointer-events: none;
+}
+
+.ribbon-container .ticketing-2 img {
+    /* width: 100%; */
+    margin-left: 640px;
+}
+
+.ribbon-container .ticketing-3 {
+    position: absolute;
+    left: -50px;
+    top: -80px;
+    z-index: -9;
+    pointer-events: none;
+}
+
+.ribbon-container .ticketing-3 img {
+    /* width: 100%; */
+    margin-left: 71px;
+    margin-top: 10px;
+}
+
 @media (max-width: 576px) {
     .ribbon-container .top img {
         visibility: hidden;
@@ -53,6 +93,20 @@
         visibility: hidden;
         display: none;
     }
+
+    .ribbon-container .ticketing-2 {
+        visibility: hidden;
+        display: none;
+    }
+
+    .ribbon-container .ticketing-1 {
+        visibility: hidden;
+        display: none;
+    }
+    .ribbon-container .ticketing-3 {
+        visibility: hidden;
+        display: none;
+    }
 }
 @media (min-width: 576px) {
     .ribbon-container .top {
@@ -81,6 +135,20 @@
         visibility: inherit;
         display: initial;
     }
+
+    .ribbon-container .ticketing-2 {
+        visibility: hidden;
+        display: none;
+    }
+
+    .ribbon-container .ticketing-1 {
+        visibility: hidden;
+        display: none;
+    }
+    .ribbon-container .ticketing-3 {
+        visibility: hidden;
+        display: none;
+    }
 }
 @media (min-width: 768px) {
     .ribbon-container .top {
@@ -103,6 +171,10 @@
         left: -90px;
         top: 520px;
     }
+    .ribbon-container .ticketing-3 {
+        visibility: hidden;
+        display: none;
+    }
 }
 @media (min-width: 992px) {
     .ribbon-container .top {
@@ -125,6 +197,12 @@
         left: -150px;
         top: 690px;
     }
+    .ribbon-container .ticketing-3 {
+        visibility: hidden;
+        display: none;
+        left: -157px;
+        top: -80px;
+    }
 }
 @media (min-width: 1200px) {
     .ribbon-container .top {
@@ -147,6 +225,10 @@
         left: -150px;
         top: 800px;
     }
+    .ribbon-container .ticketing-3 {
+        visibility: hidden;
+        display: none;
+    }
 }
 @media (min-width: 1400px) {
     .ribbon-container .top {
@@ -165,4 +247,19 @@
         left: -150px;
         top: 950px;
     }
+    .ribbon-container .ticketing-3 {
+        visibility: inherit;
+        display: initial;
+        left: -40px;
+        top: -63px;
+    }
+    .ribbon-container .ticketing-2 {
+        visibility: inherit;
+        display: initial;
+    }
+
+    .ribbon-container .ticketing-1 {
+        visibility: inherit;
+        display: initial;
+    }
 }
diff --git a/public/assets/img/ribbon_botton_1.png → public/assets/img/ribbon_bottom_1.png b/public/assets/img/ribbon_botton_1.png → public/assets/img/ribbon_bottom_1.png
diff --git a/public/index.html b/public/index.html
@@ -358,6 +358,42 @@ <h2 id="name" class="artist-title"></h2>
                         </div>
                     </div>
                 </div>
+                <!-- RIBBON BEHIND OF TICKETING GUIDE 1 -->
+                <div class="container ribbon-container">
+                    <div class="container ticketing-1">
+                        <div class="row">
+                            <div class="col-6">
+                            </div>
+                            <div class="col-6">
+                                <img src="assets/img/ribbon_bottom_1.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- RIBBON BEHIND OF TICKETING GUIDE 2 -->
+                <div class="container ribbon-container">
+                    <div class="container ticketing-2">
+                        <div class="row">
+                            <div class="col-6">
+                            </div>
+                            <div class="col-6">
+                                <img src="assets/img/ribbon_bottom_2.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- RIBBON BEHIND OF TICKETING GUIDE 3 -->
+                <div class="container ribbon-container">
+                    <div class="container ticketing-3">
+                        <div class="row">
+                            <div class="col-6">
+                            </div>
+                            <div class="col-6">
+                                <img src="assets/img/ribbon_bottom_3.png" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <!-- Ticketing Guide -->
                 <div class="container-fluid" style="margin-top: 60px;">
                     <div class="row">