Hugging Face's logo

Spaces:
tonyassi
/
fashion-magazines
Running

App Files Community
tonyassi commited on
Commit
dc774e6
·
verified ·
1 Parent(s): a73d89a

Upload 13 files

Browse files
Files changed (13) hide show
  1. favicon/.DS_Store +0 -0
  2. favicon/favicon.png +0 -0
  3. images/.DS_Store +0 -0
  4. images/elle.jpg +0 -0
  5. images/fashion-network.jpg +0 -0
  6. images/fashionista.jpg +0 -0
  7. images/high-snobiety.png +0 -0
  8. images/hypebeast.png +0 -0
  9. images/nowfashion.png +0 -0
  10. images/the-fashion-law.png +0 -0
  11. images/who-what-wear.png +0 -0
  12. index.html +42 -18
  13. styles.css +59 -0
favicon/.DS_Store ADDED
Binary file (6.15 kB). View file
 
favicon/favicon.png ADDED
images/.DS_Store ADDED
Binary file (6.15 kB). View file
 
images/elle.jpg ADDED
images/fashion-network.jpg ADDED
images/fashionista.jpg ADDED
images/high-snobiety.png ADDED
images/hypebeast.png ADDED
images/nowfashion.png ADDED
images/the-fashion-law.png ADDED
images/who-what-wear.png ADDED
index.html CHANGED
@@ -1,19 +1,43 @@
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>Fashion Publications</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ <link rel="icon" type="image/png" href="./favicon/favicon.png">
9
+ </head>
10
+ <body>
11
+
12
+ <h1>Fashion Publications</h1>
13
+ <p class="subtitle">A collection of free online fashion magazines</p>
14
+
15
+ <div class="image-grid">
16
+ <a href="https://us.fashionnetwork.com/" target="_blank">
17
+ <img src="images/fashion-network.jpg" alt="Fashion Network">
18
+ </a>
19
+ <a href="https://www.thefashionlaw.com/" target="_blank">
20
+ <img src="images/the-fashion-law.png" alt="The Fashion Law">
21
+ </a>
22
+ <a href="https://hypebeast.com" target="_blank">
23
+ <img src="images/hypebeast.png" alt="Hypebeast">
24
+ </a>
25
+ <a href="https://www.highsnobiety.com/" target="_blank">
26
+ <img src="images/high-snobiety.png" alt="Highsnobiety">
27
+ </a>
28
+ <a href="https://nowfashion.com/" target="_blank">
29
+ <img src="images/nowfashion.png" alt="NowFashion">
30
+ </a>
31
+ <a href="https://fashionista.com/" target="_blank">
32
+ <img src="images/fashionista.jpg" alt="Publication 6">
33
+ </a>
34
+ <a href="https://www.elle.com/" target="_blank">
35
+ <img src="images/elle.jpg" alt="Publication 7">
36
+ </a>
37
+ <a href="https://www.whowhatwear.com" target="_blank">
38
+ <img src="images/who-what-wear.png" alt="Publication 8">
39
+ </a>
40
+ </div>
41
+
42
+ </body>
43
  </html>
styles.css ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ text-align: center;
4
+ margin: 20px;
5
+ }
6
+
7
+ h1 {
8
+ font-family: "Didot", "Bodoni MT", "Garamond", serif;
9
+ font-size: 4.4vh;
10
+ font-weight: normal;
11
+ margin-bottom: 0.5vh; /* Reduced margin to bring subtitle closer */
12
+ letter-spacing: -0.2vh;
13
+ }
14
+
15
+ .subtitle {
16
+ margin-top: 0; /* Removes any extra top margin */
17
+ font-style: italic; /* Displays the text in italics */
18
+ margin-bottom: 3vh;
19
+ font-size: 1.5vh;
20
+ }
21
+
22
+ .image-grid {
23
+ display: grid;
24
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
25
+ gap: 15px;
26
+ max-width: 1000px;
27
+ margin: 0 auto;
28
+ }
29
+
30
+ .image-grid a {
31
+ display: block;
32
+ transition: transform 0.3s ease;
33
+ }
34
+
35
+ .image-grid a:hover {
36
+ transform: scale(1.05);
37
+ }
38
+
39
+ .image-grid img {
40
+ width: 100%;
41
+ height: auto;
42
+ border-radius: 5px;
43
+ display: block;
44
+ border: 1px solid black;
45
+ }
46
+
47
+ /* Desktop: 4 columns */
48
+ @media (min-width: 768px) {
49
+ .image-grid {
50
+ grid-template-columns: repeat(4, 1fr);
51
+ }
52
+ }
53
+
54
+ /* Mobile: 2 columns */
55
+ @media (max-width: 767px) {
56
+ .image-grid {
57
+ grid-template-columns: repeat(2, 1fr);
58
+ }
59
+ }