Skip to content

Commit

Permalink
Fixed position - Forecast
Browse files Browse the repository at this point in the history 
(Bootstrap 4 columns)
  • Loading branch information
@milicodes
milicodes committed Sep 8, 2021
1 parent 2097a5b commit 0320437
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 62 deletions.
112 changes: 56 additions & 56 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,13 @@ <h1 class="tittle-city" id="show-city">TOKYO</h1>
alt="Image of the weather"
class="icon-weather"
id="icon-weather"
width="250px"
width="300px"
/>
</div>
<!--Space for description-->
<!--Weather Description-->
<div
class="col-10 text-center rotate-text description-text"
class="col-11 text-center rotate-text description-text"
id="description-text"
>
<h4 class="description" id="description-weather">Partly Cloudy</h4>
Expand All @@ -102,63 +102,64 @@ <h4 class="description" id="description-weather">Partly Cloudy</h4>
</div>

<!--Right side-->
<!--Main Information-->
<div class="container width-main-container move-content-up">
<div class="row g-3 changing-position-details">
<!--Date-->
<div class="col-2"></div>
<div class="col-10">
<div class="col-1"></div>
<div class="col-4">
<div class="text-center p-2 today-date">
<h3 class="today-date" id="date">SUNDAY 9:00 PM</h3>
<div class="col-12">
<div class="container width-main-container move-content-up">
<div class="row g-3 changing-position-details">
<!--Date-->
<div class="col-2"></div>
<div class="col-10">
<div class="col-1"></div>
<div class="col-4">
<div class="text-center p-2 today-date">
<h3 class="today-date" id="date">SUNDAY 9:00 PM</h3>
</div>
</div>
</div>
<!--Temperature-->
<div class="col-7"></div>
<div class="col-1"></div>
<div class="col-5">
<div class="changing-position">
<div class="p-6 text-center">
<h1 class="temperature-number" id="temperature-grade">
<span class="temperature-number" id="grade">33</span>&degC
</h1>
<!--Temperature-->
<div class="col-7"></div>
<div class="col-1"></div>
<div class="col-5">
<div class="changing-position">
<div class="p-6 text-center">
<h1 class="temperature-number" id="temperature-grade">
<span class="temperature-number" id="grade">33</span>&degC
</h1>
</div>
</div>
</div>
</div>
<!--Temperature Details-->
<div class="col-6"></div>
<div class="col-2"></div>
<div class="col-5">
<div class="changing-position">
<div class="text-center details-temp">
<p>
<i class="fas fa-tint detail-icon" id="humid-icon"></i
><span class="percentage" id="humidity"> 56% </span>
<i class="fas fa-wind detail-icon" id="wind-icon"></i>
<span class="percentage" id="wind">16 km/h</span>
</p>
<!--Temperature Details-->
<div class="col-6"></div>
<div class="col-2"></div>
<div class="col-5">
<div class="changing-position">
<div class="text-center details-temp">
<p>
<i class="fas fa-tint detail-icon" id="humid-icon"></i
><span class="percentage" id="humidity"> 56% </span>
<i class="fas fa-wind detail-icon" id="wind-icon"></i>
<span class="percentage" id="wind">16 km/h</span>
</p>
</div>
</div>
</div>
</div>
<!--Buttons celsius and fahrenheit-->
<div class="col-7"></div>
<div class="col-5">
<div class="p-1 text-center">
<button
class="btn btn-lg btn-outline-light celsius-fahrenheit"
type="button"
id="celcius"
>
&degC
</button>
<button
class="btn btn-lg btn-outline-light celsius-fahrenheit"
type="button"
id="fahrenheit"
>
&degF
</button>
<!--Buttons celsius and fahrenheit-->
<div class="col-7"></div>
<div class="col-5">
<div class="p-1 text-center">
<button
class="btn btn-lg btn-outline-light celsius-fahrenheit"
type="button"
id="celcius"
>
&degC
</button>
<button
class="btn btn-lg btn-outline-light celsius-fahrenheit"
type="button"
id="fahrenheit"
>
&degF
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -218,8 +219,7 @@ <h5 class="card-title">Sat</h5>
<!--Created by Mili 2021-->
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-9 text-center container-creator">
<div class="col-12 text-center container-creator">
<p class="created-by">
<a
href="https://github.com/milicodes/weather-app-page"
Expand Down
1 change: 1 addition & 0 deletions js/app.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ function showSearchedCity(response) {
descriptionWeather.style.color = `#A4BBFB`;
} else if (colorDescription === `Thunderstorm`) {
document.body.style.backgroundAttachment = `fixed`;
document.body.style.height = `max-content`;
document.body.style.background = `linear-gradient(#a8c0ff, #3f2b96)`;
temperatureNumber.style.backgroundColor = `#6D6CC4`;
cityColor.style.color = `#6D6CC4`;
Expand Down
17 changes: 11 additions & 6 deletions style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ a {
}

body {
height: max-content;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background: #00d2ff; /* fallback for old browsers */
Expand All @@ -30,7 +30,7 @@ body {
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
zoom: 70%;
margin-top: 0px;
margin-bottom: 0px;
margin-bottom: 40rem;
margin-left: 0px;
padding: 0;
background-attachment: fixed;
Expand Down Expand Up @@ -75,10 +75,13 @@ div.date-down {
}

div.move-content-up {
margin-top: -30rem;
margin-top: -31rem;
margin-bottom: 1rem;
position: relative;
}

div.move-city-up {
position: relative;
margin-top: 15rem;
}

Expand Down Expand Up @@ -126,6 +129,8 @@ h4.description {
color: #a4d4ff;
padding: 1rem;
text-transform: capitalize;
margin: 0 auto;
max-width: max-content;
}

div.description-text {
Expand Down Expand Up @@ -211,8 +216,8 @@ p.temp {

div.position-next-days {
position: relative;
width: 30rem;
top: 5rem;
width: 29rem;
margin-top: 4rem;
transform: rotateX(57deg) rotateZ(56deg);
box-shadow: -1px 0 28px 0 rgba(34, 33, 81, 0.01),
28px 28px 28px 0 rgba(34, 33, 81, 0.25);
Expand Down Expand Up @@ -326,7 +331,7 @@ button.fahrenheit {

div.container-creator {
position: relative;
top: 10rem;
top: 5rem;
font-size: 25px;
font-family: "Fredoka One", cursive;
text-align: center;
Expand Down

0 comments on commit 0320437

Please sign in to comment.