Skip to content

Commit

Permalink
Merge pull request #11 from nandit27/components
Browse files Browse the repository at this point in the history 
Added Required Components
  • Loading branch information
@Vatsal2054
Vatsal2054 authored Oct 20, 2024
2 parents 5f0a0ba + 0e60304 commit 5554c82
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 48 deletions.
213 changes: 176 additions & 37 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,15 @@ body {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 80px;
margin-bottom: 80px;
margin: 40px auto;
}

header {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 30px;
}

.search-box, .features-box {
Expand All @@ -36,13 +43,60 @@ body {
background-color: #e6f3ff;
}

.city-info {
text-align: center;
margin-bottom: 40px; /* Increased margin */
}

#city-name {
color: #2193b0;
font-size: 1.8em;
margin: 0;
}

#current-date {
color: #555;
font-size: 1em;
margin: 15px 0 0; /* Increased top margin */
}

#change-city-btn {
padding: 10px 20px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
background-color: #2193b0;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#change-city-btn:hover {
background-color: #1c7a94;
}

main section {
background-color: #f0f8ff;
border-radius: 15px;
padding: 25px;
margin-bottom: 40px; /* Increased margin */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, background-color 0.3s ease;
}

main section:hover {
transform: translateY(-5px);
background-color: #e6f3ff;
}

h1 {
color: #2193b0;
margin-bottom: 20px;
text-align: center;
font-size: 3.5em;
font-size: 2.5em;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
margin: 0;
}

p {
Expand Down Expand Up @@ -98,60 +152,126 @@ h2 {
font-weight: 600;
}

ul {
list-style-type: none;
padding: 0;
h3 {
color: #2193b0;
margin-bottom: 15px;
font-size: 1.5em;
font-weight: 600;
}

li {
margin-bottom: 12px;
footer {
text-align: center;
color: #555;
font-size: 0.9em;
margin-top: 30px;
}

.hidden {
display: none;
}

#weather-data {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

#weather-data.visible {
opacity: 1;
transform: translateY(0);
}

.weather-details {
display: flex;
align-items: center;
font-size: 1.1em;
font-weight: 300;
justify-content: space-around;
padding: 20px;
flex-wrap: wrap;
}

li:before {
content: "✓";
.weather-icon {
color: #2193b0;
font-weight: bold;
margin-right: 10px;
background-color: #e0f7fa;
width: 24px;
height: 24px;
border-radius: 50%;
margin-bottom: 15px;
}

.weather-text {
text-align: center;
}

.temperature {
font-size: 2.5em;
font-weight: 600;
color: #2193b0;
margin: 0;
}

.description {
font-size: 1.2em;
color: #555;
margin: 5px 0 0;
}

.forecast-container {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
h1 {
font-size: 2em;
}
.forecast-day {
text-align: center;
padding: 10px;
background-color: rgba(33, 147, 176, 0.1);
border-radius: 10px;
margin: 5px;
flex: 1;
min-width: 80px;
}

.container {
padding: 15px;
}
.forecast-day p {
margin: 5px 0;
}

.search-box, .features-box {
padding: 20px;
}
.forecast-day i {
font-size: 1.5em;
color: #2193b0;
margin: 10px 0;
}

.detail-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.detail-item i {
font-size: 1.5em;
color: #2193b0;
margin-right: 10px;
}

@media screen and (max-width: 768px) {
.container {
width: 95%;
padding: 20px;
margin: 20px auto;
}

h1 {
font-size: 2.5em;
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.3em;
}

p {
font-size: 1em;
}

.search-input {
flex-direction: column;
}
Expand All @@ -169,11 +289,30 @@ li:before {
#search-btn {
border-radius: 25px;
}
h2 {
font-size: 1.5em;

.weather-details {
flex-direction: column;
}

li {
font-size: 1em;
.forecast-day {
min-width: calc(50% - 10px);
}
}

@media screen and (max-width: 480px) {
.container {
padding: 15px;
}

h1 {
font-size: 1.8em;
}

.search-box, .features-box {
padding: 20px;
}

.forecast-day {
min-width: calc(100% - 10px);
}
}
21 changes: 10 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Weather.io</title>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-cloud-sun"></i> Weather.io</h1>
</header>

<div class="search-box">
<h1>Weather.io</h1>
<p>Experience the power of precise weather forecasting at your fingertips. Weather.io brings you real-time, accurate weather information from around the globe. Whether you're planning a trip, preparing for your day, or just curious about the conditions outside, we've got you covered with detailed forecasts and user-friendly features.</p>
<h2><i class="fas fa-search-location"></i> Enter a City</h2>
<div class="search-input">
<input type="text" id="city-input" placeholder="Enter city name">
<button id="search-btn">Search</button>
</div>
</div>
<div class="features-box">
<h2>Features</h2>
<ul>
<li>Real-time weather data</li>
<li>5-day forecast</li>
<li>Temperature, humidity, and wind information</li>
<li>Beautiful weather icons</li>
</ul>
</div>

<footer>
<p>&copy; 2023 Weather.io. All rights reserved.</p>
</footer>
</div>

<script src="./index.js"></script>
Expand Down
60 changes: 60 additions & 0 deletions weather_info.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Weather Information</title>
</head>
<body>
<div class="container">
<div id="weather-data" class="visible">
<div class="city-info">
<h2 id="city-name">City Name</h2>
<p id="current-date">Day, Current Date</p>
</div>

<main>
<section class="current-weather">
<h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
<div id="weather-info" class="weather-details">
<div class="weather-icon">
<i id="weather-icon" class="fas fa-sun fa-4x"></i>
</div>
<div class="weather-text">
<p id="temperature" class="temperature">25°C</p>
<p id="description" class="description">Sunny</p>
</div>
</div>
</section>

<section class="forecast">
<h3><i class="fas fa-calendar-alt"></i> 5-Day Forecast</h3>
<div id="forecast-info" class="forecast-container">
<!-- Forecast info will be populated here -->
</div>
</section>

<section class="rain-humidity">
<h3><i class="fas fa-tint"></i> Rain & Humidity</h3>
<div id="rain-humidity-info" class="weather-details">
<div class="detail-item">
<i class="fas fa-umbrella"></i>
<p id="chance-of-rain">Chance of Rain: 20%</p>
</div>
<div class="detail-item">
<i class="fas fa-water"></i>
<p id="humidity">Humidity: 60%</p>
</div>
</div>
</section>
</main>
</div>

<footer>
<p>&copy; 2023 Weather.io. All rights reserved.</p>
</footer>
</div>
</body>
</html>

0 comments on commit 5554c82

Please sign in to comment.