#12 #UTA-6 행사 소개 보드 배치

UTA-CONNECT · Jun 2, 2021 · 504ec7f · 504ec7f
1 parent 944ce21
commit 504ec7f
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
@@ -14,6 +14,47 @@ body {
     /* background-size: contain, contain; */
 }
 
+div.block2 {
+    background-image: url('../img/block_2.png');
+    background-repeat: no-repeat;
+    background-position-x: center;
+}
+
+div.block2 img {
+    visibility: hidden;
+    width: 100%;
+    height: fit-content;
+}
+
+div.block2-container {
+    position: relative;
+}
+
+div.block2-container div.block2-body-container {
+    position: absolute;
+    z-index: 20;
+    top: 0;
+}
+
+div.block2-container div.block2-body-container .gap-row {
+    width: 80%;
+    margin: 0 auto;
+}
+
+div.block2-title {
+    height: 150px;
+}
+
+div.block2-title div {
+    font-size: 42px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.2;
+    letter-spacing: normal;
+    color: #333333;
+}
+
 /* div.circle-pattern {
     position: absolute;
     width: 100%;
@@ -52,6 +93,16 @@ div.title-ribbon img{
     div.title-ribbon img{
         width: 100vw;
     }
+
+    div.block2-container div.block2-body-container .gap-row {
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    div.block2-title div {
+        font-size: 36px;
+        line-height: 1;
+    }
 }
 div.title-ribbon div {
     padding: 0;

diff --git a/public/index.html b/public/index.html
@@ -68,6 +68,38 @@
         <div class="col-3">3</div>
       </div>
     </div>
+    <div class="container-fluid block2 d-xl-none ">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-12 block2-container">
+            <img src="assets/img/block_2.png"/>
+            <div class="container-fluid justify-content-center block2-body-container">
+              <div class="row gap-row">
+                <div class="col-12 block2-title d-flex align-items-center justify-content-center">
+                  <div>행사 소개</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container block2 d-none d-xl-block ">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 block2-container">
+            <img src="assets/img/block_2.png"/>
+            <div class="container justify-content-center block2-body-container">
+              <div class="row gap-row">
+                <div class="col-12 block2-title d-flex align-items-center justify-content-center">
+                  <div>행사 소개</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
   </body>
 </html>