seulnan · seulnan · Sep 23, 2024 · Sep 25, 2024 · Sep 25, 2024 · Sep 25, 2024
diff --git a/layout/bg-pattern-bottom-desktop.svg b/layout/bg-pattern-bottom-desktop.svg
diff --git a/layout/bg-pattern-top-desktop.svg b/layout/bg-pattern-top-desktop.svg
diff --git a/layout/image/anne.jpg b/layout/image/anne.jpg
diff --git a/layout/image/colton.jpg b/layout/image/colton.jpg
diff --git a/layout/image/irene.jpg b/layout/image/irene.jpg
diff --git a/layout/image/star.png b/layout/image/star.png
diff --git a/layout/index.html b/layout/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>layout</title>
+    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="background">
+    <svg class="bg-pattern-top" xmlns="http://www.w3.org/2000/svg" width="584" height="362" viewBox="0 0 584 362" fill="none">
+        <path opacity="0.07" fill-rule="evenodd" clip-rule="evenodd" d="M584 0C584 0 523.967 124.2 356.859 157.064C189.751 189.928 253.009 223.076 170.91 288.86C88.8111 354.645 0 362 0 362V0H584Z" fill="url(#paint0_linear_0_65)"/>
+        <defs>
+            <linearGradient id="paint0_linear_0_65" x1="-281.401" y1="163.987" x2="4.4935" y2="654.58" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#8A4389" stop-opacity="0.01"/>
+                <stop offset="1" stop-color="#512051"/>
+            </linearGradient>
+        </defs>
+    </svg>
+
+    <svg class="bg-pattern-bottom" xmlns="http://www.w3.org/2000/svg" width="1085" height="673" viewBox="0 0 1085 673" fill="none">
+        <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M0 673C0 673 111.534 442.099 422 381C732.466 319.901 614.94 258.276 767.47 135.975C920 13.6747 1085 0 1085 0V673H0Z" fill="url(#paint0_linear_0_64)"/>
+        <defs>
+            <linearGradient id="paint0_linear_0_64" x1="1607.81" y1="368.129" x2="1076.12" y2="-543.631" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#8A4389" stop-opacity="0.01"/>
+                <stop offset="1" stop-color="#512051"/>
+            </linearGradient>
+        </defs>
+    </svg>
+  </div>
+
+    <div class="content">
+      <div class="top-section">
+        <div class="text-group">
+          <div class="main-heading">10,000+ of our users love our products.</div>
+          <div class="sub-heading">We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</div>
+        </div>
+
+        <div class="review-boxes">
+          <div class="box">
+            <img src="image/star.png" alt="Star" class="star">
+            <div class="rating-text">Rated 5 Stars in Reviews</div>
+          </div>
+          <div class="box">
+            <img src="image/star.png" alt="Star" class="star">
+            <div class="rating-text">Rated 5 Stars in Report Guru</div>
+          </div>
+          <div class="box">
+            <img src="image/star.png" alt="Star" class="star">
+            <div class="rating-text">Rated 5 Stars in BestTech</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="horizontal-boxes">
+        <div class="horizontal-box">
+          <div class="customer-header">
+            <img src="image/colton.jpg" alt="Colton" class="customer-img">
+            <div class="customer-info">
+              <div class="customer-name">Colton Smith</div>
+              <div class="customer-status">Verified Buyer</div>
+            </div>
+          </div>
+          <div class="review-text">“ We needed the same printed design as the one we had ordered a week prior. Not only did they find the original order, but we also received it in time. Excellent! ”</div>
+        </div>
+
+        <div class="horizontal-box">
+          <div class="customer-header">
+            <img src="image/irene.jpg" alt="Irene" class="customer-img">
+            <div class="customer-info">
+              <div class="customer-name">Irene Roberts</div>
+              <div class="customer-status">Verified Buyer</div>
+            </div>
+          </div>
+          <div class="review-text">“ Customer service is always excellent and very quick turn around. Completely delighted with the simplicity of the purchase and the speed of delivery.”</div>
+        </div>
+
+        <div class="horizontal-box">
+          <div class="customer-header">
+            <img src="image/anne.jpg" alt="Anne" class="customer-img">
+            <div class="customer-info">
+              <div class="customer-name">Anne Wallace</div>
+              <div class="customer-status">Verified Buyer</div>
+            </div>
+          </div>
+          <div class="review-text">“ Put an order with this company and can only praise them for the very high standard. Will definitely use them again and recommend them to everyone! ”</div>
+        </div>
+      </div> 
+
+    </div>
+  </body>
+</html>
diff --git a/layout/style.css b/layout/style.css
@@ -0,0 +1,213 @@
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'League Spartan', sans-serif;
+    position: relative;
+}
+
+.background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.bg-pattern-top {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.bg-pattern-bottom {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100vw; /* 화면 너비에 맞추기 */
+    height: auto; /* 비율 유지 */
+    max-width: none; /* 기본 제한 해제 */
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 70px;
+    padding-left: 165px;
+}
+
+.top-section {
+    padding-top: 118px;
+    display: flex;
+    align-items: flex-start;
+    gap: 150px;
+}
+
+.text-group {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 445px;
+}
+
+.main-heading {
+    font-size: 56px;
+    color: #512051;
+    font-weight: 700;
+}
+
+.sub-heading {
+    font-size: 19px;
+    color: #927B91;
+    line-height: 1.3;
+}
+
+.review-boxes {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.box {
+    background-color: #F7F2F7;
+    border-radius: 8px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    width: 445px;
+    height: 56px;
+}
+
+.star {
+    margin-right: 32px;
+}
+
+.rating-text {
+    font-size: 17px;
+    font-weight: 700;
+    color: #512051;
+}
+
+.horizontal-boxes {
+    display: flex;
+    gap: 30px;
+}
+
+.horizontal-box {
+    background-color: #512051;
+    border-radius: 8px;
+    padding: 32px;
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    color: white;
+}
+
+.customer-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.customer-img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 16px;
+}
+
+.customer-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.customer-name {
+    font-size: 17px;
+    font-weight: 700;
+}
+
+.customer-status {
+    color: #EE69A4;
+    font-size: 14px;
+}
+
+.review-text {
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+@media(max-width: 375px){
+    body {
+        width: 375px;
+        height: 1530px;
+    }
+    .bg-pattern-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .bg-pattern-bottom {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 100vw; /* 화면 너비에 맞추기 */
+        height: auto; /* 비율 유지 */
+        max-width: none; /* 기본 제한 해제 */
+    }
+    .content {
+        display: flex;
+        gap: 70px;
+        padding-left: 132px;
+    }
+    .top-section {
+        display: block;
+        flex-direction: column;
+        align-items:center;
+        gap: 0px;
+    }
+    .text-group {
+        display: flex;
+        flex-wrap: block;
+        gap: 17px;
+        width: 327px;
+    }
+    .main-heading {
+        font-size: 40px;
+        text-align: center;
+    }
+    .sub-heading {
+        font-size: 19px;
+        text-align: center;
+        margin-bottom: 39px;
+    }
+    .star {
+        align-items: center;
+        padding-bottom: 15px;
+        margin-left: 90px;
+    }
+    .box {
+        padding: 16px;
+        display: block;
+        align-items: center;
+        width: 327px;
+        height: 78px;
+    }
+    .rating-text {
+        font-size: 17px;
+        font-weight: 700;
+        color: #512051;
+        align-items: center;
+        text-align: center;
+    }
+    .horizontal-boxes {
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+    }
+}