mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-06 23:55:54 -05:00
230 lines
10 KiB
HTML
230 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" dir="ltr">
|
||
|
|
<head>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Icons</title>
|
||
|
|
<link rel="stylesheet" href="icons.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p class="welcome">Take these images, no need to credit or pay me! (Yay Free + Open Source!)</p>
|
||
|
|
<input class="search-bar" placeholder="'weather', 'gradient', 'plain', 'dark', 'light', 'rain', 'lightsnow', 'heavysnow', 'lightrain', 'sun-alt', 'sun', 'blue', 'purple', 'cloud', 'stormcloud', 'cloudy', 'overcast', 'thunderstorm', 'flood', 'frost', 'portable-roof', 'umbrella'" type="search">
|
||
|
|
<div class="image-grid rain">
|
||
|
|
<div class="img-parent weather gradient blue dark rain">
|
||
|
|
<img class="image" src="SVG/gradient-blue-dark-rain.svg">
|
||
|
|
<p>Gradient Blue Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient blue light rain">
|
||
|
|
<img class="image" src="SVG/gradient-blue-light-rain.svg">
|
||
|
|
<p>Gradient Blue Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient purple dark rain">
|
||
|
|
<img class="image" src="SVG/gradient-purple-dark-rain.svg">
|
||
|
|
<p>Gradient Purple Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient purple light rain">
|
||
|
|
<img class="image" src="SVG/gradient-purple-light-rain.svg">
|
||
|
|
<p>Gradient Purple Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain blue dark rain">
|
||
|
|
<img class="image" src="SVG/plain-blue-dark-rain.svg">
|
||
|
|
<p>Plain Blue Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain blue light rain">
|
||
|
|
<img class="image" src="SVG/plain-blue-light-rain.svg">
|
||
|
|
<p>Plain Blue Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain purple dark rain">
|
||
|
|
<img class="image" src="SVG/plain-purple-dark-rain.svg">
|
||
|
|
<p>Plain Purple Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain purple light rain">
|
||
|
|
<img class="image" src="SVG/plain-purple-light-rain.svg">
|
||
|
|
<p>Plain Purple Dark Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient blue light lightrain">
|
||
|
|
<img class="image" src="SVG/gradient-blue-light-light-rain.svg">
|
||
|
|
<p>Gradient Blue Dark Light Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient purple light lightrain">
|
||
|
|
<img class="image" src="SVG/gradient-purple-light-light-rain.svg">
|
||
|
|
<p>Gradient Purple Light Light Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain blue light lightrain">
|
||
|
|
<img class="image" src="SVG/plain-blue-light-light-rain.svg">
|
||
|
|
<p>Plain Blue Dark Light Rain</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain purple light lightrain">
|
||
|
|
<img class="image" src="SVG/plain-purple-light-light-rain.svg">
|
||
|
|
<p>Plain Purple Light Light Rain</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid snow">
|
||
|
|
<div class="img-parent weather gradient dark heavysnow">
|
||
|
|
<img class="image" src="SVG/gradient-dark-heavysnow.svg">
|
||
|
|
<p>Gradient Dark Heavysnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient light heavysnow">
|
||
|
|
<img class="image" src="SVG/gradient-light-heavysnow.svg">
|
||
|
|
<p>Gradient Light Heavysnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient dark lightsnow">
|
||
|
|
<img class="image" src="SVG/gradient-dark-lightsnow.svg">
|
||
|
|
<p>Gradient Dark Lightsnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient light lightsnow">
|
||
|
|
<img class="image" src="SVG/gradient-light-lightsnow.svg">
|
||
|
|
<p>Gradient Light Lightsnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain dark heavysnow">
|
||
|
|
<img class="image" src="SVG/plain-dark-heavysnow.svg">
|
||
|
|
<p>Plain Dark Heavysnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain light heavysnow">
|
||
|
|
<img class="image" src="SVG/plain-light-heavysnow.svg">
|
||
|
|
<p>Plain Light Heavysnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain dark lightsnow">
|
||
|
|
<img class="image" src="SVG/plain-dark-lightsnow.svg">
|
||
|
|
<p>Plain Dark Lightsnow</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain light lightsnow">
|
||
|
|
<img class="image" src="SVG/plain-light-lightsnow.svg">
|
||
|
|
<p>Plain Light Lightsnow</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid clouds">
|
||
|
|
<div class="img-parent weather gradient cloudy">
|
||
|
|
<img class="image" src="SVG/gradient-cloudy.svg">
|
||
|
|
<p>Gradient Cloudy</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient cloud">
|
||
|
|
<img class="image" src="SVG/gradient-cloud.svg">
|
||
|
|
<p>Gradient Cloud</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain cloudy">
|
||
|
|
<img class="image" src="SVG/plain-cloudy.svg">
|
||
|
|
<p>Plain Cloudy</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain cloud">
|
||
|
|
<img class="image" src="SVG/plain-cloud.svg">
|
||
|
|
<p>Plain Cloud</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient stormy">
|
||
|
|
<img class="image" src="SVG/gradient-stormy.svg">
|
||
|
|
<p>Gradient Stormy</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient storm-cloud">
|
||
|
|
<img class="image" src="SVG/gradient-storm-cloud.svg">
|
||
|
|
<p>Gradient Stormcloud</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain stormy">
|
||
|
|
<img class="image" src="SVG/plain-stormy.svg">
|
||
|
|
<p>Plain Stormy</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain storm-cloud">
|
||
|
|
<img class="image" src="SVG/plain-storm-cloud.svg">
|
||
|
|
<p>Plain Stormcloud</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid sun+clouds">
|
||
|
|
<div class="img-parent weather gradient overcast">
|
||
|
|
<img class="image" src="SVG/gradient-overcast.svg">
|
||
|
|
<p>Gradient Overcast</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient partly-cloudy">
|
||
|
|
<img class="image" src="SVG/gradient-partly-cloudy.svg">
|
||
|
|
<p>Gradient Partly Cloudy</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain overcast">
|
||
|
|
<img class="image" src="SVG/plain-overcast.svg">
|
||
|
|
<p>Plain Overcast</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain partly-cloudy">
|
||
|
|
<img class="image" src="SVG/plain-partly-cloudy.svg">
|
||
|
|
<p>Plain Partly Cloudy</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid sun">
|
||
|
|
<div class="img-parent weather gradient sun">
|
||
|
|
<img class="image" src="SVG/gradient-sun.svg">
|
||
|
|
<p>Gradient Sun</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient sun-alt">
|
||
|
|
<img class="image" src="SVG/gradient-sun-alt.svg">
|
||
|
|
<p>Gradient Sun Alt</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain sun">
|
||
|
|
<img class="image" src="SVG/plain-sun.svg">
|
||
|
|
<p>Plain Sun</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain sun-alt">
|
||
|
|
<img class="image" src="SVG/plain-sun-alt.svg">
|
||
|
|
<p>Plain Sun Alt</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid thunderstorms">
|
||
|
|
<div class="img-parent weather gradient blue thunderstorm">
|
||
|
|
<img class="image" src="SVG/gradient-blue-thunderstorm.svg">
|
||
|
|
<p>Gradient Blue Thunderstorm</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient purple thundertorm">
|
||
|
|
<img class="image" src="SVG/gradient-purple-thunderstorm.svg">
|
||
|
|
<p>Gradient Purple Thunderstorm</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain blue thunderstorm">
|
||
|
|
<img class="image" src="SVG/plain-blue-thunderstorm.svg">
|
||
|
|
<p>Plain Blue Thunderstorm</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain purple thunderstorm">
|
||
|
|
<img class="image" src="SVG/plain-purple-thunderstorm.svg">
|
||
|
|
<p>Plain Purple Thunderstorm</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid floods">
|
||
|
|
<div class="img-parent weather gradient blue flood">
|
||
|
|
<img class="image" src="SVG/gradient-blue-flood.svg">
|
||
|
|
<p>Gradient Blue Flood</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather gradient purple flood">
|
||
|
|
<img class="image" src="SVG/gradient-purple-flood.svg">
|
||
|
|
<p>Gradient Purple Flood</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain blue flood">
|
||
|
|
<img class="image" src="SVG/plain-blue-flood.svg">
|
||
|
|
<p>Plain Blue Flood</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain purple flood">
|
||
|
|
<img class="image" src="SVG/plain-purple-flood.svg">
|
||
|
|
<p>Plain Purple Flood</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="image-grid other">
|
||
|
|
<div class="img-parent weather gradient frost">
|
||
|
|
<img class="image" src="SVG/gradient-frost.svg">
|
||
|
|
<p>Gradient Frost</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather plain frost">
|
||
|
|
<img class="image" src="SVG/plain-frost.svg">
|
||
|
|
<p>Plain Frost</p>
|
||
|
|
</div>
|
||
|
|
<div class="img-parent weather portable-roof umbrella">
|
||
|
|
<img class="image" src="SVG/portable-roof.svg">
|
||
|
|
<p>Portable Roof</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script src="icons.js" charset="utf-8"></script>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<!-- Dropdown to choose topic, search -->
|
||
|
|
<!-- Search spaces seperate queries -->
|
||
|
|
<!-- hail, tsunami, tornado, hurricane, wind, fog, mist, heat-wave, blizzard -->
|