Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
Luís Felipe Campos
/
Teste00-CoffeeShop
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
a00b30b8
authored
2 years ago
by
Luis Ribeiro
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
mode switch
parent
6e691b57
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
100 additions
and
21 deletions
+100
-21
images/moon-svgrepo-com.svg
+5
-0
index.html
+2
-0
script.js
+8
-0
styles.css
+85
-21
No files found.
images/moon-svgrepo-com.svg
0 → 100644
View file @
a00b30b8
<?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
This diff is collapsed.
Click to expand it.
index.html
View file @
a00b30b8
...
...
@@ -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>
...
...
This diff is collapsed.
Click to expand it.
script.js
0 → 100644
View file @
a00b30b8
// 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
This diff is collapsed.
Click to expand it.
styles.css
View file @
a00b30b8
*
{
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
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment