-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
141 lines (125 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Frontend Mentor | News homepage</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<h1>WEB3</h1>
</div>
<i class="fa-solid fa-bars" id="nav-icon"></i>
<div class="nav" style="transform: translateX(100%)">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Categories</a></li>
</ul>
</div>
</header>
<main>
<div class="content1">
<img src="images/image-web-3-desktop.jpg" />
<div class="cols">
<div class="head">
<h1>The Bright Future of Web 3.0?</h1>
</div>
<div class="texts">
<p>
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Eum vero assumenda omnis ipsam
quidem porro tempore. Tempora, fugiat placeat?
Dolor.
</p>
<button>READ MORE</button>
</div>
</div>
</div>
<div class="content2">
<h1>News</h1>
<div class="news-heading">
<h3>Hydrogen Vs Electronic cars</h3>
<p>Will hydrogren-fueled cars ever catch up EVs?</p>
<hr />
</div>
<div class="news-heading">
<h3>Hydrogen Vs Electronic cars</h3>
<p>Will hydrogren-fueled cars ever catch up EVs?</p>
<hr />
</div>
<div class="news-heading">
<h3>Hydrogen Vs Electronic cars</h3>
<p>Will hydrogren-fueled cars ever catch up EVs?</p>
</div>
</div>
</main>
<div class="tech-news">
<div class="posts">
<img src="images/image-retro-pcs.jpg" />
<div class="content">
<h2>01</h2>
<h3>Reviving Retro PCs</h3>
<p>
What happens when old PCs are given modern upgrades?
</p>
</div>
</div>
<div class="posts">
<img src="images/image-top-laptops.jpg" />
<div class="content">
<h2>02</h2>
<h3>Top 10 laptops now</h3>
<p>
What happens when old PCs are given modern upgrades?
</p>
</div>
</div>
<div class="posts">
<img src="images/image-gaming-growth.jpg" />
<div class="content">
<h2>03</h2>
<h3>Game khelun jibon bachan</h3>
<p>
What happens when old PCs are given modern upgrades?
</p>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div> -->
</body>
</html>