diff --git a/syond/README.md b/syond/README.md new file mode 100644 index 00000000..395c3ccb --- /dev/null +++ b/syond/README.md @@ -0,0 +1 @@ +O site está responsivo. diff --git a/syond/app/js/app.js b/syond/app/js/app.js new file mode 100644 index 00000000..ee365866 --- /dev/null +++ b/syond/app/js/app.js @@ -0,0 +1,5 @@ +import toggleMenu from "./toggleMenu.js"; +import formAction from "./formAction.js"; + +toggleMenu(); +formAction(); \ No newline at end of file diff --git a/syond/app/js/formAction.js b/syond/app/js/formAction.js new file mode 100644 index 00000000..aa809bc1 --- /dev/null +++ b/syond/app/js/formAction.js @@ -0,0 +1,43 @@ +import api from "./services/api.js"; +import clearInputsContactForm from "./utils/clearInputsContactForm.js"; +import validationForm from "./middlewares/validationForm.js"; + +const formAction = () => { + const contactForm = document.querySelector("#contact-form"); + + async function handleContactForm(event) { + event.preventDefault(); + + try { + const validationResponse = validationForm(contactForm); + + if (validationResponse) { + const user = { + name: contactForm.name.value, + email: contactForm.email.value, + message: contactForm.message.value + } + + try { + const apiResponse = await api(user); + + if (apiResponse.status === 200) { + alert("Mensagem enviada com sucesso!"); + } else { + alert("Erro ao enviar mensagem."); + } + + clearInputsContactForm(contactForm); + } catch (error) { + console.error(error); + } + } + } catch (error) { + console.error(error); + } + } + + contactForm.addEventListener("submit", handleContactForm); +} + +export default formAction; \ No newline at end of file diff --git a/syond/app/js/middlewares/validationForm.js b/syond/app/js/middlewares/validationForm.js new file mode 100644 index 00000000..1da2c36b --- /dev/null +++ b/syond/app/js/middlewares/validationForm.js @@ -0,0 +1,29 @@ +const validationForm = (contactForm) => { + if (contactForm.name.value == '') { + contactForm.name.classList.add("validation-error"); + + return false, alert("Preencha o campo Nome."); + } else { + contactForm.name.classList.remove("validation-error"); + } + + if (contactForm.email.value == '') { + contactForm.email.classList.add("validation-error"); + + return false, alert("Preencha o campo Email."); + } else { + contactForm.email.classList.remove("validation-error"); + } + + if (contactForm.message.value == '') { + contactForm.message.classList.add("validation-error"); + + return false, alert("Preencha o campo Mensagem."); + } else { + contactForm.message.classList.remove("validation-error"); + } + + return true; +} + +export default validationForm; \ No newline at end of file diff --git a/syond/app/js/services/api.js b/syond/app/js/services/api.js new file mode 100644 index 00000000..dddc1626 --- /dev/null +++ b/syond/app/js/services/api.js @@ -0,0 +1,20 @@ +const api = async(data) => { + + try { + const response = await fetch("http://mockbin.org/bin/25965c30-636e-4737-868a-ceab09f1d21a", { + "method": "POST", + "headers": { + "cookie": "foo=bar; bar=baz" + }, + "body": data + }); + + return response; + } catch (err) { + alert("Erro interno. Tente novamente mais tarde."); + console.log(err); + } + +} + +export default api; \ No newline at end of file diff --git a/syond/app/js/toggleMenu.js b/syond/app/js/toggleMenu.js new file mode 100644 index 00000000..e6d18967 --- /dev/null +++ b/syond/app/js/toggleMenu.js @@ -0,0 +1,37 @@ +const toggleMenu = () => { + const openMenuId = document.querySelector("#open-menu"); + const closeMenuId = document.querySelector("#close-menu"); + const menuContainerClass = document.querySelector(".menu-container"); + const menuLinks = document.querySelectorAll(".menu-container li a"); + + (function onLoad() { + closeMenuId.classList.toggle("toggle-menu-display-none"); + }()); + + openMenuId.addEventListener("click", () => { + menuContainerClass.classList.toggle("toggle-menu-container"); + openMenuId.classList.toggle("toggle-menu-display-none"); + closeMenuId.classList.toggle("toggle-menu-display-none"); + + }); + + closeMenuId.addEventListener("click", () => { + menuContainerClass.classList.toggle("toggle-menu-container"); + openMenuId.classList.toggle("toggle-menu-display-none"); + closeMenuId.classList.toggle("toggle-menu-display-none"); + }); + + let closeMenuAfterClickOnLink = () => { + for (let x = 0; menuLinks.length > x; x++) { + menuLinks[x].addEventListener("click", () => { + menuContainerClass.classList.toggle("toggle-menu-container"); + openMenuId.classList.toggle("toggle-menu-display-none"); + closeMenuId.classList.toggle("toggle-menu-display-none"); + }); + } + } + + closeMenuAfterClickOnLink(); +} + +export default toggleMenu; \ No newline at end of file diff --git a/syond/app/js/utils/clearInputsContactForm.js b/syond/app/js/utils/clearInputsContactForm.js new file mode 100644 index 00000000..045123a7 --- /dev/null +++ b/syond/app/js/utils/clearInputsContactForm.js @@ -0,0 +1,7 @@ +const clearInputsContactForm = (contactForm) => { + contactForm.name.value = ''; + contactForm.email.value = ''; + contactForm.message.value = ''; +} + +export default clearInputsContactForm; \ No newline at end of file diff --git a/syond/app/scss/_container.scss b/syond/app/scss/_container.scss new file mode 100644 index 00000000..96673b21 --- /dev/null +++ b/syond/app/scss/_container.scss @@ -0,0 +1,4 @@ +#container { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/syond/app/scss/_footer.scss b/syond/app/scss/_footer.scss new file mode 100644 index 00000000..5d8675e2 --- /dev/null +++ b/syond/app/scss/_footer.scss @@ -0,0 +1,18 @@ +footer { + .wrap-footer { + display: flex; + align-items: center; + justify-content: center; + height: 180px; + background-color: $senary; + font-size: $fontSizeHigh; + } +} + +@media screen and (min-width: 1100px) { + footer { + .wrap-footer { + font-size: $fontSizeLow; + } + } +} \ No newline at end of file diff --git a/syond/app/scss/_header.scss b/syond/app/scss/_header.scss new file mode 100644 index 00000000..3bfbb71a --- /dev/null +++ b/syond/app/scss/_header.scss @@ -0,0 +1,52 @@ +header { + background-image: url("../../assets/banner.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + height: 700px; + .background-mask { + width: 100%; + height: 100%; + background: rgba(black, 0.7); + } + .wrap-header { + max-width: 1680px; + height: 100%; + margin: 0 auto; + color: $tertiary; + .header-content { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 30px; + font-size: $fontSizeHigh; + h1 { + padding-top: 100px; + padding-bottom: 5px; + } + } + } +} + +@media screen and (min-width: 1100px) { + header { + height: 600px; + } + .wrap-header { + max-width: 1680px; + height: 100%; + margin: 0 auto; + color: $tertiary; + .header-content { + h1 { + font-size: $fontSizeHigh; + padding-top: 100px; + padding-bottom: 5px; + } + span { + font-size: $fontSizeLow; + } + } + } +} \ No newline at end of file diff --git a/syond/app/scss/_main.scss b/syond/app/scss/_main.scss new file mode 100644 index 00000000..0aa08789 --- /dev/null +++ b/syond/app/scss/_main.scss @@ -0,0 +1,2 @@ +@import "./section1"; +@import "./section2"; \ No newline at end of file diff --git a/syond/app/scss/_navbar.scss b/syond/app/scss/_navbar.scss new file mode 100644 index 00000000..13caaec0 --- /dev/null +++ b/syond/app/scss/_navbar.scss @@ -0,0 +1,110 @@ +nav { + background-color: $primary; + position: fixed; + width: 100%; + top: 0; + z-index: 1; + .wrap-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 60px 20px 30px; + max-width: 1680px; + margin: 0 auto; + .logo { + height: 100%; + img { + height: 120px; + } + } + .menu-container { + position: absolute; + max-width: 80%; + right: 0; + top: -250%; + left: 0; + margin: auto; + padding: 20px; + transition: all .5s; + background-color: $secondary; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + ul { + li { + text-align: center; + padding: 20px; + a { + color: $tertiary; + font-weight: bold; + transition: 0.3s; + font-size: $fontSizeHigh; + } + a:hover { + color: $primary; + } + } + } + } + .toggle-menu-container { + top: 180px; + } + .toggle-menu-display-none { + display: none; + } + .menu-toggler { + span { + :hover { + cursor: pointer; + } + img { + height: 40px; + } + } + } + } +} + +@media screen and (min-width: 1100px) { + nav { + .wrap-nav { + .logo { + height: 100%; + img { + height: 80px; + } + } + .menu-container { + position: static; + margin: 0; + padding: 0; + background-color: transparent; + ul { + li { + display: inline; + :hover { + padding-bottom: 10px; + border-bottom: solid 4px; + } + a { + color: $secondary; + font-size: $fontSizeLow; + } + a:hover { + color: $tertiary; + } + } + .active { + padding-bottom: 10px; + border-bottom: solid 4px; + } + } + } + .menu-toggler { + display: none; + } + } + } +} \ No newline at end of file diff --git a/syond/app/scss/_section1.scss b/syond/app/scss/_section1.scss new file mode 100644 index 00000000..80c56151 --- /dev/null +++ b/syond/app/scss/_section1.scss @@ -0,0 +1,63 @@ +main { + .wrap-section1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 60px; + .section1-content { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + h1 { + font-weight: 300; + padding-bottom: 25px; + text-align: center; + font-size: $fontSizeVeryHigh; + } + p { + text-align: center; + font-size: $fontSizeHigh; + } + } + .illustration { + img { + height: 380px; + } + } + } +} + +@media screen and (min-width: 1100px) { + main { + .wrap-section1 { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 0 auto; + padding: 100px 30px; + max-width: 1680px; + .section1-content { + align-items: flex-start; + text-align: left; + margin-bottom: 0; + width: 650px; + h1 { + text-align: left; + font-size: $fontSizeHigh; + } + p { + text-align: justify; + } + } + .illustration { + padding-left: 25%; + img { + height: 350px; + } + } + } + } +} \ No newline at end of file diff --git a/syond/app/scss/_section2.scss b/syond/app/scss/_section2.scss new file mode 100644 index 00000000..745fce95 --- /dev/null +++ b/syond/app/scss/_section2.scss @@ -0,0 +1,124 @@ + main { + .wrap-section2 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 60px; + .section2-content { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + form { + fieldset { + display: flex; + flex-direction: column; + justify-content: center; + border: none; + legend { + h1 { + font-size: $fontSizeVeryHigh; + font-weight: 300; + } + } + label { + margin-top: 35px; + font-size: $fontSizeHigh; + } + input { + width: 800px; + height: 85px; + padding: 12px; + border: solid 1px; + border-radius: 4px; + border-color: $quaternary; + font-size: $fontSizeMedium; + } + textarea { + padding: 12px; + height: 300px; + border: solid 1px; + border-radius: 4px; + border-color: $quaternary; + resize: none; + margin-bottom: 35px; + } + button { + width: 250px; + height: 80px; + background-color: $quinary; + border: solid 1px; + border-radius: 4px; + border-color: $quaternary; + font-size: $fontSizeMedium; + } + button:hover { + cursor: pointer; + } + .validation-error { + border-color: $septenary; + } + } + } + } + .illustration { + img { + height: 380px; + } + } + } + } + + @media screen and (min-width: 1100px) { + main { + .wrap-section2 { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 0 auto; + padding: 100px 30px; + max-width: 1680px; + .section2-content { + align-items: flex-start; + text-align: left; + margin-bottom: 0; + width: 650px; + form { + fieldset { + legend { + h1 { + font-size: $fontSizeHigh; + font-weight: 300; + } + } + label { + margin-top: 35px; + font-size: $fontSizeVeryLow; + } + input { + width: 600px; + height: auto; + font-size: $fontSizeLow; + } + textarea { + height: 200px; + } + button { + width: 170px; + height: 40px; + font-size: $fontSizeVeryLow; + } + } + } + } + .illustration { + padding-left: 25%; + img { + height: 350px; + } + } + } + } + } \ No newline at end of file diff --git a/syond/app/scss/_variables.scss b/syond/app/scss/_variables.scss new file mode 100644 index 00000000..437b03d5 --- /dev/null +++ b/syond/app/scss/_variables.scss @@ -0,0 +1,12 @@ +$primary: #fdd55e; +$secondary: #333; +$tertiary: #fff; +$quaternary: #e6e6e6; +$quinary: #fdd55e; +$senary: #f2f2f2; +$septenary: red; +$fontSizeVeryLow: 0.875rem; +$fontSizeLow: 1.125rem; +$fontSizeMedium: 1.625rem; +$fontSizeHigh: 2rem; +$fontSizeVeryHigh: 3rem; \ No newline at end of file diff --git a/syond/app/scss/globalstyles.scss b/syond/app/scss/globalstyles.scss new file mode 100644 index 00000000..ff37e2be --- /dev/null +++ b/syond/app/scss/globalstyles.scss @@ -0,0 +1,42 @@ +@import url('https://fonts.googleapis.com/css2?family=Nova+Square&family=Oxygen&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + max-width: 100vw; + max-height: 100vh; + font-family: 'Oxygen', sans-serif; + color: #101010; + font-size: 1.125rem; + line-height: 1.4; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Nova Square', cursive; +} + +*, +button, +input { + background: none; +} + +li { + list-style: none; +} + +a { + text-decoration: none; + :visited { + text-decoration: none; + } +} \ No newline at end of file diff --git a/syond/assets/baloes.png b/syond/assets/baloes.png new file mode 100644 index 00000000..31848c55 Binary files /dev/null and b/syond/assets/baloes.png differ diff --git a/syond/assets/banner.jpg b/syond/assets/banner.jpg new file mode 100644 index 00000000..54216d10 Binary files /dev/null and b/syond/assets/banner.jpg differ diff --git a/syond/assets/icon-close.svg b/syond/assets/icon-close.svg new file mode 100644 index 00000000..c9e0e014 --- /dev/null +++ b/syond/assets/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/syond/assets/icon-hamburger.svg b/syond/assets/icon-hamburger.svg new file mode 100644 index 00000000..9b01967d --- /dev/null +++ b/syond/assets/icon-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/syond/assets/logo@3x.png b/syond/assets/logo@3x.png new file mode 100644 index 00000000..b95db469 Binary files /dev/null and b/syond/assets/logo@3x.png differ diff --git a/syond/assets/modelo.png b/syond/assets/modelo.png new file mode 100644 index 00000000..f64534eb Binary files /dev/null and b/syond/assets/modelo.png differ diff --git a/syond/assets/relogio.png b/syond/assets/relogio.png new file mode 100644 index 00000000..b31f31c1 Binary files /dev/null and b/syond/assets/relogio.png differ diff --git a/syond/index.html b/syond/index.html new file mode 100644 index 00000000..fa5be50c --- /dev/null +++ b/syond/index.html @@ -0,0 +1,107 @@ + + + + + + Início | Guepardo Transportes + + + + +
+ + +
+
+
+
+

Entregando cargas e sonhos

+ Desde 1980 entregando cargas. Fazemos pessoas sorrirem e negócios se realizarem. +
+
+
+
+ +
+
+
+

Entregas rápidas e eficientes

+

Temos experiência na entrega de cargas para pessoas e empresas, em tempo recorde, para todo o Brasil. +

+
+ +
+ relogio +
+ +
+ +
+
+
+
+ +

Fale conosco

+ + + + + + + + +
+
+
+
+ baloes +
+ +
+
+ + +
+ + + + + \ No newline at end of file diff --git a/syond/styles.scss b/syond/styles.scss new file mode 100644 index 00000000..cc8d9a04 --- /dev/null +++ b/syond/styles.scss @@ -0,0 +1,7 @@ +@import "./app/scss/variables"; +@import "./app/scss/globalstyles"; +@import "./app/scss/container"; +@import "./app/scss/navbar"; +@import "./app/scss/header"; +@import "./app/scss/main"; +@import "./app/scss/footer"; \ No newline at end of file