Hugging Face's logo

Spaces:
Hoof2
/
Product-preview-v2
Running

App Files Community
Hoof2 commited on
Commit
5f8ca92
·
verified ·
1 Parent(s): 0471a47

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +144 -18
index.html CHANGED
@@ -1,19 +1,145 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Product Preview Card</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet" />
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --green-500: hsl(158, 36%, 37%);
17
+ --green-700: hsl(158, 42%, 18%);
18
+ --black: hsl(212, 21%, 14%);
19
+ --grey: hsl(228, 12%, 48%);
20
+ --cream: hsl(30, 38%, 92%);
21
+ --white: hsl(0, 0%, 100%);
22
+ }
23
+
24
+ body {
25
+ background: var(--cream);
26
+ font-family: 'Montserrat', sans-serif;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ min-height: 100vh;
31
+ padding: 20px;
32
+ }
33
+
34
+ .container {
35
+ display: flex;
36
+ flex-direction: column;
37
+ background-color: var(--white);
38
+ border-radius: 20px;
39
+ overflow: hidden;
40
+ max-width: 700px;
41
+ width: 100%;
42
+ }
43
+
44
+ .image picture,
45
+ .image img {
46
+ display: block;
47
+ width: 100%;
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+
52
+ .image img {
53
+ border-radius: 20px 20px 0 0;
54
+ }
55
+
56
+ .product-info {
57
+ padding: 30px;
58
+ }
59
+
60
+ .brand {
61
+ font-size: 14px;
62
+ color: var(--grey);
63
+ letter-spacing: 2px;
64
+ }
65
+
66
+ h1 {
67
+ font-family: 'Fraunces', serif;
68
+ font-size: 24px;
69
+ margin: 10px 0;
70
+ }
71
+
72
+ .description {
73
+ font-size: 16px;
74
+ margin-bottom: 20px;
75
+ color: var(--grey);
76
+ }
77
+
78
+ .price {
79
+ font-size: 24px;
80
+ color: var(--green-500);
81
+ font-weight: bold;
82
+ margin-bottom: 10px;
83
+ }
84
+
85
+ .old-price {
86
+ text-decoration: line-through;
87
+ color: var(--grey);
88
+ margin-bottom: 20px;
89
+ }
90
+
91
+ .add-to-cart {
92
+ width: 100%;
93
+ padding: 15px;
94
+ background-color: var(--green-500);
95
+ color: var(--white);
96
+ border: none;
97
+ border-radius: 10px;
98
+ font-weight: bold;
99
+ cursor: pointer;
100
+ }
101
+
102
+ .add-to-cart:hover {
103
+ background-color: var(--green-700);
104
+ }
105
+
106
+ @media (min-width: 768px) {
107
+ .container {
108
+ flex-direction: row;
109
+ align-items: stretch;
110
+ }
111
+
112
+ .image, .product-info {
113
+ width: 50%;
114
+ }
115
+
116
+ .image img {
117
+ height: 100%;
118
+ border-radius: 20px 0 0 20px;
119
+ }
120
+
121
+ .product-info {
122
+ border-radius: 0 20px 20px 0;
123
+ }
124
+ }
125
+ </style>
126
+ </head>
127
+ <body>
128
+ <div class="container">
129
+ <div class="image">
130
+ <picture>
131
+ <source media="(max-width: 767px)" srcset="https://i.imgur.com/6Iej2c3.jpg" />
132
+ <img src="https://i.imgur.com/6Iej2c3.jpg" alt="Product Image" />
133
+ </picture>
134
+ </div>
135
+ <div class="product-info">
136
+ <p class="brand">PERFUME</p>
137
+ <h1>Gabrielle Essence Eau De Parfum</h1>
138
+ <p class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
139
+ <p class="price">$149.99</p>
140
+ <p class="old-price">$169.99</p>
141
+ <button class="add-to-cart">Add to Cart</button>
142
+ </div>
143
+ </div>
144
+ </body>
145
  </html>