forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
132 lines (112 loc) · 5.43 KB
/
index.html
File metadata and controls
132 lines (112 loc) · 5.43 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>Virgo Fashion Magazine</title>
</head>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<body>
<header>
<div class="top-container">
<p class="logo">VIRGO</p>
<div class="top-right">
<p class="top-right-p1">BRITAIN</p>
<p class="top-right-p2">SUBSCRIBE</p>
<img class="hburger-img" alt="site menu" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhhwlrve66B8GHVhBRth6kDr6ml2SQR73R5g&usqp=CAU">
</div>
</div>
<nav class="border-bottom">
<ul>
<li><a class="nav-item" href="#">HOME</a></li>
<li><a class="nav-item" href="#">FASHION</a></li>
<li><a class="nav-item" href="#">RUNWAY</a></li>
<li><a class="nav-item" href="#">BEAUTY</a></li>
<li><a class="nav-item" href="#">NEWS</a></li>
<li><a class="nav-item" href="#">SHOP</a></li>
</ul>
</nav>
</header>
<main>
<h3 class="stories" class="border-bottom">TOP STORY</h3>
<div class="main-container">
<div class="left-container">
<h2 class="h2">VIEWPOINT</h2>
<h1 class="h1"><a class="link" href="https://www.vogue.co.uk/fashion/article/ode-to-black">Black on Black trend continues</a></h1>
<h2 class="h2">BY: HEATHER MAY</h2>
<p class="date">23 October 2022</p>
</div>
<aside class="aside-container">
<h3 class="stories">MAIN HEADLINES</h3>
<details>
<summary class="aside-border">Top 3 outerwear choices this winter</summary>
<p>
<ol>
<li>Puffer Winter Coat</li>
<li>Wrapped Wool Coat</li>
<li>Fur Aviator Jacket</li>
</ol>
</p>
</details>
<details>
<summary class="aside-border">Extra pointed toe the new pick</summary>
<p>The rounded toe is no longer seen as the go to. The pointy toe has yet again been selected as the must wear for business and pleasure.</p>
</details>
<details>
<summary class="aside-border">Accessorize with this type of head wear</summary>
<p>The beanie has been around for ages, choose a color that's similar to your outfit or you can add a pop of color as well.</p>
</details>
</aside>
</div>
<h3 class="stories">FASHION NEWS</h3>
<section class="article-container">
<article>
<h1>Styling tips for the puffer</h1>
<p>There are various ways to style the puffer jacket but there are different rules which depends on numerous
factors. What's the length, what's the fit and what about the color. <strong>Author: Mishy Mish</strong></p>
<a class="read-link"
href="https://images.pexels.com/photos/6980982/pexels-photo-6980982.jpeg?auto=compress&cs=tinysrgb&w=600">READ
MORE</a>
</p>
<img alt="A couple huddles together wearing puffer jackets" class="img-2"
src="https://images.pexels.com/photos/10833037/pexels-photo-10833037.jpeg?auto=compress&cs=tinysrgb&w=600">
</article>
<article class="article2">
<h1>The utilitarian vibe</h1>
<img alt="A mother and daughter plays in the snow while wearing a puffer and a tracksuit" class="img-3"
src="https://images.pexels.com/photos/9385114/pexels-photo-9385114.jpeg?auto=compress&cs=tinysrgb&w=600">
<p><strong>Author: Lee-Lee Kay Rogers</strong> <br> A puffer paired with a tracksuit. This trend has walked it's way into yet another winter season as it's
favoritism has grown
over the past couple of years. I would be right to say that this trend is simple, comfortable but chic.</p>
<a class="read-link"
href="https://www.pexels.com/photo/three-men-wearing-winter-jackets-with-knit-hat-standing-on-seashore-7026413/">READ
MORE</a>
</a>
</article>
<article class="article3">
<h1>Hip to be a square</h1>
<img alt="A woman crossing a street in a shiny boxy puffer jacket" class="img-1"
src="https://images.pexels.com/photos/10265031/pexels-photo-10265031.jpeg?auto=compress&cs=tinysrgb&w=600">
<p> <strong>Author: Annie Pierre</strong> <br>Who would have ever thought that such an unflattering look would be on trend today, it really is. Boxy
jackets are the new must have. Paired with leather leggings and a bucket hat adds an effortless but sophisticated.</p>
<a class="read-link" href="#">READ MORE</a>
</article>
</section>
</main>
<footer>
<h4>Contact Virgo Fashion Magazine at virgo.fashion-magazine.org</h4>
<h4>@Copyright all rights reserved</h4>
</footer>
</body>
</html>