Skip to content

Luís Felipe Campos / Teste00-CoffeeShop

Go to a project
Commit c279f737 by Luis Ribeiro
Options

file fix

parent b71bec68
Showing with 569 additions and 561 deletions
.DS_Store
No preview for this file type
css/footer.css 0 → 100644
/* Footer */
footer {
background-color: var(--corQuarta);
width: 100%;
height: auto;
display: inline-flex;
padding: 30px 100px;
justify-content: space-between;
}
footer h3 {
color: var(--corSegunda);
font-weight: normal;
}
.footer__col {
flex-direction: column;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.footer__col ul {
color: var(--corPrimeira);
padding: 0;
margin-top: 0;
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;
flex-direction: row;
padding: 0;
list-style-type: none;
}
.footer__row li {
padding: 0px 12px;
transition: 0.4s;
}
.footer__row li:hover {
transition: 0.4s;
transform: scale(1.08);
filter: brightness(60%);
}
.footer__svg {
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;
}
css/geral.css 0 → 100644
* {
box-sizing: border-box;
font-family: Poppins;
scroll-behavior: smooth;
}
:root {
--corPrimeira: #f5deb3;
--corSegunda: #b88b4a;
--corTerceira: #214e34;
--corQuarta: #122b1d;
--corQuinta: #1D2022;
--corSexta: #FFECD1;
}
html,
body {
margin: 0;
padding: 0;
transition: background 1s;
}
h1 {
font-size: xx-large;
font-weight: bold;
}
/* Dark Mode */
.dark {
background-color: var(--corQuinta);
color: var(--corSexta);
transition: background 0.5s;
}
.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 .figures__img {
filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
}
/* Container */
.main__container {
color: var(--corSegunda);
margin: 0 auto;
padding: 0;
max-width: 1200px;
}
/* Botões */
.button {
font-size: 1em;
border: none;
border-radius: 9999px;
padding: 8px 0px;
transition: 0.5s;
background-color: var(--corTerceira);
}
.button:hover {
background-color: var(--corPrimeira);
transition: 0.5s;
transform: scale(1.08);
border: 1px solid var(--corSegunda);
}
.button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.button a:hover {
color: var(--corSegunda);
}
.button--alt {
font-size: 1em;
border: 1px solid var(--corPrimeira);
border-radius: 9999px;
padding: 8px 0px;
transition: 0.4s;
background-color: var(--corSegunda);
}
.button--alt:hover {
background-color: var(--corPrimeira);
transition: 0.4s;
transform: scale(1.05);
border: 1px solid var(--corSegunda);
}
.button--alt a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.button--alt a:hover {
color: var(--corSegunda);
}
/* Seção voltar ao início */
.btt__link {
background-color: var(--corTerceira);
display: flex;
justify-content: center;
text-align: center;
}
.btt__link a {
text-decoration: none;
font-size: small;
font-weight: normal;
color: var(--corSegunda);
transition: 0.4s;
}
.btt__link a:hover {
color: var(--corPrimeira);
transition: 0.4s;
}
css/header.css 0 → 100644
/* Header */
header {
color: var(--corPrimeira);
background-color: var(--corTerceira);
position: relative;
padding: 10px 170px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
}
.header__logo {
float: left;
font-weight: 600;
font-size: 1.4em;
}
.header__logo:hover {
cursor: default;
}
.header__nav {
width: 100%;
display: inline-block;
}
.header__ul {
float: right;
}
.header__ul a {
color: var(--corPrimeira);
text-decoration: none;
transition: 0.4s;
}
.header__nav li {
display: inline;
padding: 0px 20px;
font-size: larger;
}
.header__ul a:hover {
transition: 0.4s;
color: var(--corSegunda);
}
.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;
}
css/modal.css 0 → 100644
/* Modal */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border-radius: 10px;
z-index: 2;
background-image: url(/images/brooke-cagle-X4RJG4aNi8o-unsplash.jpg);
min-height: 570px;
width: 1200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal__form {
position: absolute;
max-width: 400px;
margin: 20px;
padding: 10px 25px 25px 25px;
right: 0;
background-color: var(--corQuinta);
}
.modal__header {
display: flex;
flex-direction: column;
}
.modal__body {
padding-block-start: 10px;
}
/* Formulário -- Modal */
.modal__form h1 {
color: var(--corSegunda);
font-size: x-large;
}
.modal__form p {
color: var(--corPrimeira);
}
.modal__form label {
padding-inline-start: 14px;
color: var(--corPrimeira);
}
.modal__button--submit {
padding: 10px;
margin-inline-start: 5px;
border-radius: 9999px;
border: none;
background-color: var(--corSegunda);
color: var(--corPrimeira);
transition: 0.4s;
}
.modal__button--submit:hover {
background-color: var(--corPrimeira);
color: var(--corSegunda);
transition: 0.4s;
cursor: pointer;
}
.modal__button--close {
color: var(--corSegunda);
margin: 0px 0px 20px auto;
border: none;
outline: none;
background: none;
height: 20px;
font-weight: bold;
font-size: 1.25rem;
}
.modal__button--close:hover {
color: var(--corPrimeira);
cursor: pointer;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
border-radius: 9999px;
background: #f1f1f1;
}
input[type="text"]:focus,
input[type="password"]:focus {
background-color: #ddd;
outline: none;
}
/* Segundo plano -- Modal */
#modal__background {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.8);
pointer-events: none;
}
#modal__background.active {
opacity: 1;
pointer-events: all;
}
css/primeiraSeção.css 0 → 100644
/* Seção Inicial */
.section__intro {
display: inline-flex;
width: 100%;
margin-top: 100px;
justify-content: space-evenly;
}
.section__text {
margin-top: 150px;
width: 400px;
}
/* T[itulos das seções */
.section__title {
font-size: xx-large;
font-weight: bolder;
text-align: center;
margin-top: 120px;
line-height: 60px;
position: relative;
}
.section__title::after {
content: "";
background: var(--corSegunda);
width: 120px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.section__text p {
font-size: 20px;
padding: 0;
}
\ No newline at end of file
css/quartaSeção.css 0 → 100644
/* Seção Contato */
/* Seção Contato */
.contact {
margin-top: 150px;
margin-bottom: 100px;
position: relative;
}
.contact__background {
width: 100%;
filter: brightness(50%);
object-fit: cover;
height: 400px;
border: none;
}
.contact__text {
color: var(--corPrimeira);
font-size: 1.4em;
top: 30%;
left: 44%;
transform: translate(-30%, -44%);
position: absolute;
}
.contact__button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 1px solid var(--corPrimeira);
font-size: 1em;
border-radius: 9999px;
padding: 8px 0px;
transition: 0.2s;
background-color: var(--corTerceira);
}
.contact__button:hover {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.09);
background-color: var(--corPrimeira);
transition: 0.2s;
border: 1px solid var(--corSegunda);
}
.contact__button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.contact__button a:hover {
color: var(--corSegunda);
}
css/segundaSeção.css 0 → 100644
/* Segunda Seção */
/* Segunda Seção */
.section__follow {
margin-top: 130px;
background-color: var(--corTerceira);
width: 100%;
padding: 30px;
display: inline-flex;
justify-content: space-evenly;
}
.section__follow--background {
box-shadow: 0 0 0 100vmax var(--corTerceira);
clip-path: inset(0 -100vmax);
}
.section__follow__text {
margin-top: 50px;
width: 400px;
}
.section__follow__text p {
color: var(--corPrimeira);
font-size: 20px;
padding: 0;
}
.section__follow__text h1 {
color: var(--corPrimeira);
}
.section__img {
width: 520px;
}
.section__menu {
margin-top: 60px;
width: 100%;
display: inline-flex;
justify-content: space-evenly;
}
.section__menu a {
width: 300px;
}
.section__menu img {
width: 100%;
height: 100%;
border: none;
transition: 0.3s;
border-radius: 5%;
}
.section__menu img:hover {
transition: 0.3s;
filter: opacity(80%);
transform: scale(1.08);
}
css/terceiraSeção.css 0 → 100644
/* Seção Valores */
/* Seção Valores */
.figures__img {
width: 100px;
margin-bottom: 35px;
}
.section__valores {
display: inline-flex;
width: 100%;
margin-top: 60px;
justify-content: space-evenly;
}
.figures {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
index.html
......@@ -5,10 +5,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<link rel="stylesheet" href="css/geral.css">
<link rel="stylesheet" href="css/primeiraSeção.css">
<link rel="stylesheet" href="css/segundaSeção.css">
<link rel="stylesheet" href="css/terceiraSeção.css">
<link rel="stylesheet" href="css/quartaSeção.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/modal.css">
<script defer src="script.js"></script>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<title>Teste00--Coffee Shop</title>
<title>Coffee Shop</title>
</head>
<body>
<header id="home"> <!-- Header -->
......
styles.css deleted 100644 → 0
* {
box-sizing: border-box;
font-family: Poppins;
scroll-behavior: smooth;
}
:root {
--corPrimeira: #f5deb3;
--corSegunda: #b88b4a;
--corTerceira: #214e34;
--corQuarta: #122b1d;
--corQuinta: #1D2022;
--corSexta: #FFECD1;
}
html,
body {
margin: 0;
padding: 0;
transition: background 1s;
}
/* Dark Mode */
.dark {
background-color: var(--corQuinta);
color: var(--corSexta);
transition: background 0.5s;
}
.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 .figures__img {
filter: invert(55%) sepia(91%) saturate(274%) hue-rotate(356deg) brightness(87%) contrast(86%);
}
/* Header */
header {
color: var(--corPrimeira);
background-color: var(--corTerceira);
position: relative;
padding: 10px 170px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
}
.header__logo {
float: left;
font-weight: 600;
font-size: 1.4em;
}
.header__logo:hover {
cursor: default;
}
.header__nav {
width: 100%;
display: inline-block;
}
.header__ul {
float: right;
}
.header__ul a {
color: var(--corPrimeira);
text-decoration: none;
transition: 0.4s;
}
.header__nav li {
display: inline;
padding: 0px 20px;
font-size: larger;
}
.header__ul a:hover {
transition: 0.4s;
color: var(--corSegunda);
}
.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;
}
/* Container */
.main__container {
color: var(--corSegunda);
margin: 0 auto;
padding: 0;
max-width: 1200px;
}
/* Seção Inicial */
.section__intro {
display: inline-flex;
width: 100%;
margin-top: 100px;
justify-content: space-evenly;
}
.section__text {
margin-top: 150px;
width: 400px;
}
h1 {
font-size: xx-large;
font-weight: bold;
}
/* T[itulos das seções */
.section__title {
font-size: xx-large;
font-weight: bolder;
text-align: center;
margin-top: 120px;
line-height: 60px;
position: relative;
}
.section__title::after {
content: "";
background: var(--corSegunda);
width: 120px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.section__text p {
font-size: 20px;
padding: 0;
}
/* Botões */
.button {
font-size: 1em;
border: none;
border-radius: 9999px;
padding: 8px 0px;
transition: 0.5s;
background-color: var(--corTerceira);
}
.button:hover {
background-color: var(--corPrimeira);
transition: 0.5s;
transform: scale(1.08);
border: 1px solid var(--corSegunda);
}
.button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.button a:hover {
color: var(--corSegunda);
}
.button--alt {
font-size: 1em;
border: 1px solid var(--corPrimeira);
border-radius: 9999px;
padding: 8px 0px;
transition: 0.4s;
background-color: var(--corSegunda);
}
.button--alt:hover {
background-color: var(--corPrimeira);
transition: 0.4s;
transform: scale(1.05);
border: 1px solid var(--corSegunda);
}
.button--alt a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.button--alt a:hover {
color: var(--corSegunda);
}
/* Segunda Seção */
.section__follow {
margin-top: 130px;
background-color: var(--corTerceira);
width: 100%;
padding: 30px;
display: inline-flex;
justify-content: space-evenly;
}
.section__follow--background {
box-shadow: 0 0 0 100vmax var(--corTerceira);
clip-path: inset(0 -100vmax);
}
.section__follow__text {
margin-top: 50px;
width: 400px;
}
.section__follow__text p {
color: var(--corPrimeira);
font-size: 20px;
padding: 0;
}
.section__follow__text h1 {
color: var(--corPrimeira);
}
.section__img {
width: 520px;
}
.section__menu {
margin-top: 60px;
width: 100%;
display: inline-flex;
justify-content: space-evenly;
}
.section__menu a {
width: 300px;
}
.section__menu img {
width: 100%;
height: 100%;
border: none;
transition: 0.3s;
border-radius: 5%;
}
.section__menu img:hover {
transition: 0.3s;
filter: opacity(80%);
transform: scale(1.08);
}
/* Seção Valores */
.figures__img {
width: 100px;
margin-bottom: 35px;
}
.section__valores {
display: inline-flex;
width: 100%;
margin-top: 60px;
justify-content: space-evenly;
}
.figures {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Seção Contato */
.contact {
margin-top: 150px;
margin-bottom: 100px;
position: relative;
}
.contact__background {
width: 100%;
filter: brightness(50%);
object-fit: cover;
height: 400px;
border: none;
}
.contact__text {
color: var(--corPrimeira);
font-size: 1.4em;
top: 30%;
left: 44%;
transform: translate(-30%, -44%);
position: absolute;
}
.contact__button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 1px solid var(--corPrimeira);
font-size: 1em;
border-radius: 9999px;
padding: 8px 0px;
transition: 0.2s;
background-color: var(--corTerceira);
}
.contact__button:hover {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.09);
background-color: var(--corPrimeira);
transition: 0.2s;
border: 1px solid var(--corSegunda);
}
.contact__button a {
color: var(--corPrimeira);
text-decoration: none;
padding: 10px 30px;
}
.contact__button a:hover {
color: var(--corSegunda);
}
/* Seção voltar ao início */
.btt__link {
background-color: var(--corTerceira);
display: flex;
justify-content: center;
text-align: center;
}
.btt__link a {
text-decoration: none;
font-size: small;
font-weight: normal;
color: var(--corSegunda);
transition: 0.4s;
}
.btt__link a:hover {
color: var(--corPrimeira);
transition: 0.4s;
}
/* Footer */
footer {
background-color: var(--corQuarta);
width: 100%;
height: auto;
display: inline-flex;
padding: 30px 100px;
justify-content: space-between;
}
footer h3 {
color: var(--corSegunda);
font-weight: normal;
}
.footer__col {
flex-direction: column;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.footer__col ul {
color: var(--corPrimeira);
padding: 0;
margin-top: 0;
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;
flex-direction: row;
padding: 0;
list-style-type: none;
}
.footer__row li {
padding: 0px 12px;
transition: 0.4s;
}
.footer__row li:hover {
transition: 0.4s;
transform: scale(1.08);
filter: brightness(60%);
}
.footer__svg {
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;
}
/* Modal */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border-radius: 10px;
z-index: 2;
background-image: url(images/brooke-cagle-X4RJG4aNi8o-unsplash.jpg);
min-height: 570px;
width: 1200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal__form {
position: absolute;
max-width: 400px;
margin: 20px;
padding: 10px 25px 25px 25px;
right: 0;
background-color: var(--corQuinta);
}
.modal__header {
display: flex;
flex-direction: column;
}
.modal__body {
padding-block-start: 10px;
}
/* Formulário -- Modal */
.modal__form h1 {
color: var(--corSegunda);
font-size: x-large;
}
.modal__form p {
color: var(--corPrimeira);
}
.modal__form label {
padding-inline-start: 14px;
color: var(--corPrimeira);
}
.modal__button--submit {
padding: 10px;
margin-inline-start: 5px;
border-radius: 9999px;
border: none;
background-color: var(--corSegunda);
color: var(--corPrimeira);
transition: 0.4s;
}
.modal__button--submit:hover {
background-color: var(--corPrimeira);
color: var(--corSegunda);
transition: 0.4s;
cursor: pointer;
}
.modal__button--close {
color: var(--corSegunda);
margin: 0px 0px 20px auto;
border: none;
outline: none;
background: none;
height: 20px;
font-weight: bold;
font-size: 1.25rem;
}
.modal__button--close:hover {
color: var(--corPrimeira);
cursor: pointer;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
border-radius: 9999px;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Segundo plano -- Modal */
#modal__background {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.8);
pointer-events: none;
}
#modal__background.active {
opacity: 1;
pointer-events: all;
}
\ 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