diff --git a/css/Header_and_Footer.css b/css/Header_and_Footer.css
new file mode 100644
index 0000000..fb2bb0a
--- /dev/null
+++ b/css/Header_and_Footer.css
@@ -0,0 +1,651 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;700&display=swap");
+
+/*------------Animações------------*/
+
+@keyframes growCircle {
+ from {
+ width: 0px;
+ height: 0px;
+ }
+ to {
+ width: 6px;
+ height: 6px;
+ }
+}
+
+/*------------Variaveis------------*/
+
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+main {
+ margin-left: 20px;
+ margin-right: 20px;
+}
+
+/*------------Header------------*/
+
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+
+ width: 100%;
+ padding: 6px 20px;
+
+ background-color: var(--color-Primary-Light);
+ border-radius: 0 0px 20px 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.logo_icon {
+ position: relative;
+
+ width: 135px;
+ height: 54px;
+}
+
+/*---Idioma_Select---*/
+
+.Idioma_Select {
+ border: none;
+ margin-left: 20px;
+ font-size: 16px;
+ color: var(--color-Accent);
+}
+
+.Idioma_Select:focus {
+ outline: none;
+}
+
+/*---Header-Menu_options---*/
+
+.Menu_options {
+ position: relative;
+ display: flex;
+}
+
+.Menu_options ul {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.Menu_options li {
+ position: relative;
+ display: inline-block;
+ list-style: none;
+}
+
+.Menu_options li a {
+ display: inline-block;
+ text-decoration: none;
+
+ font-size: 16px;
+ margin-left: 20px;
+
+ color: var(--color-Accent);
+}
+
+.Menu_options li a:hover {
+ color: var(--color-Accent-darker);
+}
+
+.Menu_options li a::before {
+ content: "";
+ position: absolute;
+ transform-origin: center;
+
+ height: 2px;
+ transform: scaleX(0);
+ bottom: -4px;
+ left: 10px;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.Menu_options li a:hover::before {
+ transform: scaleX(0.5);
+ width: 100%;
+}
+
+/*---Header_buttons---*/
+
+.header_Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ padding: 0px 20px;
+ margin-left: 20px;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.header_Button:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+/*---Header-Others---*/
+
+.Login_link {
+ font-weight: bold;
+ color: var(--color-Accent);
+}
+
+.vertical-line {
+ border: none;
+
+ height: 20px;
+ margin-left: 20px;
+
+ border-left: 1px solid black;
+}
+
+/*------------Footer------------*/
+
+footer {
+ width: 100%;
+ margin-top: 20px;
+ height: auto;
+ border-radius: 20px 20px 0 0;
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5);
+ background-color: var(--color-Primary-Light);
+}
+
+/*---Footer-divisor---*/
+
+.Divisor_do_Footer {
+ display: grid;
+
+ grid-template-columns: repeat(4, 1fr);
+ padding: 3rem 3.5rem;
+}
+
+.Divisor_do_Footer p {
+ margin-top: 5px;
+}
+
+/*---Footer-Social_links_footer---*/
+
+.texto_motivacao {
+ width: 200px;
+ word-break: break;
+ margin-left: 1.5rem;
+}
+
+.Social_links_footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+}
+
+.Social_links_footer ul {
+ position: relative;
+ display: flex;
+ align-items: center;
+
+ color: black;
+}
+
+.Social_links_footer li {
+ list-style: none;
+}
+
+.icons_sociais {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ list-style: none;
+
+ height: 2rem;
+ width: 2rem;
+ margin-left: 1.5rem;
+ margin-top: 2rem;
+ border-radius: 50%;
+ height: 2rem;
+ width: 2rem;
+
+ color: var(--color-Primary-Light);
+ transition: transform 0.3s ease;
+}
+
+.icons_sociais:hover {
+ transform: translateY(-10px);
+}
+
+#Instagram_icon {
+ background: linear-gradient(#515bd4, #dd2a7b, #f58529);
+}
+
+#Facebook_icon {
+ background-color: #4267b3;
+}
+
+#Whatsapp_icon {
+ background-color: #25d366;
+}
+
+/*---Footer-Footer_links---*/
+
+.Sobre_empresa ul {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ margin-left: 3rem;
+ gap: 0.75rem;
+
+ color: black;
+}
+
+.Ferramentas ul {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ margin-left: 1rem;
+ gap: 0.75rem;
+
+ color: black;
+}
+
+.Footer_links li {
+ position: relative;
+ list-style: none;
+}
+
+.Footer_links li a {
+ text-decoration: none;
+
+ color: var(--color-Accent);
+ transition: color 0.3s ease;
+}
+
+.Footer_links li a:hover {
+ color: var(--color-Accent-darker);
+}
+
+.Footer_links li a:hover::before {
+ content: "";
+ position: absolute;
+
+ top: 50%;
+ left: -15px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+
+ background-color: var(--color-Accent-darker);
+ animation: growCircle 0.2s ease forwards;
+}
+
+/*---Footer-newsletter---*/
+
+.Newsletter ul {
+ display: flex;
+ flex-direction: column;
+
+ gap: 1.5rem;
+
+ color: black;
+}
+
+.Newsletter li {
+ list-style: none;
+}
+
+#email_box {
+ outline: none;
+
+ height: 30px;
+ border-radius: 28px 0 0 28px;
+ padding-left: 10px;
+ box-sizing: 1px;
+
+ border: 1px solid var(--color-Accent);
+ background-color: var(--color-background-Light);
+}
+
+#email_button {
+ border: none;
+ cursor: pointer;
+
+ width: 30px;
+ height: 30px;
+ border-radius: 0 28px 28px 0;
+
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.email_button:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+/*---Footer-Legal---*/
+
+.Legal {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 5rem;
+
+ background-color: var(--color-Primary-Light);
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+}
+
+.Legal ul {
+ display: grid;
+
+ margin-right: 4rem;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.Legal li {
+ position: relative;
+ list-style: none;
+}
+
+.Legal li a {
+ text-decoration: none;
+
+ color: var(--color-Accent);
+}
+
+.Legal li a:hover {
+ color: var(--color-Accent-darker);
+}
+
+.Legal li a:hover::before {
+ content: "";
+ position: absolute;
+
+ top: 50%;
+ left: -15px;
+ transform: translateY(-50%);
+ border-radius: 50%;
+
+ background-color: var(--color-Accent-darker);
+ animation: growCircle 0.2s ease forwards;
+}
+
+/*---Header-Responsive---*/
+
+.background_ambuigue {
+ display: none;
+}
+
+@media screen and (min-width: 981px) {
+ .ambuigue_button,
+ .background_ambuigue {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 980px) {
+ .Menu_options_list li,
+ .Signup_button,
+ .background_ambuigue {
+ display: none;
+ }
+
+ .ambuigue_Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ padding: 5px 20px;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+ }
+
+ .ambuigue_Button:hover {
+ background-color: var(--color-Accent-darker);
+ }
+
+ .background_ambuigue {
+ z-index: 9999;
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ .menu_ambuigue {
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: 0 0 28px 28px;
+ background-color: var(--color-Primary-Light);
+ z-index: 9999;
+ }
+
+ .register_ambuigue {
+ display: flex;
+ width: 100%;
+ height: 70px;
+ justify-content: space-between;
+ align-items: center;
+
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ }
+
+ .register_ambuigue ul {
+ align-items: center;
+ display: flex;
+ list-style: none;
+ }
+
+ .register_ambuigue li a {
+ margin-left: 20px;
+ text-decoration: none;
+ }
+
+ .other_options_ambuigue {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ place-items: center;
+ }
+
+ .other_options_ambuigue ul {
+ margin-top: 10px;
+ display: grid;
+ text-align: center;
+ place-items: center;
+ list-style: none;
+ }
+
+ .other_options_ambuigue li {
+ text-decoration: none;
+ margin-top: 20px;
+
+ margin-bottom: 20px;
+ }
+
+ .other_options_ambuigue li a {
+ text-decoration: none;
+ padding: 10px 100px 10px 100px;
+ }
+
+ .header_logo_icon {
+ position: relative;
+ display: block;
+ max-height: 60%;
+ max-width: 25%;
+ margin: 20px 0 10px 20px;
+ }
+}
+@media screen and (min-width: 520px) {
+ .other_options_ambuigue li a {
+ padding: 10px 200px 10px 200px;
+ }
+}
+
+@media screen and (max-width: 520px) {
+ .other_options_ambuigue li a {
+ padding: 10px 70px 10px 70px;
+ }
+}
+
+@media screen and (max-width: 360px) {
+ .other_options_ambuigue li a {
+ padding: 10px 50px 10px 50px;
+ }
+
+ .register_ambuigue {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100px;
+ justify-content: space-between;
+ align-items: center;
+
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ }
+
+ header {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+
+ width: 100%;
+ padding: 6px 20px;
+
+ background-color: var(--color-Primary-Light);
+ border-radius: 0 0px 20px 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ }
+}
+
+/*---footer-Responsive---*/
+
+@media screen and (max-width: 1030px) {
+ .Divisor_do_Footer {
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ grid-template-columns: repeat(2, 1fr);
+ padding: 3rem 3.5rem;
+ }
+
+ .Social_links_footer {
+ order: 1;
+ }
+
+ .Sobre_empresa {
+ order: 4;
+ }
+
+ .Ferramentas {
+ order: 2;
+ }
+
+ .Newsletter {
+ margin-top: 30px;
+ order: 3;
+ text-align: center;
+ }
+
+ .Sobre_empresa ul {
+ margin-left: 0;
+ }
+
+ .Ferramentas ul {
+ margin-left: 0rem;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .Divisor_do_Footer {
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ grid-template-columns: repeat(1, 1fr);
+ padding: 2rem 2.5rem;
+ }
+
+ .Social_links_footer {
+ margin-top: 30px;
+ text-align: center;
+ order: 1;
+ }
+
+ .Sobre_empresa {
+ margin-top: 30px;
+ text-align: center;
+ order: 2;
+ }
+
+ .Ferramentas {
+ margin-top: 30px;
+ text-align: center;
+ order: 3;
+ }
+
+ .Newsletter {
+ margin-top: 30px;
+ order: 4;
+ text-align: center;
+ }
+ .Legal ul {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ margin-right: 0;
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .Legal li {
+ margin-bottom: 4px;
+ }
+}
+
+@media screen and (max-width: 360px) {
+ .Divisor_do_Footer {
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ grid-template-columns: repeat(1, 1fr);
+ padding: 1rem 1.5rem;
+ }
+}
diff --git a/css/Mains/Dummy_main.css b/css/Mains/Dummy_main.css
new file mode 100644
index 0000000..d50702a
--- /dev/null
+++ b/css/Mains/Dummy_main.css
@@ -0,0 +1,73 @@
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ max-width: 70rem;
+ align-items: center;
+ margin: 0 auto;
+ place-items: center;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+#Construcao_img {
+ display: block;
+ max-width: 50%;
+
+ border-radius: 12px;
+}
+
+.sessao {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ place-items: center;
+ border-radius: 28px;
+}
+
+.titulo {
+ margin-top: 1rem;
+ font-size: 4rem;
+}
+
+.texto {
+ font-size: 2rem;
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+}
+
+.button {
+ font-weight: bold;
+ text-decoration: none;
+ padding: 10px;
+ background-color: var(--color-Accent);
+ border-radius: 28px;
+ margin-bottom: 2rem;
+ color: black;
+}
diff --git a/css/Mains/Index_main.css b/css/Mains/Index_main.css
new file mode 100644
index 0000000..996e353
--- /dev/null
+++ b/css/Mains/Index_main.css
@@ -0,0 +1,274 @@
+/*------------Variaveis------------*/
+
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+/*------------body------------*/
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+ text-decoration: none;
+}
+
+/*------------Section_1------------*/
+
+.Section_1 {
+ border-bottom: none;
+ margin-bottom: 100px;
+}
+
+#Dashboard_img {
+ display: block;
+
+ margin: 0 0 0 auto;
+ max-width: 50%;
+
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.Section_1 .Title_Section {
+ text-align: left;
+
+ width: 400px;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+}
+
+.Section_1 .P_Section {
+ text-align: left;
+
+ width: 400px;
+ font-size: 1rem;
+}
+
+.Section_1 .Button_Section {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+ margin-top: 1rem;
+ white-space: nowrap;
+
+ line-height: 100px;
+ padding: 10px 20px;
+ border-radius: 28px;
+
+ color: var(--color-background-Dark);
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Section_1 .Button_Section:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+/*------------Section_2------------*/
+
+.Section_2 {
+ flex-direction: row-reverse;
+ margin-top: 50px;
+}
+
+.Section_2 .Title_Section {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ width: 400px;
+}
+
+.Section_2 .P_Section {
+ text-align: center;
+ font-size: 1rem;
+ margin-bottom: 2rem;
+ width: 400px;
+}
+
+.Logo_icons {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+
+ border-radius: 12px;
+ padding: 15px 15px;
+ margin: 0 auto 0 0;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.Company_logos {
+ display: block;
+ width: 100px;
+ height: 100px;
+ max-width: 100%;
+ max-height: 100%;
+ border: solid;
+ border-radius: 12px;
+ padding: 10px 10px;
+}
+
+/*------------others------------*/
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ display: flex;
+ max-width: 80rem;
+ align-items: center;
+ margin: 0 auto;
+}
+
+/*------------responsive------------*/
+
+@media screen and (max-width: 1070px) {
+ .Section_1 {
+ padding-bottom: 100px;
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ place-items: center;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+ }
+
+ .container {
+ margin: 100px;
+ }
+
+ #Dashboard_img {
+ margin: 0 0 0 0;
+ min-width: 80%;
+ }
+
+ .Section_1 .Title_Section,
+ .Section_1 .P_Section,
+ .Section_1 .Button_Section,
+ .Section_2 .Title_Section,
+ .Section_2 .P_Section,
+ .Section_2 .Button_Section {
+ place-items: center;
+ text-align: center;
+ width: auto;
+ }
+
+ .Text_Section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .Section_2 {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .Logo_icons {
+ margin: auto;
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/*------------EDIÇÂO da novela carrosel------------*/
+
+.carousel {
+ width: 500px;
+ height: 200px;
+ overflow: hidden;
+ position: relative;
+}
+
+.message-container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ animation: carouselAnimation 36s linear infinite;
+ animation-fill-mode: both;
+}
+
+.message {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
+
+.message-1 {
+ left: 0%;
+}
+
+.message-2 {
+ left: 100%;
+}
+
+.message-3 {
+ left: 200%;
+}
+
+.message-4 {
+ left: 300%;
+}
+
+@keyframes carouselAnimation {
+ 25% {
+ transform: translateX(0);
+ }
+ 26% {
+ transform: translateX(-100%);
+ }
+ 50% {
+ transform: translateX(-100%);
+ }
+ 51% {
+ transform: translateX(-200%);
+ }
+ 75% {
+ transform: translateX(-200%);
+ }
+ 76% {
+ transform: translateX(-300%);
+ }
+ 100% {
+ transform: translateX(-300%);
+ }
+}
+.Section_3 {
+ margin-top: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ place-items: center;
+}
+
+.Section_4 {
+ margin-top: 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ place-items: center;
+ margin-bottom: 100px;
+}
+
+.botao_do_final_amem {
+ background-color: var(--color-Accent);
+ margin-top: 20px;
+ border-radius: 28px;
+ padding: 20px 60px;
+ font-size: larger;
+ font-weight: 700;
+ text-decoration: none;
+ color: var(--color-background-Dark);
+}
diff --git a/css/Mains/Login_main.css b/css/Mains/Login_main.css
new file mode 100644
index 0000000..dee1b4f
--- /dev/null
+++ b/css/Mains/Login_main.css
@@ -0,0 +1,135 @@
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+ text-decoration: none;
+}
+
+.container {
+ max-width: 80%;
+ align-items: center;
+ margin: 0 auto;
+ justify-content: center;
+}
+
+.margintop {
+ margin-top: 20px;
+}
+
+.gap {
+ gap: rem;
+}
+
+.marginbottom {
+ margin-bottom: 20px;
+}
+
+.alignitems {
+ align-items: center;
+ justify-content: center;
+}
+
+.texto {
+ width: 350px;
+ max-width: 100%;
+ font-size: 20px;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+#Dashboard_img {
+ display: block;
+
+ max-width: 100%;
+
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+#logo_icon {
+ display: block;
+ margin: 0 auto 0 auto;
+ max-height: 75%;
+ max-width: 80%;
+}
+
+.login_area {
+ margin-top: 100px;
+ margin-bottom: 100px;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ padding: 20px 50px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ max-width: 1000px;
+
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.register_inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+.Inputbox {
+ outline: none;
+
+ height: 50px;
+ max-width: 550px;
+ width: 80%;
+ border-radius: 8px;
+ padding-left: 10px;
+ box-sizing: 1px;
+ margin-top: 40px;
+
+ border: 1px solid var(--color-Accent);
+ background-color: var(--color-background-Light);
+}
+
+.Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ padding: 5px 20%;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Button:hover {
+ background-color: var(--color-Accent-darker);
+}
diff --git a/css/Mains/Precos_main.css b/css/Mains/Precos_main.css
new file mode 100644
index 0000000..c9ec92c
--- /dev/null
+++ b/css/Mains/Precos_main.css
@@ -0,0 +1,152 @@
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ max-width: 1300px;
+ align-items: center;
+ margin: 0 auto;
+ place-items: center;
+}
+
+.centertext {
+ text-align: center;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ padding: 20px 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.planos_e_preços {
+ margin-top: 100px;
+ font-size: 50px;
+}
+
+.Planos {
+ display: flex;
+
+ margin-top: 100px;
+ margin-bottom: 200px;
+}
+
+.box_plano {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ width: 330px;
+ height: 600px;
+ margin-left: 20px;
+}
+
+.sobre_plano {
+ text-align: center;
+ border-radius: 28px;
+ width: 100%;
+ height: 50%;
+}
+
+.Serviços {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: left;
+ width: 100%;
+ height: 50%;
+ background: linear-gradient(var(--color-Accent), #00ff84);
+ border-radius: 28px;
+}
+
+.titulo_plano {
+ margin-top: 20px;
+ font-size: 24px;
+}
+
+.preco_plano {
+ margin-top: 30%;
+ font-size: 48px;
+}
+
+.servico_extra {
+ margin-top: 20px;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.servico_plano {
+ margin-top: 20px;
+}
+
+.servico_plano ul {
+ list-style: none;
+ font-weight: 700;
+}
+
+.servico_plano li {
+ margin-top: 16px;
+ font-size: 18px;
+}
+
+.Planos > :nth-child(2) {
+ margin-top: 20px;
+}
+
+.Planos > :nth-child(1) {
+ margin-top: 40px;
+}
+
+.Inscreva-se {
+ margin-top: 20px;
+ padding: 10px 20px;
+ background-color: black;
+ border-radius: 28px;
+ color: white;
+ text-decoration: none;
+}
+
+@media screen and (max-width: 1100px) {
+ .Planos {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 1000px) {
+ .Planos {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/css/Mains/Termos_e_privacidade_main.css b/css/Mains/Termos_e_privacidade_main.css
new file mode 100644
index 0000000..95c26d9
--- /dev/null
+++ b/css/Mains/Termos_e_privacidade_main.css
@@ -0,0 +1,58 @@
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ max-width: 80rem;
+ align-items: center;
+ margin: 0 auto;
+ place-items: center;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+.sessao {
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ padding: 20px 20px;
+}
+.tituloprincipal {
+ margin-bottom: 25px;
+ font-size: larger;
+ color: var(--color-Accent);
+}
+
+.subtitulo {
+ margin-top: 15px;
+ margin-bottom: 20px;
+ font-size: large;
+}
+
+.texto {
+ font-size: medium;
+ margin-bottom: 15px;
+}
diff --git a/css/Mains/cadastro_main.css b/css/Mains/cadastro_main.css
new file mode 100644
index 0000000..5d3caae
--- /dev/null
+++ b/css/Mains/cadastro_main.css
@@ -0,0 +1,160 @@
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.margintop {
+ margin-top: 20px;
+}
+
+.marginbottom {
+ margin-bottom: 20px;
+}
+
+.alignitems {
+ align-items: center;
+ justify-content: center;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+#Dashboard_img {
+ display: block;
+
+ max-width: 100%;
+}
+
+#logo_icon {
+ display: block;
+ margin: 0 auto 50px auto;
+ max-height: 50%;
+ max-width: 50%;
+}
+
+.full_register {
+ display: flex;
+ gap: 100px;
+ justify-content: center;
+ align-items: center;
+ max-width: 1000px;
+ width: 90%;
+ margin-top: 100px;
+ margin-bottom: 20px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.register_area {
+ justify-content: center;
+ max-width: 1000px;
+ width: 80%;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ padding: 20px 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.register_inputs {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+}
+
+.Inputbox {
+ outline: none;
+
+ height: 50px;
+ max-width: 400px;
+ width: 80%;
+ border-radius: 8px;
+ padding-left: 10px;
+ box-sizing: 1px;
+ margin-top: 40px;
+
+ border: 1px solid var(--color-Accent);
+ background-color: var(--color-background-Light);
+}
+
+.Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ max-width: 300px;
+ width: 80%;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Button:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+.left_decoration {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.passos_register {
+ display: flex;
+ flex-direction: column;
+ margin-top: 30px;
+ font-size: 24px;
+ color: var(--color-Accent);
+}
+
+.texto {
+ width: 350px;
+ max-width: 100%;
+ font-size: 20px;
+ text-align: left;
+}
+
+@media screen and (max-width: 1300px) {
+ .full_register {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 100px;
+ max-width: 1500px;
+ }
+
+ .Inputbox {
+ max-width: 500px;
+ }
+}
diff --git a/css/Mains/dashboard_main.css b/css/Mains/dashboard_main.css
new file mode 100644
index 0000000..322dc7b
--- /dev/null
+++ b/css/Mains/dashboard_main.css
@@ -0,0 +1,621 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;700&display=swap");
+
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ max-width: 80%;
+ align-items: center;
+ margin: 0 auto;
+ justify-content: center;
+}
+
+.margintop {
+ margin-top: 20px;
+}
+
+.gap {
+ gap: rem;
+}
+
+.marginbottom {
+ margin-bottom: 20px;
+}
+
+.marginleft {
+ margin-left: 10px;
+}
+
+.alignitems {
+ align-items: center;
+ justify-content: center;
+}
+
+.texto {
+ width: 350px;
+ max-width: 100%;
+ font-size: 20px;
+ font-weight: 400;
+}
+
+.ttexto {
+ font-size: 20px;
+ font-weight: 400;
+}
+
+.titulo {
+ width: 350px;
+ max-width: 100%;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+ text-decoration: none;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+.Inputbox {
+ outline: none;
+
+ height: 50px;
+ max-width: 550px;
+ width: 80%;
+ border-radius: 8px;
+ padding-left: 10px;
+ box-sizing: 1px;
+ margin-top: 40px;
+
+ border: 1px solid var(--color-Accent);
+ background-color: var(--color-background-Light);
+}
+
+.Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ padding: 5px 20%;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Button:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+.main_area {
+ margin-top: 50vh;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ padding: 20px 50px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ max-width: 1000px;
+
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#Dashboard_img {
+ display: block;
+
+ max-width: 100%;
+
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ height: 70px;
+
+ width: 100%;
+ padding: 6px 20px;
+
+ background-color: var(--color-Primary-Light);
+ border-radius: 0 0px 20px 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.logo_icon {
+ position: relative;
+
+ width: 135px;
+ height: 54px;
+}
+
+/*---Idioma_Select---*/
+
+.Idioma_Select {
+ border: none;
+ margin-left: 20px;
+ font-size: 16px;
+ color: var(--color-Accent);
+}
+
+.Idioma_Select:focus {
+ outline: none;
+}
+
+/*---Header-Menu_options---*/
+
+.Menu_options {
+ position: relative;
+ display: flex;
+}
+
+.Menu_options ul {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.Menu_options li {
+ position: relative;
+ display: inline-block;
+ list-style: none;
+}
+
+.Menu_options li a {
+ display: inline-block;
+ text-decoration: none;
+
+ font-size: 16px;
+ margin-left: 20px;
+
+ color: var(--color-Accent);
+}
+
+.Menu_options li a:hover {
+ color: var(--color-Accent-darker);
+}
+
+.Menu_options li a::before {
+ content: "";
+ position: absolute;
+ transform-origin: center;
+
+ height: 2px;
+ transform: scaleX(0);
+ bottom: -4px;
+ left: 10px;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.Menu_options li a:hover::before {
+ transform: scaleX(0.5);
+ width: 100%;
+}
+
+/*---Header_buttons---*/
+
+.perfil_foto {
+ margin-left: 20px;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.perfil_foto:hover {
+ transform: translateY(-3px);
+}
+
+/*---Header-Others---*/
+
+.icons {
+ font-size: 25px;
+ cursor: pointer;
+ margin-left: 30px;
+ color: #00bf63;
+ border: none;
+ background-color: var(--color-Primary-Light);
+ transition: transform 0.3s ease;
+}
+
+#notifications::before {
+ content: "Notificações";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ bottom: -40px;
+ right: -71%;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+#notifications:hover::before {
+ transform: scaleX(1);
+}
+
+#reminders::before {
+ content: "Agenda";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ bottom: -40px;
+ right: -45%;
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+#reminders:hover::before {
+ transform: scaleX(1);
+}
+
+#chat::before {
+ content: "Chat";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ bottom: -40px;
+ right: -20%;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+#chat:hover::before {
+ transform: scaleX(1);
+}
+
+.dash_main {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+}
+
+.box {
+ border-radius: 28px;
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+ margin-left: 20px;
+ margin-bottom: 20px;
+ padding: 50px 20px;
+}
+
+.box:hover {
+ box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+}
+
+.ganhos {
+ display: grid;
+}
+
+.moneyganho {
+ display: grid;
+ margin-left: 30px;
+}
+
+.graficomoney {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ width: 100%;
+ margin-top: 40px;
+}
+
+.grafico {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ background-image: conic-gradient(#08e67b 65%, #0fc36c 65% 76%, #07a65a 76% 100%);
+}
+
+.graficomoney ul {
+ list-style: none;
+}
+
+.graficomoney li {
+ list-style: none;
+ margin-bottom: 15px;
+}
+
+.logout {
+ border: none;
+ outline: none;
+ border-radius: 28px;
+ background: var(--color-Accent);
+ padding: 0;
+ padding: 10px;
+ cursor: pointer;
+}
+
+.ecommerce {
+ margin-top: 20px;
+ margin-left: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 200px;
+ align-items: center;
+ text-align: center;
+}
+
+.c1 {
+ color: #07a65a;
+ margin-right: 10px;
+}
+
+.c2 {
+ color: #0fc36c;
+ margin-right: 10px;
+}
+
+.c3 {
+ color: #08e67b;
+ margin-right: 10px;
+}
+
+.mediavendasbox {
+ display: grid;
+}
+
+.mediavendas {
+ display: grid;
+}
+
+.graficovendas ul {
+ list-style: none;
+ display: flex;
+ align-items: center;
+ background-color: #404041;
+ width: 100%;
+ border-radius: 28px;
+ height: 80px;
+ justify-content: space-around;
+}
+
+.ba1 {
+ background-color: #08e67b;
+}
+
+.ba2 {
+ background-color: #0fc36c;
+}
+
+.ba3 {
+ background-color: #07a65a;
+}
+
+.graficovendas li {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ padding: 14px;
+ border-radius: 12px;
+}
+
+.graficobarras {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.barra {
+ position: relative;
+ margin-top: 30px;
+ width: 30px;
+ height: 100px;
+ border-radius: 12px 12px 0 0;
+}
+
+.barra1 {
+ background-color: #08e67b;
+}
+
+.barra1::before {
+ content: "sapatos";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ top: -30%;
+ left: -60%;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.barra1:hover::before {
+ transform: scaleX(1);
+}
+
+.barra2 {
+ background-color: #0fc36c;
+}
+
+.barra2::before {
+ content: "Jogos";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ top: -30%;
+ left: -40%;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.barra2:hover::before {
+ transform: scaleX(1);
+}
+
+.barra3 {
+ background-color: #07a65a;
+}
+
+.barra3::before {
+ content: "Outros";
+ position: absolute;
+ transform-origin: center;
+ font-size: small;
+ color: #ffffff;
+ transform: scaleX(0);
+ padding: 5px 10px;
+ border-radius: 12px;
+ top: -30%;
+ left: -50%;
+
+ background-color: var(--color-Accent-darker);
+ transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.barra3:hover::before {
+ transform: scaleX(1);
+}
+
+.ano_vendas_box {
+ display: grid;
+}
+
+.corbarra {
+ background-color: var(--color-Accent);
+}
+
+.meses {
+ list-style: none;
+ display: grid;
+ align-items: center;
+ background-color: #404041;
+ height: 100%;
+ border-radius: 28px;
+ height: 560px;
+ width: 100px;
+ justify-content: space-around;
+}
+
+.meses p {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ padding: 5px;
+ background-color: var(--color-Accent);
+}
+
+.barrave {
+ position: relative;
+ margin-top: 30px;
+ width: 100px;
+ height: 30px;
+ border-radius: 0 12px 12px 0;
+}
+
+.graficove {
+ display: flex;
+ margin-top: 30px;
+}
+
+.clientes {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 350px;
+ font-size: 64px;
+ text-align: center;
+}
+
+.pedidos {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ height: 370px;
+ font-size: 64px;
+}
+
+@media screen and (max-width: 1270px) {
+ .dash_main {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media screen and (max-width: 980px) {
+ header {
+ height: 200px;
+ }
+ .perfil_foto {
+ width: 150px;
+ height: 150px;
+ }
+
+ .logo_icon {
+ position: relative;
+
+ width: 200px;
+ height: 80px;
+ }
+ .icons {
+ font-size: 50px;
+ cursor: pointer;
+ margin-left: 30px;
+ color: #00bf63;
+ border: none;
+ background-color: var(--color-Primary-Light);
+ transition: transform 0.3s ease;
+ }
+
+ .dash_main {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/css/css_padrao.css b/css/css_padrao.css
new file mode 100644
index 0000000..3bb36a7
--- /dev/null
+++ b/css/css_padrao.css
@@ -0,0 +1,127 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;700&display=swap");
+
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+.Destacado {
+ color: var(--color-Accent);
+ text-decoration: none;
+}
+
+.container {
+ max-width: 80%;
+ align-items: center;
+ margin: 0 auto;
+ justify-content: center;
+}
+
+.margintop {
+ margin-top: 20px;
+}
+
+.gap {
+ gap: rem;
+}
+
+.marginbottom {
+ margin-bottom: 20px;
+}
+
+.alignitems {
+ align-items: center;
+ justify-content: center;
+}
+
+.texto {
+ width: 350px;
+ max-width: 100%;
+ font-size: 20px;
+}
+
+* {
+ box-sizing: border-box;
+ font-family: "Outfit", sans-serif;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+.Inputbox {
+ outline: none;
+
+ height: 50px;
+ max-width: 550px;
+ width: 80%;
+ border-radius: 8px;
+ padding-left: 10px;
+ box-sizing: 1px;
+ margin-top: 40px;
+
+ border: 1px solid var(--color-Accent);
+ background-color: var(--color-background-Light);
+}
+
+.Button {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+
+ line-height: 35px;
+ padding: 5px 20%;
+ border-radius: 28px;
+ cursor: pointer;
+
+ color: #333;
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Button:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+.main_area {
+ margin-top: 50vh;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ background-color: var(--color-Primary-Light);
+ border-radius: 28px;
+ padding: 20px 50px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+ max-width: 1000px;
+
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#Dashboard_img {
+ display: block;
+
+ max-width: 100%;
+
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.logo_icon {
+ width: 225px;
+ height: 100px;
+ border: none;
+ outline: none;
+}
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..b2930c1
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,177 @@
+/*------------Variaveis------------*/
+
+:root {
+ --color-background-Light: #f5f8fa;
+ --color-background-Dark: #202124;
+
+ --color-Primary-Light: #ffffff;
+ --color-Primary-Dark: #41444a;
+
+ --color-Accent: #00bf63;
+ --color-Accent-darker: #07a65a;
+}
+
+/*------------body------------*/
+
+body {
+ background-color: var(--color-background-Light);
+ width: 100%;
+ height: 100%;
+}
+
+/*------------Section_1------------*/
+
+.Section_1 {
+ padding-top: 100px;
+ padding-bottom: 200px;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+}
+
+#Dashboard_img {
+ display: block;
+
+ margin: 0 0 0 auto;
+ max-width: 50%;
+
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.Section_1 .Title_Section {
+ text-align: left;
+
+ width: 400px;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+}
+
+.Section_1 .P_Section {
+ text-align: left;
+
+ width: 400px;
+ font-size: 1rem;
+}
+
+.Section_1 .Button_Section {
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+ margin-top: 1rem;
+ white-space: nowrap;
+
+ line-height: 100px;
+ padding: 10px 20px;
+ border-radius: 28px;
+
+ color: var(--color-background-Dark);
+ background-color: var(--color-Accent);
+ transition: background-color 0.3s ease;
+}
+
+.Section_1 .Button_Section:hover {
+ background-color: var(--color-Accent-darker);
+}
+
+/*------------Section_2------------*/
+
+.Section_2 {
+ padding-top: 200px;
+ flex-direction: row-reverse;
+}
+
+.Section_2 .Title_Section {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ width: 400px;
+}
+
+.Section_2 .P_Section {
+ text-align: center;
+ font-size: 1rem;
+ margin-bottom: 2rem;
+ width: 400px;
+}
+
+.Logo_icons {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ border-radius: 12px;
+ padding: 15px 15px;
+ margin: 0 auto 0 0;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.Company_logos {
+ display: block;
+ width: 100px;
+ height: 100px;
+ max-width: 100%;
+ max-height: 100%;
+ border: solid;
+ border-radius: 12px;
+ padding: 10px 10px;
+}
+
+/*------------others------------*/
+
+.Destacado {
+ color: var(--color-Accent);
+}
+
+.container {
+ display: flex;
+ max-width: 80rem;
+ align-items: center;
+ margin: 0 auto;
+}
+
+/*------------responsive------------*/
+
+@media screen and (max-width: 1070px) {
+ .Section_1 {
+ padding-top: 150px;
+ padding-bottom: 100px;
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ place-items: center;
+ }
+
+ #Dashboard_img {
+ margin: 0 0 0 0;
+ min-width: 80%;
+ }
+
+ .Section_1 .Title_Section,
+ .Section_1 .P_Section,
+ .Section_1 .Button_Section,
+ .Section_2 .Title_Section,
+ .Section_2 .P_Section,
+ .Section_2 .Button_Section {
+ place-items: center;
+ text-align: center;
+ width: auto;
+ }
+
+ .Text_Section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ }
+
+ .Section_2 {
+ padding-top: 100px;
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .Logo_icons {
+ margin: auto;
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
diff --git a/img/Apple.png b/img/Apple.png
new file mode 100644
index 0000000..cf6e050
Binary files /dev/null and b/img/Apple.png differ
diff --git a/img/Logo.png b/img/Logo.png
new file mode 100644
index 0000000..a8308fb
Binary files /dev/null and b/img/Logo.png differ
diff --git a/img/Mi.svg b/img/Mi.svg
new file mode 100644
index 0000000..db37191
--- /dev/null
+++ b/img/Mi.svg
@@ -0,0 +1,7 @@
+
+
+
+
+ Svg Vector Icons : http://www.onlinewebfonts.com/icon
+
\ No newline at end of file
diff --git a/img/adidas.svg b/img/adidas.svg
new file mode 100644
index 0000000..80e2ef8
--- /dev/null
+++ b/img/adidas.svg
@@ -0,0 +1 @@
+AnalyTrick
-
- AnalyTrick
+
-
+
+
-
+
- 
- 
- 
- 
- 
- 
- 
- 
-