mobile css조정, 요소 추가

public/css/app.css

@@ -36,10 +36,13 @@ a {
 }
 
 .black-submit-button {
+  font-size: 14px;
+  color: #fff;
   background: #212121;
-  border-radius: 10px;
-  color: white;
-  padding: 10px 20px;
+  border-radius: 100px;
+  padding: 11px 20px;
+  cursor: pointer;
+  display: inline-block;
 }
 
 .container {
@@ -51,7 +54,7 @@ a {
 }
 
 .solar-header {
-  padding-top: 35px;
+  padding-top: 20px;
 }
 
 .intro-image-box {
@@ -78,6 +81,7 @@ a {
 
 .ai-hr {
   margin: 60px 0px;
+  border-color: #E8E8E8;
 }
 
 .inquiry-message-box {
@@ -120,6 +124,45 @@ a {
   transition: all 0.7s ease-in-out;
 }
 
+.middle-btn-box {
+  margin-top: 40px;
+}
+
+.middle-btn {
+  padding: 10px 25px;
+  border: 1px solid #381E1F;
+  border-radius: 100px;
+  margin: 0px 8px;
+  display: inline-flex;
+}
+.middle-btn .middle-btn-logo {
+  width: 34px;
+}
+.middle-btn .btn-text-eng {
+  font-size: 13px;
+  line-height: 100%;
+}
+.middle-btn .btn-text-kor {
+  font-size: 19px;
+  line-height: 100%;
+  font-weight: 500;
+}
+
+.btn-pinterest {
+  border-color: #CE0F19 !important;
+  color: #CE0F19 !important;
+}
+
+.btn-talk {
+  border-color: #3CAE43 !important;
+  color: #3CAE43 !important;
+}
+
+.btn-kakao {
+  border-color: #381E1F !important;
+  color: #381E1F !important;
+}
+
 .portfolio-inner {
   opacity: 0;
   position: absolute;
@@ -149,7 +192,7 @@ a {
 .portfolio-inner .portfolio-box .portfolio-hr {
   width: 18px;
   height: 1px;
-  background: #999;
+  background: #E8E8E8;
   margin: 10px auto;
 }
 .portfolio-inner .portfolio-box .portfolio-desc {
@@ -204,3 +247,17 @@ footer {
 }
 
 /************ BreakPoints ************/
+@media (max-width: 768px) {
+  .ai-hr {
+    margin: 30px 0px;
+  }
+  .inquiry-message-box {
+    padding: 20px 0px 30px;
+  }
+  .main-inquiry {
+    padding-bottom: 20px;
+  }
+  footer {
+    padding-bottom: 40px;
+  }
+}

resources/sass/app.scss

@@ -14,7 +14,7 @@ $font-sizes: 52;
     max-width: 177px;
 }
 .solar-header{
-    padding-top:35px;
+    padding-top:20px;
 }
 
 .intro-image-box{
@@ -41,6 +41,7 @@ $font-sizes: 52;
 }
 .ai-hr{
     margin:60px 0px;
+    border-color:#E8E8E8;
 }
 .inquiry-message-box{
     padding:40px 0px 50px;
@@ -83,6 +84,41 @@ $font-sizes: 52;
         }
     }
 }
+.middle-btn-box{
+    margin-top:40px;
+}
+.middle-btn{
+    padding:10px 25px;
+    border:1px solid #381E1F;
+    border-radius: 100px;
+    margin:0px 8px;
+    display: inline-flex;
+
+    .middle-btn-logo{
+        width:34px;
+    }
+    .btn-text-eng{
+        font-size:13px;
+        line-height: 100%;
+    }
+    .btn-text-kor{
+        font-size:19px;
+        line-height: 100%;
+        font-weight: 500;
+    }
+}
+.btn-pinterest{
+    border-color:#CE0F19 !important;
+    color:#CE0F19 !important;
+}
+.btn-talk{
+    border-color:#3CAE43 !important;
+    color:#3CAE43 !important;
+}
+.btn-kakao{
+    border-color:#381E1F !important;
+    color:#381E1F !important;
+}
 
 .portfolio-inner{
     opacity: 0;
@@ -112,7 +148,7 @@ $font-sizes: 52;
         .portfolio-hr{
             width:18px;
             height:1px;
-            background:#999;
+            background:#E8E8E8;
             margin:10px auto;
         }
         .portfolio-desc{
@@ -171,7 +207,18 @@ footer{
 
 // Medium devices (tablets, 768px and up)
 @media (max-width: 768px) { 
-    
+    .ai-hr{
+        margin:30px 0px;
+    }
+    .inquiry-message-box{
+        padding:20px 0px 30px;
+    }
+    .main-inquiry{
+        padding-bottom:20px;
+    }
+    footer{
+        padding-bottom:40px;
+    }
  }
 
 // Large devices (desktops, 992px and up)

resources/sass/custom.scss

@@ -31,8 +31,11 @@ a {
     }
 }
 .black-submit-button{
-    background:#212121;
-    border-radius: 10px;
-    color:white;
-    padding:10px 20px;
+    font-size:14px;
+    color:#fff;
+    background: #212121;;
+    border-radius:100px;
+    padding : 11px 20px;
+    cursor:pointer;
+    display: inline-block;
 }

resources/views/layouts/header.blade.php

@@ -1,9 +1,10 @@
 <header>
     <div class="container">
+      <div class="row">
         <nav class="navbar navbar-expand-lg navbar-light">
             <div class="container-fluid solar-header">
               <a class="navbar-brand" href="#"><img src="/images/logo.png" alt="{{ $settings->site_name }}" class="logo"/></a>
-              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
@@ -11,15 +12,16 @@
                   <li class="nav-item">
                     <a class="nav-link" href="#portfolio">시공사진</a>
                   </li>
-                  <li class="nav-item ms-2">
+                  <li class="nav-item ms-0 ms-md-2">
                     <a class="nav-link" href="#introduce">소개</a>
                   </li>
-                  <li class="nav-item ms-2">
+                  <li class="nav-item ms-0 ms-md-2">
                     <a class="nav-link" href="#inquiry">문의</a>
                   </li>
                 </ul>
               </div>
             </div>
         </nav>
+      </div>
     </div>
 </header>

resources/views/pages/inquiry.blade.php

@@ -34,7 +34,7 @@
                             <textarea name="content" id="content" rows="8" class="k-input k-text-area autosize" required></textarea>
 
                             <div class="text-center inquery-submit">
-                                <button type="submit" class="more-button bg-white">등록하기 <i class="fa-solid fa-chevron-right"></i></button>
+                                <button type="submit" class="black-submit-button">등록하기 <i class="fa-solid fa-chevron-right"></i></button>
                             </div>
                         </form>
                     </div>

resources/views/pages/introduce.blade.php

@@ -12,6 +12,35 @@
                     디자인과 고품질로 고객님들에 만족도를 드리고 있습니다. <br>
                     빨리 시공하기보다는 한 땀 한 땀 장인정신으로 기본과 원칙을 준수하여 제대로 시공해 드립니다.
                 </div>
+                <div class="middle-btn-box">
+                    <a href="https://www.pinterest.co.kr/solartopia/" class="middle-btn btn-pinterest mb-2 mb-sm-0" target="_blank">
+                        <div class="middle-btn-logo">
+                            <img src="/images/icon/pinterest.png" class="img-fluid" alt="pinterest 포트폴리오"/>
+                        </div>
+                        <div class="text-start ms-2">
+                            <div class="btn-text-eng">PINTEREST</div>
+                            <div class="btn-text-kor">포트폴리오</div>
+                        </div>
+                    </a>
+                    <a href="https://talk.naver.com/ct/w4oxpk" class="middle-btn btn-talk mb-2 mb-sm-0" target="_blank">
+                        <div class="middle-btn-logo">
+                            <img src="/images/icon/talktalk.png" class="img-fluid" alt="talktalk 맞춤상담"/>
+                        </div>
+                        <div class="text-start ms-2">
+                            <div class="btn-text-eng">TALK TALK</div>
+                            <div class="btn-text-kor">1:1맞춤형 상담</div>
+                        </div>
+                    </a>
+                    <a href="http://pf.kakao.com/_FpRqs" class="middle-btn btn-kakao mb-2 mb-sm-0" target="_blank">
+                        <div class="middle-btn-logo">
+                            <img src="/images/icon/kakao.png" class="img-fluid" alt="kakao톡"/>
+                        </div>
+                        <div class="text-start ms-2">
+                            <div class="btn-text-eng">KAKAO TALK</div>
+                            <div class="btn-text-kor">쏠라아이</div>
+                        </div>
+                    </a>
+                </div>
             </div>
             <hr class="ai-hr">
         </div>