-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (163 loc) · 9.94 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
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!--
Need a visual blank slate?
Remove all code in `styles.css`!
-->
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<nav>
<div class="navbar">
<a href="/" aria-current="page" style="color:white;" class="navi-logo"> Websurf 🏃♂️</a>
<a href="/page2.html">All Reviews</a>
<a href="/page2.html">Self improvement</a>
<a href="/page2.html">Productivity</a>
<a href="/page2.html">Mindfulness</a>
<a href="/page2.html">Ranking</a>
</div>
<svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(0, 243.769, 255, 1)" offset="0%"></stop><stop stop-color="rgba(0, 0, 0, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,98L20,89.8C40,82,80,65,120,114.3C160,163,200,278,240,318.5C280,359,320,327,360,285.8C400,245,440,196,480,179.7C520,163,560,180,600,196C640,212,680,229,720,261.3C760,294,800,343,840,367.5C880,392,920,392,960,351.2C1000,310,1040,229,1080,220.5C1120,212,1160,278,1200,302.2C1240,327,1280,310,1320,261.3C1360,212,1400,131,1440,138.8C1480,147,1520,245,1560,310.3C1600,376,1640,408,1680,367.5C1720,327,1760,212,1800,155.2C1840,98,1880,98,1920,98C1960,98,2000,98,2040,122.5C2080,147,2120,196,2160,179.7C2200,163,2240,82,2280,40.8C2320,0,2360,0,2400,0C2440,0,2480,0,2520,32.7C2560,65,2600,131,2640,155.2C2680,180,2720,163,2760,130.7C2800,98,2840,49,2860,24.5L2880,0L2880,490L2860,490C2840,490,2800,490,2760,490C2720,490,2680,490,2640,490C2600,490,2560,490,2520,490C2480,490,2440,490,2400,490C2360,490,2320,490,2280,490C2240,490,2200,490,2160,490C2120,490,2080,490,2040,490C2000,490,1960,490,1920,490C1880,490,1840,490,1800,490C1760,490,1720,490,1680,490C1640,490,1600,490,1560,490C1520,490,1480,490,1440,490C1400,490,1360,490,1320,490C1280,490,1240,490,1200,490C1160,490,1120,490,1080,490C1040,490,1000,490,960,490C920,490,880,490,840,490C800,490,760,490,720,490C680,490,640,490,600,490C560,490,520,490,480,490C440,490,400,490,360,490C320,490,280,490,240,490C200,490,160,490,120,490C80,490,40,490,20,490L0,490Z"></path></svg>
<form>
<input type="search" name="q" placeholder="Search blogs">
<input type="submit" value="Go!">
</form>
</nav>
<main>
<div class="container">
<img src="https://media0.giphy.com/media/dwmNhd5H7YAz6/giphy.gif?cid=ecf05e47bzxfdd67j4rzivt5ufcwp46csblwuhm6l3swwkgu&rid=giphy.gif&ct=g" class="hero-cta" >
<div class="centered"><b>We websurf </b><br>Underrated tools you actually need, Reviews on time saving tools,extensions, software, websites, games, & more
<!--- <button name="cta-Button" onclick="/page2.html">Surf Reviews</button> -->
<form action="/page2.html" method="get" target="_blank">
<button name="cta-Button" type="submit">Surf Reviews</button>
</div>
<!--featured blog-->
<!-- why Us my very bold claim-->
<section class="body-whyus">
<h2 class="bounce-top"> We websurf sharp-witted to build better lives </h2>
<div class="wrapper">
<div class="One">
<h2> Informational</h2>
<p> We help to <i>inform</i> you to make better decisions on safe websites to use, than malicious, virus haven websites. <br> <br>
We guide you as the surfer on the newest tech tools, many unheard of yet powerful, helpful tools <br> <br>Our reviews are <i>Informational</i> giving you feeling more confident in installing a new software, plugin but not limited to extensions.<p>
<img src="https://cdn-icons-png.flaticon.com/512/3160/3160641.png" height=auto; width= 200px; class="ctaimg">
</div>
<div class="Two">
<h2> boost productivity &save time </h2>
<p> "time is of the essence", we all are short on time, deadlines to meet *furious rage*. <br> <br> But say no more to lost time, we have you covered on time saving websites to help complete projects faster, getting more done.</p>
<img src="https://cdn-icons-png.flaticon.com/512/2753/2753156.png" height=auto; width= 200px;>
</div>
<div class="Three">
<h2> overall mood</h2>
<p> Your mood is imporatant to us. <br>Everyone is frustrated when you want a goal, a project to be finshed, and find out it's nearly impossiable. <br> <br> Now you can start on your goals, we'll support you websurfers! </p>
<a href="page2.html"> get started here!</a>
<img src="https://media.istockphoto.com/vectors/cartoon-brain-idea-vector-id895877506?k=20&m=895877506&s=612x612&w=0&h=botKknIxDywYv3PtavKPCs1id5LBTydIECsyywzMucg=" height=auto; width= 200px;>
</div>
</div>
</section>
<!--about us section-->
<div class="about-us">
<h2 style="color:black;"> about us</h2>
<p class="aboutus-text"> Hi my names Mia! I’m here finding new resources for time management, productivity, and really cool software you had. <br><br>
I curated content through hours of research, I test each product beforehand to make sure it’s the best option. <br>Comparing products listed in a easy to read pros and cons, to help you make informed decisions. </p>
<img src="https://www.unilad.co.uk/wp-content/uploads/2020/12/122091216_194906708666485_1155858819270838587_o.jpg" class="aboutus-thumb" >
</div>
<H2> blogs</h2>
<!----decided impractical
<div class="grid-container">
<div class="blog-1" > Blog one </div>
<div class="blog-2">1 </div>
<div class="blog-3">1 </div>
<div class="blog-4">1 </div>
<div class="blog-5">1 </div>
<div class="blog-6">1 </div>
<div class="blog-7">1 </div>
<div class="blog-8">1 </div>
<div class="blog-9">1 </div>
<!-->
<ul class="listing">
<li>
<h2 class="h2-white"> Fast Free online libraies</h2>
<div class="body">
<img src="https://www.changinghands.com/sites/changinghands.com/files/teenbundle.jpg" height=100px; width:60px;>
<p> books recommended </p>
</div>
<div class="cta">
<a href="blog1.html">free books</a>
</div>
</li>
<li>
<h2 class="h2-white">Website Review JS Racer Turbo</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="blog2.html">Read now</a>
</div>
</li>
<li class="wide">
<h2 class="h2-white" >Quick Progress</h2>
<div class="body">
<p>Making a blog. My thoughts along the way and my honest opinions</p>
</div>
<div class="cta">
<a href="blog3v2.html">So far</a>
</div>
</li>
<li>
<h2 class="h2-white">Resources that help boost creativity</h2>
<div class="body">
<p>When a art block happens, or when there's just something not looking the way you want to. A solution is finding inspiration and using others works to inspire our own.</p>
</div>
<div class="cta">
<a href="blog4.html"> art inspiration</a>
</div>
</li>
<li>
<h2 class="h2-white" >Item Five</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
<li>
<h2 class="h2-white">Item six</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
</ul>
</div>
</div>
<footer >
<svg id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(0, 0, 0, 1)" offset="0%"></stop><stop stop-color="rgba(0, 235.13, 255, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,98L26.7,89.8C53.3,82,107,65,160,114.3C213.3,163,267,278,320,318.5C373.3,359,427,327,480,285.8C533.3,245,587,196,640,179.7C693.3,163,747,180,800,196C853.3,212,907,229,960,261.3C1013.3,294,1067,343,1120,367.5C1173.3,392,1227,392,1280,351.2C1333.3,310,1387,229,1440,220.5C1493.3,212,1547,278,1600,302.2C1653.3,327,1707,310,1760,261.3C1813.3,212,1867,131,1920,138.8C1973.3,147,2027,245,2080,310.3C2133.3,376,2187,408,2240,367.5C2293.3,327,2347,212,2400,155.2C2453.3,98,2507,98,2560,98C2613.3,98,2667,98,2720,122.5C2773.3,147,2827,196,2880,179.7C2933.3,163,2987,82,3040,40.8C3093.3,0,3147,0,3200,0C3253.3,0,3307,0,3360,32.7C3413.3,65,3467,131,3520,155.2C3573.3,180,3627,163,3680,130.7C3733.3,98,3787,49,3813,24.5L3840,0L3840,490L3813.3,490C3786.7,490,3733,490,3680,490C3626.7,490,3573,490,3520,490C3466.7,490,3413,490,3360,490C3306.7,490,3253,490,3200,490C3146.7,490,3093,490,3040,490C2986.7,490,2933,490,2880,490C2826.7,490,2773,490,2720,490C2666.7,490,2613,490,2560,490C2506.7,490,2453,490,2400,490C2346.7,490,2293,490,2240,490C2186.7,490,2133,490,2080,490C2026.7,490,1973,490,1920,490C1866.7,490,1813,490,1760,490C1706.7,490,1653,490,1600,490C1546.7,490,1493,490,1440,490C1386.7,490,1333,490,1280,490C1226.7,490,1173,490,1120,490C1066.7,490,1013,490,960,490C906.7,490,853,490,800,490C746.7,490,693,490,640,490C586.7,490,533,490,480,490C426.7,490,373,490,320,490C266.7,490,213,490,160,490C106.7,490,53,490,27,490L0,490Z"></path></svg>
<div class="end-footer">
<h2 class="h2-footer"> find us </h2>
<ul class="footer-socials">
<li> <a href="#"> instagram</a> </li>
<li> <a href="#"> linkin</a> </li>
<li> <a href="#"> pinterest</a> </li>
<li> <a href="#"> twitter</a> </li>
<li> <a href="#"> facebook</a> </li>
</ul>
<p>by aim mjay </p>
<h2 class="h2-footer"> Catagories </h2>
<ul class="footer-blogs">
<li> <a href="#"> tech</a> </li>
<li> <a href="#"> idk</a> </li>
<li> <a href="#"> Service</a> </li>
</ul>
</div>
</footer>
</main>
</body>
</html>