Skip to content

Commit

Permalink
TTA FICANDO NAQUELE MODELIN PAPAI
Browse files Browse the repository at this point in the history
  • Loading branch information
@amaraldsn
amaraldsn committed Dec 6, 2023
1 parent 6e27851 commit 81dd85a
Show file tree
Hide file tree
Showing 4 changed files with 251 additions and 5 deletions.
228 changes: 226 additions & 2 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}


/**
* typography
Expand Down Expand Up @@ -96,6 +96,13 @@
cursor: pointer;
}


/* modo escuro para mobile*/
#iconmobile {
width: 33px;
cursor: pointer;
}

/*-----------------------------------*\
#botões do lado da pesquisa
\*-----------------------------------*/
Expand Down Expand Up @@ -1778,13 +1785,50 @@ footer {
*/

@media (min-width: 480px) {

/**
* colors
*/

/**
* #CUSTOM PROPERTY
*/

:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

/**
* typography
*/
Expand Down Expand Up @@ -1902,7 +1946,43 @@ footer {
*/

@media (min-width: 570px) {
:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

}
/**
* #HEADER
*/
Expand Down Expand Up @@ -2009,7 +2089,41 @@ footer {
*/

:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

/**
* typography
*/
Expand Down Expand Up @@ -2165,7 +2279,41 @@ footer {
*/

:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

/**
* typography
*/
Expand Down Expand Up @@ -2529,6 +2677,44 @@ footer {

@media (min-width: 1200px) {

:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

}

/**
* #REUSED STYLE
*/
Expand Down Expand Up @@ -2638,6 +2824,44 @@ footer {

@media (min-width: 1400px) {

:root {
/**
* colors
*/

/* PARTE WHITE*/
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 49%);
--eerie-black: hsl(0, 0%, 13%);
--salmon-pink: hsl(283, 100%, 50%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 33%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(0, 0%, 27%);

/* PARTE BLACK*/

.dark-theme {
--primary-color: hsl(0, 0%, 0%);
--accent-color: hsl(0, 0%, 100%);
--spanish-gray: hsl(0, 0%, 0%);
--sonic-silver: hsl(0, 0%, 100%);
--eerie-black: hsl(283, 100%, 50%);
--salmon-pink: hsl(0, 0%, 100%);
--sandy-brown: hsl(29, 90%, 65%);
--bittersweet: hsl(283, 100%, 50%);
--ocean-green: hsl(0, 100%, 50%);
--davys-gray: hsl(0, 0%, 49%);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 66%);
}

}

/**
* #BASE
*/
Expand Down
Binary file added assets/images/moonmobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/sunmobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 25 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ <h3 class="newsletter-title">Subscribe Newsletter.</h3>
</li>

<li class="panel-list-item">
<a href="#">Camerâs</a>
<a href="#">Câmeras</a>
</li>

<li class="panel-list-item">
Expand Down Expand Up @@ -809,7 +809,7 @@ <h2 class="menu-title">Menu</h2>
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>

<img src="assets/images/moonmobile.png" id="iconmobile">
</ul>

</div>
Expand Down Expand Up @@ -909,7 +909,7 @@ <h2 class="banner-title">New fashion summer sale</h2>


<!--
- CATEGORY
- CATEGORIA - ROLAGENS DOS ICONS PEQUENOS
-->

<div class="category">
Expand Down Expand Up @@ -3640,10 +3640,32 @@ <h2 class="nav-title">Follow Us</h2>


<script>
//DESKTOP MODO LIGHT/DARK

var icon = document.getElementById("icon")

icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")) {
icon.src = "assets/images/sun.png";
}else {
icon.src = "assets/images/moon.png";
}
}

</script>

<script>
//MOBILE MODO LIGHT/DARK
var icon = document.getElementById("iconmobile")

iconmobile.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")) {
icon.src = "assets/images/sunmobile.png";
}else {
icon.src = "assets/images/moonmobile.png";
}
}

</script>
Expand Down

0 comments on commit 81dd85a

Please sign in to comment.