Skip to content

Commit 54e5341

Browse files
nidhi-singh04nidhi-singh04
committed
Added weather card UI
1 parent e1f0ec7 commit 54e5341

File tree

5 files changed

+84
-0
lines changed

5 files changed

+84
-0
lines changed

‎Cards/Card_01/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Weather Widget UI Design
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align ="left">
5+
<a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a>
6+
<a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a>
7+
</p>
8+
9+
### Preview
10+
![image](https://user-images.githubusercontent.com/77065920/149537883-e29e431e-defd-46eb-9c9a-df0089085cf9.png)

‎Cards/Card_01/assets/3.png

14.5 KB
Loading

‎Cards/Card_01/assets/mumbai1.png

23.2 KB
Loading

‎Cards/Card_01/code/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Weather Widget UI</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="left-side-card">
13+
<div class="date">
14+
Monday, 20 Aug 2018
15+
</div>
16+
<div class="city">
17+
Mumbai
18+
</div>
19+
<div class="cloud">
20+
<img src="./images/3.png" alt="">
21+
27&deg;
22+
</div>
23+
</div>
24+
<div class="right-side-card">
25+
<img src="./images/mumbai1.png" alt="">
26+
</div>
27+
28+
</div>
29+
</body>
30+
</html>

‎Cards/Card_01/code/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
*{
2+
padding: 0px;
3+
margin: 0px;
4+
outline: none;
5+
}
6+
html,body{
7+
font-family: 'Roboto', sans-serif;
8+
overflow: hidden;
9+
background: #d22222;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
.cloud img{
15+
width: 60px;
16+
}
17+
.container{
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
background-color: #fcfdfd;
22+
width: 355px;
23+
height: 125px;
24+
margin: 150px auto;
25+
border-radius: 9px;
26+
padding: 25px;
27+
box-shadow: 0px 31px 35px -26px #080c21;
28+
}
29+
.date{
30+
font-size: 14px;
31+
font-weight: bold;
32+
color: rgba(0,0,0,0.5);
33+
}
34+
.city{
35+
font-size: 21px;
36+
font-weight: bold;
37+
text-transform: uppercase;
38+
padding-top: 5px;
39+
color: rgba(0,0,0,0.7);
40+
}
41+
.cloud{
42+
font-size: 71px;
43+
color: rgba(0,0,0,0.9);
44+
}

0 commit comments

Comments
 (0)