-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample3.html
133 lines (123 loc) · 4.66 KB
/
example3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="example3.css" rel="stylesheet">
<link href="normalize.css-master/normalize.css-master/normalize.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/fontawesome/fontawesome-free-6.2.1-web/css/all.min.css">
</head>
<body>
<div class="ani-box">
<h4>Menu</h4>
<p style="text-align: center;">items</p>
</div>
<div class="flex-container">
<div class="flex-item">
<h1>About Shooes</h1>
</div>
<div style="flex-grow: 1;"></div>
<div class="flex-item">
<h1>products</h1>
</div>
<div class="flex-item">
<h1>services</h1>
</div>
</div>
<div class="sub-layout">
<div class="sub-item">
<i class="fa-solid fa-cart-shopping fa-2x"></i>
<h3>Fast Shipping</h3>
<p>We ship faster than other shops</p>
</div>
<div class="sub-item">
<i class="fa-regular fa-face-smile fa-2x"></i>
<h3>Good Service</h3>
<p>Expect a lifelong service</p>
</div>
<div class="sub-item">
<i class="fa-solid fa-gift fa-2x"></i>
<h3>Free Coupons</h3>
<p>With new welcome gifts</p>
</div>
<div class="sub-item">
<i class="fa-solid fa-shirt fa-2x"></i>
<h3>New Products</h3>
<p>See monthly new products</p>
</div>
</div>
<div class="main-background">
<h4 class="main-text"><span>2022. Nov.</span>
<br>Buy our Shoes! Now on Sale!<br><span>CHECK THIS NOW.</span></h4>
<button class="main-button">구매하기</button>
</div>
<div class="sub-box">
<h3>How we design our shoes</h3>
<p>1460 부츠를 베이스로 청키한 플랫폼 아웃솔과 사이드 지퍼에 디테일 추가로 재탄생된 모델입니다.
<br>강한 내구성과 착화 시 편리함을 제공하며 Published Smooth Leather 소재로 빈티지한
멋의 유광 부츠입니다.
</p>
</div>
<h4 class="ani-text">안녕하세요</h4>
<div class="shoes-box">
<div class="shoes-container">
<div class="shoes-item">
<div style="position: relative;">
<div class="overlay-wrap">
<div class="overlay"><p>$60<br><span style="font-size: 20px;">인기상품</span></p></div>
</div>
<img src="/img/item1.jpg">
</div>
</div>
<div class="shoes-item">
<div style="position: relative;">
<div class="overlay-wrap">
<div class="overlay"><p>$100<br><span style="font-size: 20px;">품절</span></p></div>
</div>
<img src="/img/item2.jpg">
</div>
</div>
<div class="shoes-item">
<div style="position: relative;">
<div class="overlay-wrap">
<div class="overlay"><p>$75<br><span style="font-size: 20px;">이월상품</span></p></div>
</div>
<img src="/img/item3.jpg">
</div>
</div>
</div>
</div>
<div class="form-box">
<div class="layout-box">
<form>
<div class="form">
<div class="first-form">
<h3>Contact us</h3>
<p>Your Email</p>
<input class="email-form" type="email" placeholder="[email protected]">
</div>
</div>
<div class="name-form">
<h4>First Name</h4>
<input class="email-form" type="text">
</div>
<div class="name-form">
<h4>Last Name</h4>
<input class="email-form" type="text">
</div>
<div style="clear:both"></div>
<div class="form">
<h4>Message</h4>
<textarea class="email-form" rows="5"></textarea>
</div>
<div class="form">
<input type="checkbox" id="Sub">
<label for="Sub">Subscribe</label>
<button class="btn">SEND</button>
</div>
</form>
</div>
</div>
</body>
</html>