-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (172 loc) · 7.72 KB
/
index.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Experience a modern news homepage crafted with Semantic HTML5 markup, enhanced by the power of Tailwind for sleek styling, and Vanilla JavaScript for dynamic interactivity. Stay updated with the latest news seamlessly integrated into a user-friendly interface." />
<meta name="keywords" content="HTML, CSS, JavaScript, Tailwind, Frontend Mentor">
<meta name="author" content="Aatmane Oulmouden">
<meta name="robots" content="index,follow">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | News homepage</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<div class="container max-w-full">
<div class="row flex justify-between items-center py-8 lg:py-10">
<div class="col">
<img src="./assets/images/logo.svg" alt="News Homepage" class="logo">
</div>
<div class="col block lg:hidden">
<button class="open-menu" id="open-menu" name="Open menu">
<svg width="40" height="17" xmlns="http://www.w3.org/2000/svg">
<g fill="#00001A" fill-rule="evenodd">
<path d="M0 0h40v3H0zM0 7h40v3H0zM0 14h40v3H0z" />
<path d="M0 0h40v3H0z" />
</g>
</svg>
</button>
</div>
<nav class="col desktop-nav hidden lg:block">
<ul class="nav-list flex items-center gap-8">
<li class="nav-item">
<a href="" class="nav-link text">Home</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">New</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Popular</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Trending</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Categories</a>
</li>
</ul>
</nav>
<nav class="col mobile-nav hidden bg-white fixed top-0 right-0 w-[70%] h-screen ml-auto pr-5 pl-8"
id="mobile-menu">
<button class="close-menu w-full h-[104px] text-right flex items-center justify-end mb-10" id="close-menu" name="Close menu">
<svg width="32" height="31" xmlns="http://www.w3.org/2000/svg">
<g fill="#00001A" fill-rule="evenodd">
<path d="m2.919.297 28.284 28.284-2.122 2.122L.797 2.419z" />
<path d="M.797 28.581 29.081.297l2.122 2.122L2.919 30.703z" />
</g>
</svg>
</button>
<ul class="nav-list">
<li class="nav-item">
<a href="" class="nav-link text">Home</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">New</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Popular</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Trending</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text">Categories</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="container max-w-full">
<div class="row grid grid-cols-1 gap-y-14 gap-x-8 mb-14 lg:grid-cols-3">
<div class="col main-new lg:col-span-2">
<div class="banner-wrapper">
<img src="./assets/images/image-web-3-mobile.jpg" alt="The Bright Future of Web 3.0?"
class="banner aspect-square block lg:hidden">
<img src="./assets/images/image-web-3-desktop.jpg" alt="The Bright Future of Web 3.0?"
class="banner hidden lg:block lg:h-[264px]">
</div>
<div class="data-wrapper mt-8 lg:mt-6 grid grid-cols-1 lg:grid-cols-2">
<h1
class="title text-5xl text-very-dark-blue font-extrabold mb-7 lg:text-[64px] lg:max-w-[80%] lg:leading-[74px]">
The Bright Future of Web 3.0?</h1>
<div class="content">
<p class="text mb-8 lg:mb-6">We dive into the next evolution of the web that claims to put the power of
the
platforms
back into the
hands of the people. But is it really fulfilling its promise?</p>
<a href=""
class="btn text-center text-lg text-off-white uppercase block w-fit tracking-[4px] py-4 px-10 bg-soft-red ease-linear duration-200 hover:bg-very-dark-blue hover:text-off-white">Read
more</a>
</div>
</div>
</div>
<div class="col secodary-news bg-very-dark-blue text-off-white pt-5 px-5 lg:h-fit lg:pt-8">
<h2 class="title text-4xl text-soft-orange font-bold mb-1">New</h2>
<div class="news-wrapper">
<article class="new group">
<h3 class="new-title">Hydrogen VS Electric Cars</h3>
<p class="new-subtitle">Will hydrogen-fueled cars ever catch up to EVs?</p>
</article>
<article class="new group">
<h3 class="new-title">The Downsides of AI Artistry</h3>
<p class="new-subtitle">What are the possible adverse effects of on-demand AI image generation?</p>
</article>
<article class="new group">
<h3 class="new-title">Is VC Funding Drying Up?</h3>
<p class="new-subtitle">Private funding by VC firms is down 50% YOY. We take a look at what that means.
</p>
</article>
</div>
</div>
</div>
<div class="row grid grid-cols-1 gap-5 lg:grid-cols-3">
<article class="col post group">
<div class="post-img-wrapper">
<img src="./assets/images/image-retro-pcs.jpg" alt="Reviving Retro PCs">
</div>
<div class="post-content-wrapper">
<span class="post-number">01</span>
<h4 class="post-title">Reviving Retro PCs</h4>
<p class="post-subtitle text">What happens when old PCs are given modern upgrades?</p>
</div>
</article>
<article class="col post group">
<div class="post-img-wrapper">
<img src="./assets/images/image-top-laptops.jpg" alt="Top 10 Laptops of 2022">
</div>
<div class="post-content-wrapper">
<span class="post-number">02</span>
<h4 class="post-title">Top 10 Laptops of 2022</h4>
<p class="post-subtitle text">Our best picks for various needs and budgets.</p>
</div>
</article>
<article class="col post group">
<div class="post-img-wrapper">
<img src="./assets/images/image-gaming-growth.jpg" alt="The Growth of Gaming">
</div>
<div class="post-content-wrapper">
<span class="post-number">03</span>
<h4 class="post-title">The Growth of Gaming</h4>
<p class="post-subtitle text">How the pandemic has sparked fresh opportunities.</p>
</div>
</article>
</div>
</div>
</main>
<footer class="">
<div class="container max-w-full">
<div class="attribution text-center text-sm text-dark-grayish-blue pt-14 pb-8">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by
<a href="https://www.linkedin.com/in/aatmaneoulmouden/" target="_blank" class="font-bold">Aatmane Oulmouden</a>.
</div>
</div>
</footer>
<script src="./assets/js/main.js"></script>
</body>
</html>