Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

toggle button #316

Closed
wants to merge 1 commit into from
Closed

toggle button #316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 40 additions & 16 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ body {
/* Scroll is required to see full info */
position: relative;
}

/* .logo {
position: fixed;
top: 20px;
Expand All @@ -31,16 +32,20 @@ body {
}

.logo-img {
max-width: 50px; /* Adjust the maximum width */
max-height: 50px; /* Adjust the maximum height */
max-width: 50px;
/* Adjust the maximum width */
max-height: 50px;
/* Adjust the maximum height */
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}

/* Inside your CSS file (style.css) */

/* Header Text */
Expand Down Expand Up @@ -159,7 +164,7 @@ option:hover,
input.weather-component__search-bar:focus {
transition: 700ms;
box-shadow: 0px 0px 10px rgb(255 255 255 / 50%);

border-radius: 30px 0 0 30px;
}

Expand All @@ -175,6 +180,7 @@ input.weather-component__search-bar:focus {
cursor: pointer;
transition: 0.2s ease-in-out;
}

.weather-component__button-microphone {
margin: 0.5em;
border-radius: 50%;
Expand All @@ -186,8 +192,9 @@ input.weather-component__search-bar:focus {
cursor: pointer;
transition: 0.2s ease-in-out;
}
.button_container{
background-color: white;

.button_container {
background-color: white;
border-radius: 0 30px 30px 0;
display: flex;
}
Expand Down Expand Up @@ -407,13 +414,16 @@ button:focus {
z-index: 3000;
right: 16px;
font-size: 16px;
transform: translateY(-100%); /* Start off the screen */
transition: transform 0.25s ease-in-out; /* Transition for sliding */
transform: translateY(-100%);
/* Start off the screen */
transition: transform 0.25s ease-in-out;
/* Transition for sliding */
}

#toast.show {
visibility: visible;
transform: translateY(0); /* Slide in from the top */
transform: translateY(0);
/* Slide in from the top */
}


Expand Down Expand Up @@ -519,6 +529,7 @@ footer {
margin-top: 20px;
margin-bottom: 0;
}

/* Responsive */

@media only screen and (min-width: 1200px) {
Expand Down Expand Up @@ -553,16 +564,20 @@ footer {
/* border: 2px solid red; */
margin: 1rem 0.15rem 0rem 0.15rem;
}

.nav-component {
height: fit-content;
}

.whatsapp img {
/* margin-top: 20px; */
}

.weather-component__card {
padding: 7px;
height: 460px;
}

.weather-component__card {
margin: 0;
}
Expand All @@ -578,9 +593,9 @@ footer {
}

.label {
width: 85px;
height: 40px;
background-color: #111;
width: 70px;
height: 39px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
border-radius: 50px;
align-items: center;
Expand All @@ -593,26 +608,28 @@ footer {
.ball {
width: 35px;
height: 35px;
background-color: white;
background-color: #3b5b79;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
transform: translateX(45px);
.checkbox:checked+.label .ball {
transform: translateX(30px);
}

.celcius {
color: white;
color: #3b5b79;
font-size: 15px;
font-weight: bold;
}

.farenheit {
color: white;
color: #3b5b79;
font-size: 15px;
font-weight: bold;
}

.link1 {
Expand All @@ -623,22 +640,26 @@ footer {
transition-property: scale();
transition-duration: 0.5s;
}

.link1:hover {
transform: scale(1.2, 1.2);
transition-timing-function: linear;
color: #ffffff;
}

.link2 {
font-weight: 900;
padding: 0.5rem 0.5rem;
box-sizing: border-box;
transition-property: scale();
transition-duration: 0.5s;
}

.link2:hover {
transform: scale(1.2, 1.2);
transition-timing-function: linear;
}

.link3 {
padding: 0.5rem 0.5rem;
box-sizing: border-box;
Expand All @@ -647,11 +668,13 @@ footer {
transition-property: scale();
transition-duration: 0.5s;
}

.link3:hover {
transform: scale(1.2, 1.2);
transition-timing-function: linear;
color: #d62976;
}

.link4 {
padding: 0.5rem 0.5rem;
box-sizing: border-box;
Expand All @@ -660,6 +683,7 @@ footer {
transition-property: scale();
transition-duration: 0.5s;
}

.link4:hover {
transform: scale(1.2, 1.2);
transition-timing-function: linear;
Expand Down
55 changes: 29 additions & 26 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@

<!-- jquery CDN -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand All @@ -42,8 +44,8 @@
<div class="nav-component__celcius-block col-auto">
<input type="checkbox" id="unit" class="checkbox">
<label for="unit" class="label">
<span class="farenheit">F°</span>
<span class="celcius">C°</span>
<span class="farenheit">°F</span>
<span class="celcius">°C</span>
<div class='ball'>
</label>
</div>
Expand Down Expand Up @@ -77,27 +79,28 @@ <h2 class="header-component mt-5"> <span id='date-time'></span></h2>
<datalist id="place" class="weather-component__datalist">
<!-- Content will be generated By Javascript -->
</datalist>
<div class="button_container">
<button class="weather-component__button text-white rounded-circl"
aria-label="click here to search class">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
</path>
</svg>
</button>
<button class="weather-component__button-microphone" aria-label="speak" id="microphone-button">
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
<path
d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
fill="white"></path>
<path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"
fill="white"></path>
</svg>
</button>
</div>
<div class="button_container">
<button class="weather-component__button text-white rounded-circl"
aria-label="click here to search class">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
</path>
</svg>
</button>
<button class="weather-component__button-microphone" aria-label="speak" id="microphone-button">
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
<path
d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
fill="white"></path>
<path
d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"
fill="white"></path>
</svg>
</button>
</div>
</div>
<div id="weather" class="weather-component__data loading">
<h1 id="city" class="weather-component__city-name fw-bold">Weather in ___</h1>
Expand Down Expand Up @@ -197,8 +200,8 @@ <h2 class="textfooter">
</li>
<li>
<a href="https://twitter.com/Lets__Code/" target="_blank">
<i class="fa-brands fa-x-twitter fa-3x link4"></i>
</li>
<i class="fa-brands fa-x-twitter fa-3x link4"></i>
</li>
</ul>
</div>
</div>
Expand Down