Skip to content

Luís Felipe Campos / Teste00-CoffeeShop

Go to a project
Commit a00b30b8 by Luis Ribeiro
Options

mode switch

parent 6e691b57
Showing with 100 additions and 21 deletions
images/moon-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 12C20 7.11149 16.0007 3.13144 11 3C16.6829 8.75775 10.952 18.6176 3 17C4.65938 19.4319 7.77111 21 11 21C13.8836 21 16.3745 19.7215 18 17.7163" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
\ No newline at end of file
index.html
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;1,100;1,200;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script defer src="script.js"></script>
<title>Teste00--Coffee Shop</title> <title>Teste00--Coffee Shop</title>
</head> </head>
<body> <body>
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
<li><a href="#menu">Menu</a></li> <li><a href="#menu">Menu</a></li>
<li><a href="#sobre">Sobre</a></li> <li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li> <li><a href="#contato">Contato</a></li>
<img class="header__img--moon" src="images/moon-svgrepo-com.svg" alt="Moon icon for switch mode" />
</ul> </ul>
</nav> </nav>
</header> </header>
......
script.js 0 → 100644
// Switch mode (light-dark)
let darkswitch = document.querySelector('.header__img--moon');
let body = document.querySelector('body');
darkswitch.onclick = function() {
body.classList.toggle('dark');
}
\ No newline at end of file
styles.css
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: Poppins; font-family: Poppins;
...@@ -7,9 +6,11 @@ ...@@ -7,9 +6,11 @@
:root { :root {
--corPrimeira: #f5deb3; --corPrimeira: #f5deb3;
--corSegunda: #B88B4A; --corSegunda: #b88b4a;
--corTerceira: #214E34; --corTerceira: #214e34;
--corQuarta: #122B1D; --corQuarta: #122b1d;
--corQuinta: #1D2022;
--corSexta: #FFECD1;
} }
html, html,
...@@ -18,10 +19,50 @@ body { ...@@ -18,10 +19,50 @@ body {
padding: 0; padding: 0;
} }
.dark {
background-color: var(--corQuinta);
color: var(--corSexta);
}
.dark header {
background-color: var(--corQuarta);
}
.dark main {
color: var(--corSexta);
}
.dark .section__title::after {
content: "";
background: var(--corSexta);
width: 120px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.dark .section__follow {
background-color: var(--corQuarta);
}
.dark .section__follow--background {
box-shadow: 0 0 0 100vmax var(--corQuarta);
clip-path: inset(0 -100vmax);
}
.dark .figures__img {
filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
}
header { header {
color: var(--corPrimeira); color: var(--corPrimeira);
background-color: var(--corQuarta); background-color: var(--corTerceira);
position: relative;
padding: 10px 170px; padding: 10px 170px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
} }
.header__logo { .header__logo {
...@@ -43,7 +84,7 @@ header { ...@@ -43,7 +84,7 @@ header {
float: right; float: right;
} }
.header__ul a{ .header__ul a {
color: var(--corPrimeira); color: var(--corPrimeira);
text-decoration: none; text-decoration: none;
transition: 0.4s; transition: 0.4s;
...@@ -60,7 +101,22 @@ header { ...@@ -60,7 +101,22 @@ header {
color: var(--corSegunda); color: var(--corSegunda);
} }
.main__container{ .header__img--moon {
width: 30px;
float: right;
margin-inline-start: 20px;
filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
brightness(112%) contrast(92%);
transition: 0.4s;
}
.header__img--moon:hover {
cursor: pointer;
filter: invert(53%) sepia(7%) saturate(3064%) hue-rotate(356deg) brightness(108%) contrast(80%);
transition: 0.4s;
}
.main__container {
color: var(--corSegunda); color: var(--corSegunda);
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
...@@ -94,7 +150,7 @@ h1 { ...@@ -94,7 +150,7 @@ h1 {
} }
.section__title::after { .section__title::after {
content: ''; content: "";
background: var(--corSegunda); background: var(--corSegunda);
width: 120px; width: 120px;
height: 5px; height: 5px;
...@@ -162,11 +218,10 @@ h1 { ...@@ -162,11 +218,10 @@ h1 {
color: var(--corSegunda); color: var(--corSegunda);
} }
.section__follow { .section__follow {
margin-top: 130px; margin-top: 130px;
background-color: var(--corTerceira); background-color: var(--corTerceira);
width: 100%; width: 100%;
padding: 30px; padding: 30px;
display: inline-flex; display: inline-flex;
justify-content: space-evenly; justify-content: space-evenly;
...@@ -198,7 +253,7 @@ h1 { ...@@ -198,7 +253,7 @@ h1 {
.section__menu { .section__menu {
margin-top: 60px; margin-top: 60px;
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
...@@ -248,7 +303,7 @@ h1 { ...@@ -248,7 +303,7 @@ h1 {
.contact__background { .contact__background {
width: 100%; width: 100%;
filter:brightness(50%); filter: brightness(50%);
object-fit: cover; object-fit: cover;
height: 400px; height: 400px;
border: none; border: none;
...@@ -259,14 +314,14 @@ h1 { ...@@ -259,14 +314,14 @@ h1 {
font-size: 1.4em; font-size: 1.4em;
top: 30%; top: 30%;
left: 44%; left: 44%;
transform: translate(-30%,-44%); transform: translate(-30%, -44%);
position: absolute; position: absolute;
} }
.contact__button { .contact__button {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
position: absolute; position: absolute;
border: 1px solid var(--corPrimeira); border: 1px solid var(--corPrimeira);
font-size: 1em; font-size: 1em;
...@@ -279,7 +334,7 @@ h1 { ...@@ -279,7 +334,7 @@ h1 {
.contact__button:hover { .contact__button:hover {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%) scale(1.09); transform: translate(-50%, -50%) scale(1.09);
background-color: var(--corPrimeira); background-color: var(--corPrimeira);
transition: 0.2s; transition: 0.2s;
border: 1px solid var(--corSegunda); border: 1px solid var(--corSegunda);
...@@ -297,7 +352,7 @@ h1 { ...@@ -297,7 +352,7 @@ h1 {
.btt__link { .btt__link {
background-color: var(--corTerceira); background-color: var(--corTerceira);
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
} }
...@@ -333,7 +388,7 @@ footer h3 { ...@@ -333,7 +388,7 @@ footer h3 {
flex-direction: column; flex-direction: column;
display: flex; display: flex;
align-content: flex-start; align-content: flex-start;
justify-content:flex-start; justify-content: flex-start;
} }
.footer__col ul { .footer__col ul {
...@@ -343,6 +398,16 @@ footer h3 { ...@@ -343,6 +398,16 @@ footer h3 {
list-style-type: none; list-style-type: none;
} }
.footer__col li {
transition: 0.3s;
}
.footer__col li:hover {
color: var(--corSegunda);
cursor: pointer;
transition: 0.3s;
}
.footer__row ul { .footer__row ul {
display: inline-flex; display: inline-flex;
margin-top: 80px; margin-top: 80px;
...@@ -363,10 +428,10 @@ footer h3 { ...@@ -363,10 +428,10 @@ footer h3 {
} }
.footer__svg { .footer__svg {
filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg) brightness(112%) filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
contrast(92%); brightness(112%) contrast(92%);
padding: 2.8px; padding: 2.8px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment