मौसम ऐप

अनुशंसित

22 November 2024

ऐप एचटीएमएल कार्ड डाउनलोड करें

HTML

<div class="container">
  <div class="app-container">
    <div class="app-top-bar">
      <button class="button button-small">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h1 class="app-heading">Weather Stats</h1>
    </div>
    <div class="app-content">
      <button class="button button-block">
        <span class="subtle">Period</span> <span>Last 30 days</span> <div class="button button-small"><i class="fas fa-chevron-right"></i></div>
      </button>
      <div class="button button-dial">
        
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        
        <div class="button-dial-top"></div>
        <div class="button-dial-label">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.333,68.349V11.111C60.333,4.984,55.349,0,49.222,0c-6.126,0-11.111,4.984-11.111,11.111v57.237   c-4.15,3.323-6.667,8.397-6.667,13.874c0,9.802,7.975,17.777,17.777,17.777C59.024,100,67,92.024,67,82.223   C67,76.746,64.482,71.672,60.333,68.349z M44.778,48.363h4.444v-4.444h-4.444V35.03h4.444v-4.444h-4.444v-8.889h4.444v-4.444   h-4.444v-6.142c0-2.455,1.99-4.444,4.444-4.444c2.455,0,4.445,1.989,4.445,4.444v41.111h-8.889V48.363z"/></g></svg>
          7°F
        </div>
      </div>
      <div class="flex-button-container">
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="snowflake" class="color-cool" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z"></path></svg>
          Cool
        </button>
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fire-alt" class="color-warm" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z"></path></svg>
          Warm
        </button>
      </div>
      <button class="button button-link">
        Update Settings
      </button>
    </div>
  </div>
  <div class="app-container" data-theme="dark">
    <div class="app-top-bar">
      <button class="button button-small">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h1 class="app-heading">Weather Stats</h1>
    </div>
    <div class="app-content">
      <button class="button button-block">
        <span class="subtle">Period</span> <span>Last 30 days</span> <div class="button button-small"><i class="fas fa-chevron-right"></i></div>
      </button>
      <div class="button button-dial">
        
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        
        <div class="button-dial-top"></div>
        <div class="button-dial-label">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.333,68.349V11.111C60.333,4.984,55.349,0,49.222,0c-6.126,0-11.111,4.984-11.111,11.111v57.237   c-4.15,3.323-6.667,8.397-6.667,13.874c0,9.802,7.975,17.777,17.777,17.777C59.024,100,67,92.024,67,82.223   C67,76.746,64.482,71.672,60.333,68.349z M44.778,48.363h4.444v-4.444h-4.444V35.03h4.444v-4.444h-4.444v-8.889h4.444v-4.444   h-4.444v-6.142c0-2.455,1.99-4.444,4.444-4.444c2.455,0,4.445,1.989,4.445,4.444v41.111h-8.889V48.363z"/></g></svg>
          7°F
        </div>
      </div>
      <div class="flex-button-container">
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="snowflake" class="color-cool" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z"></path></svg>
          Cool
        </button>
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fire-alt" class="color-warm" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z"></path></svg>
          Warm
        </button>
      </div>
      <button class="button button-link">
        Update Settings
      </button>
    </div>
  </div>
</div>

CSS

:root {
  --font-color: #222;
  --bg-color: #f2f3f7;
  --button-bg-color: #f2f3f7;
  --button-shadow:
    -6px -6px 8px rgba(255, 255, 255, 0.9),
    5px 5px 8px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] {
  --font-color: #fff;
  --bg-color: #181818;
  --button-bg-color: #121212;
  --button-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 0 10px 10px rgba(255, 255, 255, 0.005),
    2px 2px 8px rgba(60, 60, 60, 0.1);
}

html {
  box-sizing: border-box;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: var(--font-color);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f2f2f2;
}

.color-cool {
  color: #077dfe;
}

.color-warm {
  color: #ff7a00;
}

.container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 25px;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width:800px) {
  .container {
    flex-direction: row;
  }
}

.app-container {
  background-color: var(--bg-color);
  border-radius: 40px;
  box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, .25);
  display: block;
  flex: 1;
  min-height: 500px;
  max-width: 350px;
  margin-bottom: 25px;
  overflow: hidden;
  padding: 30px;
}

.app-top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.app-heading {
  color: var(--font-color);
  display: block;
  flex: 1;
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  text-align: center;
}

button {
	border: 0;
	&:focus {
		border: none;
		outline: 0 !important;
		outline-style: none;
	}
}

.button {
  color: var(--font-color);
  position: relative;
  border-radius: 15px;
  background: var(--button-bg-color);
  font-weight: 700;
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  
  &.button-link {
    color: #067CF8;
    display: block;
    font-size: 17px;
    margin: 30px 0 0;
    padding: 20px 0;
    width: 100%;
  }
  
  &.button-small {
    color: #6D6E74;
    font-size: 22px;
    line-height: 40px;
    width: 40px;
    height: 40px;
  }
  
  &.button-large {
    display: flex;
    font-size: 20px;
    flex-direction: column;
    padding: 15px;
    text-align: left;
    width: 45%;
    
    & svg {
      margin-bottom: 40px;
      width: 30px;
    }
  }
}
  
.button-dial {
  border-radius: 50%;
  display: flex;
  height: 270px;
  margin: 35px auto;
  align-items: center;
  justify-content: center;
  width: 270px;
}

.button-dial-top {
  background: var(--button-bg-color);
  box-shadow: var(--button-shadow);
  border-radius: 50%;
  width: 70%;
  height: 70%;
  margin: 0 auto;
  position: absolute;
  top: 15%;
  left: 15%;
  text-align: center;
  z-index: 5;
}

.button-dial-label {
  color: #067CF8;
  font-size: 28px;
  fill: #067CF8;
  position: relative;
  z-index: 10;
}

.button-dial-spoke {
  background-color: rgba(96, 171, 254, 0.6);
  display: block;
  height: 2px;
  width: 83%;
  position: absolute;
  margin: 0 auto;
  z-index: 5;
  top: 50%;
  
  &:nth-child(2) {
    transform: rotate(30deg);
  }
  &:nth-child(3) {
    transform: rotate(60deg);
  }
  &:nth-child(4) {
    transform: rotate(90deg);
  }
  &:nth-child(5) {
    transform: rotate(120deg);
  }
  &:nth-child(6) {
    transform: rotate(150deg);
  }
}

.button-block {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px 24px;
  width: 100%;
  
  span {
    font-size: 16px;
  }
}

.subtle {
  color: #6D6E74;
}

.flex-button-container {
  display: flex;
  justify-content: space-between;
}

मौसम ऐप

अनुशंसित

ऐप कार्ड डाउनलोड करें

ऐप वेबसाइट टेम्पलेट

ऐप एचटीएमएल कार्ड डाउनलोड करें

HTML

CSS

JS

अनुशंसित

ऐप कार्ड डाउनलोड करें

ऐप वेबसाइट टेम्पलेट

ऐप एचटीएमएल कार्ड डाउनलोड करें

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS