-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (60 loc) · 4.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title>Current Location Weather</title>
</head>
<body class="flex items-center flex-col">
<div class="header h-20 w-full flex justify-between items-center text-white">
<h3 class="ml-2 text-base md:text-2xl">C.L.W</h3>
<p class="location-timezone font-bold text-4xl">...</p>
<p class="date mr-2 text-base md:text-2xl">...</p>
</div>
<div class="flex justify-center items-center">
<div class="main w-full flex flex-col justify-center items-center text-white rounded-2xl mt-5 md:mt-10 mb-10 md:mb-40 mx-2 md:mx-40 z-30">
<div class="first flex flex-col md:flex-row items-center justify-center mt-10 w-full">
<canvas class="icon w-72 md:w-96 md:mr-56"></canvas>
<div class="temperature-description text-2xl md:text-6xl text-center pt-10 md:pt-0 md:mr-28 md:ml-12">
<img src="img/Rolling.svg" alt="roller">
</div>
</div>
<div class="second flex flex-col md:flex-row items-center justify-center my-10 w-full">
<div class="degree-section w-32 relative flex items-center pointer">
<h2 class="temperature-degree text-9xl"></h2>
<div class="toggle flex absolute text-base top-5 -right-16">
<span class="pr-4 text-xl text-black">
°C
</span>
<p class="text-xs opacity-50 pt-1">
←
</p>
</div>
</div>
<div class="extra flex flex-col justify-center items-center mt-5">
<div class="flex flex-row justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M11 10h-11v-2h11c.552 0 1-.448 1-1s-.448-1-1-1c-.403 0-.747.242-.905.587l-1.749-.956c.499-.965 1.494-1.631 2.654-1.631 3.971 0 3.969 6 0 6zm7 7c0-1.656-1.344-3-3-3h-15v2h15c.552 0 1 .448 1 1s-.448 1-1 1c-.403 0-.747-.242-.905-.587l-1.749.956c.499.965 1.494 1.631 2.654 1.631 1.656 0 3-1.344 3-3zm1.014-7.655c.082-.753.712-1.345 1.486-1.345.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5h-20.5v2h20.5c1.932 0 3.5-1.568 3.5-3.5s-1.568-3.5-3.5-3.5c-1.624 0-2.977 1.116-3.372 2.617l1.886.728z"/>
</svg>
<h4 class="wind ml-5"></h4>
</div>
<div class="flex flex-row justify-center items-center mt-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M11.234 14.141c0 .714-.138 1.249-.414 1.608-.276.358-.681.538-1.215.538-.512 0-.907-.184-1.187-.552-.278-.367-.418-.899-.418-1.594 0-1.418.535-2.127 1.606-2.127.524 0 .927.184 1.208.552.28.368.42.893.42 1.575zm-2.061.01c0 .394.035.688.105.882.07.194.182.291.337.291.298 0 .447-.391.447-1.173 0-.776-.149-1.163-.447-1.163-.155 0-.268.095-.337.286-.07.19-.105.483-.105.877zm5.263-2.039l-3.774 6.804h-1.117l3.774-6.804h1.117zm1.564 4.747c0 .711-.138 1.245-.414 1.603-.276.359-.681.538-1.215.538-.512 0-.908-.184-1.187-.552-.279-.368-.419-.897-.419-1.589 0-1.418.535-2.127 1.606-2.127.524 0 .927.184 1.208.552.281.367.421.893.421 1.575zm-2.062.009c0 .394.035.688.105.882.07.194.182.291.337.291.298 0 .447-.391.447-1.173 0-.776-.149-1.163-.447-1.163-.155 0-.268.095-.337.286-.07.191-.105.484-.105.877zm-1.938-11.308c2.725 5.186 6 6.718 6 10.515 0 3.267-2.691 5.925-6 5.925s-6-2.658-6-5.925c0-3.797 3.274-5.327 6-10.515zm0-5.56c-2.333 8.958-8 10.188-8 16.075 0 4.378 3.579 7.925 8 7.925 4.421 0 8-3.547 8-7.925 0-5.887-5.667-7.117-8-16.075z"/>
</svg>
<h4 class="humidity ml-5"></h4>
</div>
</div>
</div>
</div>
</div>
<div class="tree absolute -left-32 -bottom-32">
<img src="img/tree.svg" alt="tree">
</div>
<script src="skycons.js"></script>
<script src="app.js"></script>
</body>
</html>