Skip to content

Commit 6558b58

Browse files
dbstmdwdbstmdw
authored
[Fix]미디어쿼리 적용 및 코드리뷰반영
Fix : 미디어쿼리 적용 및 코드리뷰반영 flex를 이용한 코드로 수정, media query를 사용한 모바일 수준의 화면 조정, 배경 디자인대로 수정, css파일 구분.
1 parent b407f94 commit 6558b58

2 files changed

Lines changed: 350 additions & 95 deletions

File tree

‎layout.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap" rel="stylesheet">
7+
<title>웹사이트 레이아웃</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="desktop">
12+
<!-- 배경 1 -->
13+
<svg class="background1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 673" fill="none">
14+
<path 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)"/>
15+
<defs>
16+
<linearGradient id="paint0_linear_0_64" x1="1607.81" y1="368.129" x2="1076.12" y2="-543.631" gradientUnits="userSpaceOnUse">
17+
<stop stop-color="#8A4389" stop-opacity="0.01"/>
18+
<stop offset="1" stop-color="#512051"/>
19+
</linearGradient>
20+
</defs>
21+
</svg>
22+
23+
<!-- 배경 2 -->
24+
<svg class="background2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 584 362" fill="none">
25+
<path 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)"/>
26+
<defs>
27+
<linearGradient id="paint0_linear_0_65" x1="-281.401" y1="163.987" x2="4.4935" y2="654.58" gradientUnits="userSpaceOnUse">
28+
<stop stop-color="#8A4389" stop-opacity="0.01"/>
29+
<stop offset="1" stop-color="#512051"/>
30+
</linearGradient>
31+
</defs>
32+
</svg>
33+
34+
<!-- 텍스트와 박스들을 묶는 컨테이너 -->
35+
<div class="top-container">
36+
<!-- 메인 텍스트 -->
37+
<div class="text-container">
38+
<div class="main-text">10,000+ of our users love our products.</div>
39+
<div class="sub-text">We only provide great products combined with excellent customer service. See what our satisfied customers are saying about our services.</div>
40+
</div>
41+
42+
<!-- 박스들 -->
43+
<div class="box-container">
44+
<div class="box">
45+
<img src="assets/Group 4.png" alt="Star">
46+
<div class="box-text">Rated 5 Stars in Reviews</div>
47+
</div>
48+
<div class="box">
49+
<img src="assets/Group 4.png" alt="Star">
50+
<div class="box-text">Rated 5 Stars in Report Guru</div>
51+
</div>
52+
<div class="box">
53+
<img src="assets/Group 4.png" alt="Star">
54+
<div class="box-text">Rated 5 Stars in BestTech</div>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<!-- 그룹 박스 -->
60+
<div class="group">
61+
<div class="group-box">
62+
<div class="review-header">
63+
<img src="assets/Oval.png" alt="Colton Smith" class="review-image">
64+
<div class="review-info">
65+
<div class="review-name">Colton Smith</div>
66+
<div class="review-verifier">Verified Buyer</div>
67+
</div>
68+
</div>
69+
<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>
70+
</div>
71+
<div class="group-box">
72+
<div class="review-header">
73+
<img src="assets/Oval2.png" alt="Irene" class="review-image">
74+
<div class="review-info">
75+
<div class="review-name">Irene</div>
76+
<div class="review-verifier">Verified Buyer</div>
77+
</div>
78+
</div>
79+
<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>
80+
</div>
81+
<div class="group-box">
82+
<div class="review-header">
83+
<img src="assets/Oval3.png" alt="Anne" class="review-image">
84+
<div class="review-info">
85+
<div class="review-name">Anne</div>
86+
<div class="review-verifier">Verified Buyer</div>
87+
</div>
88+
</div>
89+
<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>
90+
</div>
91+
</div>
92+
</div>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)