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 @@
<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 rel="stylesheet" href="styles.css" />
<script defer src="script.js"></script>
<title>Teste00--Coffee Shop</title>
</head>
<body>
......@@ -17,6 +18,7 @@
<li><a href="#menu">Menu</a></li>
<li><a href="#sobre">Sobre</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>
</nav>
</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;
font-family: Poppins;
......@@ -7,9 +6,11 @@
:root {
--corPrimeira: #f5deb3;
--corSegunda: #B88B4A;
--corTerceira: #214E34;
--corQuarta: #122B1D;
--corSegunda: #b88b4a;
--corTerceira: #214e34;
--corQuarta: #122b1d;
--corQuinta: #1D2022;
--corSexta: #FFECD1;
}
html,
......@@ -18,10 +19,50 @@ body {
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 {
color: var(--corPrimeira);
background-color: var(--corQuarta);
background-color: var(--corTerceira);
position: relative;
padding: 10px 170px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
}
.header__logo {
......@@ -43,7 +84,7 @@ header {
float: right;
}
.header__ul a{
.header__ul a {
color: var(--corPrimeira);
text-decoration: none;
transition: 0.4s;
......@@ -60,7 +101,22 @@ header {
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);
margin: 0 auto;
padding: 0;
......@@ -94,7 +150,7 @@ h1 {
}
.section__title::after {
content: '';
content: "";
background: var(--corSegunda);
width: 120px;
height: 5px;
......@@ -162,11 +218,10 @@ h1 {
color: var(--corSegunda);
}
.section__follow {
margin-top: 130px;
background-color: var(--corTerceira);
width: 100%;
width: 100%;
padding: 30px;
display: inline-flex;
justify-content: space-evenly;
......@@ -198,7 +253,7 @@ h1 {
.section__menu {
margin-top: 60px;
width: 100%;
width: 100%;
display: inline-flex;
justify-content: space-evenly;
}
......@@ -248,7 +303,7 @@ h1 {
.contact__background {
width: 100%;
filter:brightness(50%);
filter: brightness(50%);
object-fit: cover;
height: 400px;
border: none;
......@@ -259,14 +314,14 @@ h1 {
font-size: 1.4em;
top: 30%;
left: 44%;
transform: translate(-30%,-44%);
transform: translate(-30%, -44%);
position: absolute;
}
.contact__button {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
position: absolute;
border: 1px solid var(--corPrimeira);
font-size: 1em;
......@@ -279,7 +334,7 @@ h1 {
.contact__button:hover {
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1.09);
transform: translate(-50%, -50%) scale(1.09);
background-color: var(--corPrimeira);
transition: 0.2s;
border: 1px solid var(--corSegunda);
......@@ -297,7 +352,7 @@ h1 {
.btt__link {
background-color: var(--corTerceira);
display: flex;
display: flex;
justify-content: center;
text-align: center;
}
......@@ -333,7 +388,7 @@ footer h3 {
flex-direction: column;
display: flex;
align-content: flex-start;
justify-content:flex-start;
justify-content: flex-start;
}
.footer__col ul {
......@@ -343,6 +398,16 @@ footer h3 {
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 {
display: inline-flex;
margin-top: 80px;
......@@ -363,10 +428,10 @@ footer h3 {
}
.footer__svg {
filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg) brightness(112%)
contrast(92%);
filter: invert(84%) sepia(8%) saturate(1561%) hue-rotate(338deg)
brightness(112%) contrast(92%);
padding: 2.8px;
background-color: rgb(0, 0, 0);
border: none;
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