[Landing] Markup and style on mobile responsive pages

landing-page/css/src/index.css

@@ -39,7 +39,6 @@
   flex-direction: column;
   padding-top: 56px;
   padding-bottom: 59px;
-  /*background-image: linear-gradient(to bottom, #264e9c 20%, #b3d5f3 58%, rgba(255, 255, 255, 0) 100%);*/
   background-image: linear-gradient(to bottom, #264e9c 0%, #b3d5f3 54%, rgba(255, 255, 255, 0) 100%);
   background-color: #eceef3;
 }
@@ -83,10 +82,13 @@
   height: auto;
   margin-right: 10px;
 }
+#viewBox .img_wrap {
+  text-align: center;
+}
 #viewBox .img_main {
+  margin: 16px auto auto;
   width: 772px;
   height: auto;
-  margin-top: 16px;
 }
 
 /* featureBox*/
@@ -230,8 +232,8 @@
   font-weight: bold;
 }
 
-/* ========================= tablet ========================= */
+/* ========================= labtop ========================= */
-@media (min-width: 1024px) and (max-width: 1439px) {
+@media (min-width: 993px) and (max-width: 1200px) {
   /* #viewBox */
   #viewBox .img_main {
     width: 697px;
@@ -254,6 +256,126 @@
   }
 }
 
-/* ========================= mobile ========================= */
+/* ========================= handheld (mobile + tablet) ========================= */
-@media (min-width: 320px) and (max-width: 1023px) {
+@media (min-width: 320px) and (max-width: 992px) {
+  /* headBox */
+  #headBox {
+    height: 50px;
+  }
+  .navbar .container-fluid {
+    padding-left: 16px;
+    padding-right: 18px;
+  }
+  .navbar .github_img {
+    width: 32px;
+  }
+
+  /* viewBox */
+  #viewBox .container-fluid {
+    padding: 40px 23px 44px;
+  }
+  #viewBox h2 {
+    font-size: 34px;
+  }
+  #viewBox p {
+    font-size: 14px;
+  }
+  #viewBox .btn_area {
+    margin-top: 26px;
+    column-gap: 8px;
+  }
+  #viewBox .btn_area a {
+    width: 120px;
+    height: 40px;
+    font-size: 14px;
+  }
+  #viewBox .btn_area img {
+    width: 22px;
+    margin-right: 8px;
+  }
+  #viewBox .img_main {
+    width: 100%;
+    margin-top: 30px;
+  }
+
+  /* #featureBox */
+  #featureBox h2 {
+    font-size: 26px;
+  }
+  #featureBox .typo {
+    font-size: 14px;
+  }
+
+  /* #detailBox */
+  #detailBox {
+    padding: 60px 20px 62px;
+    text-align: center;
+  }
+  #detailBox ul {
+    row-gap: 60px;
+  }
+  #detailBox p {
+    margin-top: 12px;
+    margin-bottom: 16px;
+  }
+  #detailBox img {
+    width: 100%;
+  }
+}
+
+/* bannerBox */
+#bannerBox {
+  padding: 55px 16px;
+}
+#bannerBox ul {
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* ========================= mobile ========================= */
+@media (min-width: 320px) and (max-width: 768px) {
+  /* #featureBox */
+  #featureBox {
+    padding-bottom: 60px;
+  }
+  .feature_area {
+    max-width: 500px;
+    row-gap: 20px;
+    column-gap: 20px;
+  }
+  #featureBox .title_area {
+    padding: 0 45px 0;
+  }
+  #featureBox .content_area {
+    padding: 0 20px 0;
+  }
+  .feature_area li {
+    width: 150px;
+    height: 164px;
+    padding: 20px 0 21px;
+  }
+  .feature_area h3 {
+    font-size: 15px;
+    line-height: 1.33;
+  }
+  .feature_area img {
+    width: 118px;
+  }
+
+  /* #detailBox */
+  #detailBox h3 {
+    font-size: 26px;
+  }
+  #detailBox p {
+    font-size: 14px;
+  }
+
+  /* footBox */
+  #footBox .container-fluid {
+    padding: 30px 23px 50px 50px;
+  }
+  #footBox .copyright {
+    font-size: 12px;
+    color: #4a4a4a;
+  }
 }

landing-page/index.html

@@ -56,11 +56,10 @@
         <nav class="navbar">
           <div class="container-fluid">
             <a href="./">
-              <h1 class="visually-hidden">Vanilla Meta</h1>
+              <h1 class="visually-hidden">VanillaMeta</h1>
               <img class="logo_img" src="./img/vanilla-meta-logo.png" alt="Vanilla Meta Logo" />
             </a>
             <a href="https://github.com/vanillabrain/vanillameta" target="_blank">
-              <h2 class="visually-hidden">Github Link</h2>
               <img class="github_img" src="./img/ic-github.svg" alt="Github Logo" />
             </a>
           </div>
@@ -83,14 +82,14 @@
                 <img src="./img/ic-github-white.svg" alt="Github button icon" />소스 보기
               </a>
             </div>
-            <div>
+            <div class="img_wrap">
               <img class="img_main" src="./img/main-visual.png" alt="" />
             </div>
           </div>
         </section>
 
         <section id="featureBox">
-          <div class="container-fluid">
+          <div class="container-fluid title_area">
             <h2>Why VanillaMeta?</h2>
             <p class="typo">
               바닐라메타는 최신 데이터 탐색적 분석 및 데이터 시각화 솔루션입니다.<br />
@@ -98,52 +97,69 @@
               <span>이러한 바닐라메타는 Github에서 Open Sorce로 제공 받아 사용하실 수 있습니다.</span>
             </p>
           </div>
-          <div class="container-fluid">
+          <div class="container-fluid content_area">
-            <h2 class="visually-hidden">Feature of VanillaMeta</h2>
             <ul class="row feature_area">
               <li class="col-lg-6 col-xl-4">
-                <h3>코딩없이 차트 위젯 제작</h3>
+                <h3>
-                <p>
+                  코딩없이 차트<br class="d-block d-md-none" />
+                  위젯 제작
+                </h3>
+                <p class="d-none d-md-block">
                   연결된 데이터베이스를 지원하는 차트 중 선택 후<br />
                   설정화면을 통해 코딩없이 위젯 제작이 가능합니다.
                 </p>
                 <img src="./img/thumb-01.png" alt="Feature image thumbnail 01" />
               </li>
               <li class="col-lg-6 col-xl-4">
-                <h3>50개 이상의 차트 지원</h3>
+                <h3>
-                <p>
+                  50개 이상의<br class="d-block d-md-none" />
+                  차트 지원
+                </h3>
+                <p class="d-none d-md-block">
                   50개 이상의 다양한 차트 지원으로<br />
                   최적의 분석을 위한 차트 활용이 가능합니다.
                 </p>
                 <img src="./img/thumb-02.png" alt="Feature image thumbnail 02" />
               </li>
               <li class="col-lg-6 col-xl-4">
-                <h3>사용자 맞춤형 대시보드 편집 및 공유</h3>
+                <h3>
-                <p>
+                  사용자 맞춤형<br class="d-block d-md-none" />
+                  대시보드 편집 및 공유
+                </h3>
+                <p class="d-none d-md-block">
                   사용자가 설정한 위젯을 자유로운<br />
                   레이아웃으로 편집 및 공유가 가능합니다.
                 </p>
                 <img src="./img/thumb-03.png" alt="Feature image thumbnail 03" />
               </li>
               <li class="col-lg-6 col-xl-4">
-                <h3>대시보드 템플릿 디자인 추천</h3>
+                <h3>
-                <p>
+                  대시보드 템플릿<br class="d-block d-md-none" />
+                  디자인 추천
+                </h3>
+                <p class="d-none d-md-block">
                   대시보드 템플릿 디자인 추천을 통해<br />
                   빠르고 편리하게 편집이 가능합니다.
                 </p>
                 <img src="./img/thumb-04.png" alt="Feature image thumbnail 04" />
               </li>
               <li class="col-lg-6 col-xl-4">
-                <h3>SQL 쿼리 편집기 & 데이터 미리보기 제공</h3>
+                <h3>
-                <p>
+                  SQL 쿼리 편집기 &<br class="d-block d-md-none" />
+                  데이터 미리보기 제공
+                </h3>
+                <p class="d-none d-md-block">
                   SQL 쿼리 편집기를 통해 빠르게 데이터를 편집하고<br />
                   미리보기를 통해 데이터를 확인할 수 있습니다.
                 </p>
                 <img src="./img/thumb-05.png" alt="Feature image thumbnail 05" />
               </li>
               <li class="col-lg-6 col-xl-4">
-                <h3>다양한 SQL 데이터베이스 즉시 지원</h3>
+                <h3>
-                <p>
+                  다양한 SQL<br class="d-block d-md-none" />
+                  데이터베이스 즉시 지원
+                </h3>
+                <p class="d-none d-md-block">
                   다양한 SQL 데이터베이스 지원 기능을 통해<br />
                   빠르게 데이터를 연결할 수 있습니다.
                 </p>
@@ -155,10 +171,10 @@
 
         <section id="detailBox">
           <div class="container-fluid">
-            <h2 class="visually-hidden">Feature detail</h2>
+            <h2 class="visually-hidden">VanillaMeta feature detail</h2>
             <ul>
               <li class="row">
-                <div class="col-md-12 col-lg-auto text-md-left">
+                <div class="col-md-12 col-lg-auto">
                   <h3>대시보드 분석 시각화</h3>
                   <p>
                     사용자 맞춤형 대시보드 편집 및 공유와<br />
@@ -168,7 +184,7 @@
                 <img src="./img/img-01.png" alt="Feature detail img thumbnail 01" />
               </li>
               <li class="row">
-                <div class="col-md-12 col-lg-auto text-md-left">
+                <div class="col-md-12 col-lg-auto">
                   <h3>시각화 위젯 제작</h3>
                   <p>
                     코딩없이 차트 위젯 제작 가능하며<br />
@@ -178,13 +194,14 @@
                 <img src="./img/img-02.png" alt="Feature detail img thumbnail 01" />
               </li>
               <li class="row">
-                <div class="col-md-12 col-lg-auto text-md-left">
+                <div class="col-md-12 col-lg-auto">
                   <h3>
-                    최신 데이터베이스와<br />
+                    최신 데이터베이스와<br class="d-none d-lg-block" />
                     통합
                   </h3>
                   <p>
-                    고급 SQL 쿼리 편집기 및 데이터 미리보기<br />가 가능하며, 다양한 SQL 데이터베이스에 <br />대해 즉시
+                    고급 SQL 쿼리 편집기 및 데이터 미리보기<br class="d-none d-lg-block" />가 가능하며,
+                    <br class="d-block d-lg-none" />다양한 SQL 데이터베이스에 <br class="d-none d-lg-block" />대해 즉시
                     지원합니다.
                   </p>
                 </div>
@@ -196,7 +213,7 @@
 
         <section id="bannerBox">
           <div class="container-fluid">
-            <h2>지원가능 데이터베이스</h2>
+            <h2><span class="visually-hidden">VanillaMeta </span>지원가능 데이터베이스</h2>
             <ul class="row">
               <li><img src="./img/logo-mysql.png" alt="MySQL banner image" /></li>
               <li><img src="./img/logo-maria-db.png" alt="MariaDB banner image" /></li>
@@ -215,13 +232,17 @@
 
       <footer id="footBox">
         <div class="container-fluid">
+          <h2 class="visually-hidden">VanillaMeta information</h2>
           <div class="footer_logo">
             <a href="./">
               <img class="logo_img" src="./img/vanilla-meta-logo.png" alt="Vanilla Meta" />
             </a>
           </div>
           <div class="copyright">
-            <p>Copyright <span>©VanillaBrain</span> Inc. All Rights Reserved.</p>
+            <p>
+              Copyright <a href="https://vanillabrain.com" target="_blank"><span>©VanillaBrain Inc. </span></a
+              ><br class="d-block d-sm-none" />All Rights Reserved.
+            </p>
           </div>
         </div>
       </footer>