Google Like Weather Widget in Pure CSS

Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create an Awesome Google Like Weather Widget which you can see on every Android Smart Phones. To break it down, it basically comprises of 3 things - rounded border, a cloud icon and forward to that the degree text. So that's exactly is what we're going to create. It will be very easy and helpful on how you can edit and place things in CSS. Enjoy Reading!!

Here's a preview-

That being said, let us get started.

Step - 1: Like always, create 2 files - index.html and style.css.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Google like weather widget</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <i class="icon bi bi-cloud-lightning-fill"></i>
  <p>21°C</p>
</div>


</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
  margin: 0;
  padding: 0;
}
body {
  background: #202124;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  color: #fafafa;
  font-family: "Roboto", sans-serif;
  display: flex;
  align-items: center;
  border: 2px solid rgba(242, 248, 255, 0.16);
  border-radius: 5em;
  padding: 0.65em 1em;
  font-size: 1.35rem;
}
.icon {
  margin-right: 0.7em;
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love