#35 해시태그

UTA-CONNECT · Jun 19, 2021 · 0918062 · 0918062
1 parent c53009d
commit 0918062
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 1 deletion.
diff --git a/public/assets/css/conne-top.css b/public/assets/css/conne-top.css
@@ -10,4 +10,111 @@
 
 #attack-on-conne-chan-container {
     pointer-events: none;
-}
+}
+
+.concept-title-section {
+    position: relative;
+}
+
+.concept-title-section-position {
+    position: absolute;
+    top: -92px;
+}
+
+.concept-title-section-position .rotate {
+    transform: rotate(7deg);
+}
+
+.concept-title-text {
+    letter-spacing: 7px;
+    font-size: 30px;
+    font-family: GmarketSans-Bold;
+    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(22deg, 0deg);
+    display: inline-block;font-style: italic;
+}
+
+.concept-title-text span {
+    color: #f0c520;
+}
+
+.concept-title-sub-text {
+    letter-spacing: 7px;
+    font-size: 30px;
+    font-family: GmarketSans-Bold;
+    transform: rotateY(-9deg);
+    transform: scale(1) rotate(0deg) translate(0px, 0px) skew(22deg, 0deg);
+    display: inline-block;
+    color: #f0c520;
+    font-style: italic;
+}
+
+@media (max-width: 576px) {
+    .concept-title-text {
+        letter-spacing: 1px;
+        font-size: 12px;
+    }
+    .concept-title-sub-text {
+        letter-spacing: 1px;
+        font-size: 12px;
+    }
+    .concept-title-section-position {
+        top: -32px;
+    }
+}
+@media (min-width: 576px) {
+    .concept-title-text {
+        letter-spacing: 1px;
+        font-size: 18px;
+    }
+    .concept-title-sub-text {
+        letter-spacing: 1px;
+        font-size: 18px;
+    }
+    .concept-title-section-position {
+        top: -32px;
+    }
+}
+@media (min-width: 768px) {
+    .concept-title-text {
+        letter-spacing: 3px;
+        font-size: 20px;
+    }
+    .concept-title-sub-text {
+        letter-spacing: 3px;
+        font-size: 20px;
+    }
+    .concept-title-section-position {
+        top: -32px;
+    }
+}
+@media (min-width: 992px) {
+    .concept-title-text {
+        letter-spacing: 6px;
+        font-size: 25px;
+    }
+    .concept-title-sub-text {
+        letter-spacing: 6px;
+        font-size: 25px;
+    }
+    .concept-title-section-position {
+        top: -62px;
+    }
+}
+@media (min-width: 1200px) {
+    .concept-title-text {
+        letter-spacing: 7px;
+        font-size: 30px;
+    }
+    .concept-title-sub-text {
+        letter-spacing: 7px;
+        font-size: 30px;
+    }
+    .concept-title-section-position {
+        top: -82px;
+    }
+}
+@media (min-width: 1400px) {
+    .concept-title-section-position {
+        top: -92px;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -54,6 +54,24 @@
                                 <img src="assets/img/title.png" class="title">
                             </div>
                         </div>
+                        <div class="concept-title-section">
+                            <div class="container concept-title-section-position">
+                                <div class="row">
+                                    <div class="col-12 col-lg-11 col-md-12 text-end rotate">
+                                        <span class="concept-title-text">#너와_내가_이어지는_<span>1st_LIVE</span></span>
+                                    </div>
+                                    <div class="col-lg-2 d-lg-none">
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-12 col-lg-11 col-md-12 text-end rotate">
+                                        <span class="concept-title-sub-text">#UTAITE_CONNECT</span>
+                                    </div>
+                                    <div class="col-lg-2 d-lg-none">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -76,6 +94,24 @@
                         <img src="assets/img/title.png" class="title">
                     </div>
                 </div>
+                <div class="concept-title-section">
+                    <div class="container concept-title-section-position">
+                        <div class="row">
+                            <div class="col-lg-10 col-md-11 text-end rotate">
+                                <span class="concept-title-text">#너와_내가_이어지는_<span>1st_LIVE</span></span>
+                            </div>
+                            <div class="col-lg-2 col-md-1">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-lg-10 col-md-11 text-end rotate">
+                                <span class="concept-title-sub-text">#UTAITE_CONNECT</span>
+                            </div>
+                            <div class="col-lg-2 col-md-1">
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <!-- Microphone img (only screen size) -->