-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmagazine.html
166 lines (158 loc) · 7.53 KB
/
magazine.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magazine</title>
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
</head>
<body>
<main>
<header class="small-header row">
<div class="user-panel row">
<div class="user row">
<img src="icons/user-icon.svg" alt="user-icon">
<a href="#" class="account">Account</a>
</div>
<div class="lang-select row">
<img src="icons/usa-flag.svg" alt="USA-flag" class="flag USA-flag">
<a href="#" class="lang">USA - EN</a>
<img src="icons/small-down.svg" alt="small-down" class="small-down">
</div>
</div>
</header>
<header class="big-header container row">
<div class="logo-container">
<a href="index.html" class="logo">WKND</a>
</div>
<div class="menu row">
<nav class="main-nav">
<a href="magazine.html" class="active">Magazine</a>
<a href="index.html">Adventures</a>
<a href="faq.html">FAQ</a>
<a href="about-us.html">About us</a>
</nav>
<div class="search">
<input type="text" class="search-input" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Search'" placeholder="Search" />
<img src="icons/search-icon.svg" alt="search">
</div>
</div>
</header>
<div class="magazine-page container">
<h1 class="big-title">Magazine</h1>
<section class="last-article row">
<div class="description">
<div class="description-text">
<h2 class="underline-title">Last Article</h2>
<h3>Camping in Western Australia</h3>
<p>A vibrant red, dusty highway stretches out before us into what seems like infinity, at the
far reach of our sights it distorts and shimmers from the afternoon heat, fading into the
blue of the horizon.</p>
</div>
<div class="desctiption-button">
<a href="#" class="btn yellow-btn">Read more</a>
</div>
</div>
<div class="cover">
<img src="img/last-article-img.svg" alt="nature" width="716" height="487">
</div>
</section>
<section class="small-images-section border-none">
<h2 class="underline-title">All Articles</h2>
<div class="small-images-section-first-row row">
<div class="images-item">
<img src="img/arctic-surfing.svg" alt="arctic surfing">
<h3><a href="#">Arctic surfing</a></h3>
<p>Jacob Wester</p>
</div>
<div class="images-item">
<img src="img/san-diego-surf-spots.svg" alt="san diego surf">
<h3><a href="#">San Diego surf spots</a></h3>
<p>Justin Barr</p>
</div>
<div class="images-item">
<img src="img/skiitouring.svg" alt="skiitouring">
<h3><a href="#">Skiitouring</a></h3>
<p>Sofia Sjöberg</p>
</div>
<div class="images-item">
<img src="img/ultimate-guide-to-la.svg" alt="ultimate guide">
<h3><a href="#">Ultimate guide to la skateparks</a></h3>
<p>Stacey Roswells</p>
</div>
</div>
<div class="small-images-section-row row">
<div class="images-item">
<img src="img/western-australia.png" alt="australia">
<h3><a href="#">Western Australia</a></h3>
<p>Sofia Sjöberg</p>
</div>
<div class="images-item"></div>
<div class="images-item"></div>
<div class="images-item"></div>
</div>
</section>
<section class="members-only">
<h2 class="underline-title">Members Only</h2>
<p class="sign-call"><a href="#"><b>Sign in</b></a> to un-lock exclusive content for WKND members only!
</p>
<div class="members-only-items row">
<div class="members-only-item">
<img src="img/alaskan-adventure.png" alt="alaskan">
<h3>Alaskan adventure</h3>
<p>Discover the 49th state</p>
</div>
<div class="members-only-item">
<img src="img/fly-fishing-the-amazon.png" alt="fishing">
<h3>Fly fishing the amazon</h3>
<p>Experience the amazon like never before</p>
</div>
</div>
</section>
<div class="subscription-border">
<section class="subscription-section row">
<div class="cover">
<img src="img/wknd-inbox.png" alt="nature" width="348" height="204">
</div>
<div class="subscription">
<h1 class="big-title">Want WKND in your inbox?</h1>
<p>Be the first to know about new trips, fresh gear, and co-op offers. We’re a good penpal.
Promise.</p>
<div class="email row">
<div class="email-input">
<input type="email" name="email" id="email" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Your email Adress'" placeholder="Your email Adress">
</div>
<a href="#" class="btn black-btn email-btn">Sign Up</a>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="footer-menu container row">
<div class="logo-container">
<p class="logo">WKND</p>
</div>
<div class="menu row">
<nav class="main-nav ">
<a href="magazine.html">Magazine</a>
<a href="index.html">Adventures</a>
<a href="faq.html">FAQ</a>
<a href="about-us.html">About us</a>
</nav>
<div class="wknd-social row">
<a target="_blank" class="social-btn inst" href="#">Instagram</a>
<a target="_blank" class="social-btn fb" href="#">Facebook</a>
<a target="_blank" class="social-btn tw" href="#">Twitter</a>
</div>
</div>
</div>
<div class="copyright row container">
<p>Ⓒ 2019, WKND Demo Site. Intended only as a demonstration of Adobe Experience Manager</p>
</div>
</footer>
</main>
</body>