diff --git a/layout/images/cards.svg b/app/assets/images/cards.svg similarity index 100% rename from layout/images/cards.svg rename to app/assets/images/cards.svg diff --git a/layout/images/confetti-banner.svg b/app/assets/images/confetti-banner.svg similarity index 100% rename from layout/images/confetti-banner.svg rename to app/assets/images/confetti-banner.svg diff --git a/layout/images/confetti.svg b/app/assets/images/confetti.svg similarity index 100% rename from layout/images/confetti.svg rename to app/assets/images/confetti.svg diff --git a/layout/images/logo.svg b/app/assets/images/logo.svg similarity index 100% rename from layout/images/logo.svg rename to app/assets/images/logo.svg diff --git a/layout/images/security-icon.svg b/app/assets/images/security-icon.svg similarity index 100% rename from layout/images/security-icon.svg rename to app/assets/images/security-icon.svg diff --git a/layout/images/white-logo.svg b/app/assets/images/white-logo.svg similarity index 100% rename from layout/images/white-logo.svg rename to app/assets/images/white-logo.svg diff --git a/app/assets/js/cardView.js b/app/assets/js/cardView.js new file mode 100644 index 0000000..890665e --- /dev/null +++ b/app/assets/js/cardView.js @@ -0,0 +1,32 @@ +export default function cardView(cards) { + return cards + .slice(0, 3) + .map(({ price, promotional_price, image }) => { + const priceBRL = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + }).format(price); + + const promotionalPriceBRL = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + }).format(promotional_price); + + return ` +
+
+ fantasia +
+
+ ${ + promotional_price != undefined + ? `

De ${priceBRL} por ${promotionalPriceBRL}

` + : `

Por ${priceBRL}

` + } + Mais detalhes +
+
+ `; + }) + .join(''); +} diff --git a/app/assets/js/index.js b/app/assets/js/index.js index e69de29..2163ef8 100644 --- a/app/assets/js/index.js +++ b/app/assets/js/index.js @@ -0,0 +1,11 @@ +import cardView from './cardView.js'; + +const products = document.querySelector('.products__wrapper'); + +fetch('../../server/data.json') + .then((response) => response.json()) + .then((data) => { + const results = data.products; + + products.innerHTML = cardView(results); + }); diff --git a/app/assets/js/modal.js b/app/assets/js/modal.js new file mode 100644 index 0000000..b425297 --- /dev/null +++ b/app/assets/js/modal.js @@ -0,0 +1,9 @@ +export function openModal() { + document.querySelector('.modal').style.display = 'flex'; + document.querySelector('body').style.overflow = 'hidden'; +} + +export function closeModal() { + document.querySelector('.modal').style.display = 'none'; + document.querySelector('body').style.overflow = 'visible'; +} diff --git a/app/assets/js/show.js b/app/assets/js/show.js new file mode 100644 index 0000000..b62d5f4 --- /dev/null +++ b/app/assets/js/show.js @@ -0,0 +1,60 @@ +import { openModal, closeModal } from './modal.js'; +import cardView from './cardView.js'; + +const products = document.querySelector('.products__wrapper'); +const bannerImg = document.querySelector('.banner__img img'); +const bannerTitle = document.querySelector('.banner__title'); +const bannerText = document.querySelector('.banner__text'); +const bannerPrice = document.querySelector('.banner__price'); +const bannerSizesWrapper = document.querySelector('.banner__sizes__wrapper'); +const addCart = document.querySelector('.add-cart'); +const keepBuy = document.querySelectorAll('.modal__footer button'); + +fetch('../../server/data.json') + .then((response) => response.json()) + .then((data) => { + const results = data.products; + + products.innerHTML = cardView(results); + showInfo(results[2]); + }); + +function showInfo({ + id, + title, + image, + description, + price, + promotional_price, + sizes, +}) { + const priceBRL = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + }).format(price); + + const promotionalPriceBRL = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + }).format(promotional_price); + + bannerImg.setAttribute('src', `../${image}`); + bannerImg.setAttribute('alt', `Fantasia ${id}`); + + bannerTitle.innerHTML = title; + bannerText.innerHTML = description; + + promotional_price != undefined + ? (bannerPrice.innerHTML = `De ${priceBRL} por ${promotionalPriceBRL}`) + : (bannerPrice.innerHTML = `Por ${priceBRL}`); + + bannerSizesWrapper.innerHTML = sizes + .map((size) => ``) + .join(''); +} + +// Modal +addCart.addEventListener('click', openModal); +keepBuy.forEach((element) => { + element.addEventListener('click', closeModal); +}); diff --git a/app/assets/styles/_components.scss b/app/assets/styles/_components.scss new file mode 100644 index 0000000..a935adf --- /dev/null +++ b/app/assets/styles/_components.scss @@ -0,0 +1,342 @@ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 30px 0; + + &__brand, + &__slogan { + margin: 0; + } + + &__logo { + display: block; + } +} + +.banner { + min-height: 550px; + margin-bottom: 70px; + background: #f1eff1; + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 85px; + background: url(../images/confetti-banner.svg); + background-position: top -100px left 0; + background-repeat: no-repeat; + } + + &--home { + background-image: url(../images/banner.jpg); + background-size: auto 550px; + background-repeat: no-repeat; + background-position: center; + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 85px; + background: url(../images/confetti-banner.svg); + background-position: bottom -100px left 0; + background-repeat: no-repeat; + } + } + + .container { + display: flex; + min-height: 550px; + align-items: center; + } + + &__container { + max-width: 947px; + align-items: flex-end !important; + } + + &__img { + flex: 0 0 auto; + margin-right: 70px; + } + + &__img img { + height: 550px; + width: 420px; + } + + &__inner { + padding-bottom: 42px; + padding-top: 60px; + } + + &__inner--home { + flex-basis: 100%; + padding-right: 35%; + padding-bottom: 0; + padding-top: 0; + text-align: right; + } + + &__title { + font-size: 24px; + font-weight: 300; + margin-bottom: 30px; + } + + &__title--home { + font-size: 48px; + text-transform: uppercase; + margin: 0; + + span { + font-weight: 700; + } + } + + &__text { + font-size: 13px; + margin-bottom: 20px; + } + + &__text--home { + font-size: 24px; + text-transform: uppercase; + margin-bottom: 35px; + + b { + color: $color-primary; + font-weight: 700; + } + } + + &__price { + font-size: 24px; + margin-bottom: 42px; + } + + &__sizes { + margin-bottom: 60px; + + &__title { + font-size: 13px; + margin-bottom: 14px; + } + + button { + color: black; + font-size: 13px; + width: 60px; + height: 60px; + padding: 0; + text-align: center; + margin-right: 20px; + } + } +} + +.btn { + background: $color-primary; + display: inline-block; + border: 1px solid $color-primary; + border-radius: 50px; + color: white; + line-height: 1; + text-decoration: none; + padding: 10px 40px; + + &:hover { + border-color: $color-primary-dark; + background: $color-primary-dark; + } + + &--outline { + color: $color-primary; + background: transparent; + + &:hover { + color: white; + } + } +} + +.products { + margin-bottom: 130px; + + &__wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; + } + + &__title { + font-size: 24px; + font-weight: 300; + text-align: center; + margin: 0 0 40px; + + b { + color: $color-primary; + font-weight: 700; + } + } +} + +.card { + text-align: center; + padding: 20px; + border: 1px solid transparent; + transition: 0.2s; + + &:hover { + border: 1px solid rgba(0, 0, 0, 0.17); + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); + + .card__content { + visibility: visible; + } + } + + &__header { + margin-bottom: 25px; + } + + &__img { + height: 475px; + object-fit: cover; + } + + &__content { + visibility: hidden; + } + + &__price { + text-transform: uppercase; + + b { + color: $color-primary; + } + } +} + +.footer { + &__inner { + height: 160px; + background: linear-gradient( + 180deg, + $color-primary 0%, + $color-primary-dark 100% + ); + padding: 45px 0; + + .container { + display: flex; + justify-content: space-between; + align-items: flex-end; + height: 100%; + } + } + + &__contact { + margin: 0; + font-size: 14px; + + a { + color: white; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + &__info-pay { + padding: 40px 0; + border-bottom: 1px solid #dadada; + + .container { + display: flex; + justify-content: space-between; + } + } + + &__credits { + padding: 32px 0; + font-size: 14px; + text-align: center; + + p { + margin: 0; + } + + a { + color: black; + text-decoration: none; + font-weight: 700; + + &:hover { + text-decoration: underline; + } + } + } +} + +.modal { + z-index: 99999; + overflow-x: hidden; + overflow-y: auto; + background: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + justify-content: center; + align-items: center; + + &__dialog { + background: white; + max-width: 100%; + padding: 100px; + border-radius: 20px; + text-align: center; + } + + &__header { + margin-bottom: 80px; + } + + &__body { + font-size: 28px; + margin: 0 auto 60px auto; + width: 300px; + max-width: 100%; + } + + &__footer { + .btn + .btn { + margin-left: 30px; + } + } + + &__title { + text-transform: uppercase; + font-weight: 300; + color: $color-primary; + margin: 0; + } + + &__header { + display: flex; + flex-direction: column; + } +} diff --git a/app/assets/styles/_content.scss b/app/assets/styles/_content.scss new file mode 100644 index 0000000..e614946 --- /dev/null +++ b/app/assets/styles/_content.scss @@ -0,0 +1,11 @@ +:root { + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 62.5%; + letter-spacing: 0.1em; + box-sizing: border-box; +} + +body { + font-size: 1.8rem; +} diff --git a/app/assets/styles/_css-reset.scss b/app/assets/styles/_css-reset.scss new file mode 100644 index 0000000..ae3b987 --- /dev/null +++ b/app/assets/styles/_css-reset.scss @@ -0,0 +1,51 @@ +html, +body { + border: none; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +address, +big, +cite, +code, +em, +font, +img, +small, +strike, +sub, +sup, +li, +ol, +ul, +fieldset, +form, +label, +legend, +button, +table, +caption, +tr, +th, +td { + border: none; + font-size: inherit; + line-height: inherit; + margin: 0; + padding: 0; + text-align: inherit; +} + +blockquote::before, +blockquote::after { + content: ''; +} diff --git a/app/assets/styles/_element-base.scss b/app/assets/styles/_element-base.scss new file mode 100644 index 0000000..8059efc --- /dev/null +++ b/app/assets/styles/_element-base.scss @@ -0,0 +1,132 @@ +main { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.faux-heading { + font-feature-settings: 'lnum'; + font-variant-numeric: lining-nums; + font-weight: 700; + letter-spacing: -0.0415625em; + line-height: 1.25; + margin: 3.5rem 0 2rem; +} + +h1, +.heading-size-1 { + font-size: 3.6rem; + font-weight: 800; + line-height: 1.138888889; +} + +h2, +.heading-size-2 { + font-size: 3.2rem; +} + +h3, +.heading-size-3 { + font-size: 2.8rem; +} + +h4, +.heading-size-4 { + font-size: 2.4rem; +} + +h5, +.heading-size-5 { + font-size: 2.1rem; +} + +h6, +.heading-size-6 { + font-size: 1.6rem; + letter-spacing: 0.03125em; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin: 0 0 1em 0; +} + +em, +i, +q, +dfn { + font-style: italic; +} + +em em, +em i, +i em, +i i, +cite em, +cite i { + font-weight: bolder; +} + +big { + font-size: 1.2em; +} + +small { + font-size: 0.75em; +} + +b, +strong { + font-weight: 700; +} + +ins { + text-decoration: underline; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +abbr, +acronym { + cursor: help; +} + +address { + line-height: 1.5; + margin: 0 0 2rem 0; +} + +hr { + border-style: solid; + border-width: 0.1rem 0 0 0; + border-color: #dcd7ca; + margin: 4rem 0; +} + +svg, +img, +embed, +object { + display: block; + height: auto; + max-width: 100%; +} diff --git a/app/assets/styles/_layout.scss b/app/assets/styles/_layout.scss new file mode 100644 index 0000000..18c77a4 --- /dev/null +++ b/app/assets/styles/_layout.scss @@ -0,0 +1,6 @@ +.container { + width: 1100px; + max-width: 100%; + margin-left: auto; + margin-right: auto; +} diff --git a/app/assets/styles/_variables.scss b/app/assets/styles/_variables.scss new file mode 100644 index 0000000..078f4a9 --- /dev/null +++ b/app/assets/styles/_variables.scss @@ -0,0 +1,3 @@ +$color-primary: #ff6143; +$color-primary-light: lighten($color-primary, 10%); +$color-primary-dark: darken($color-primary, 10%); diff --git a/app/assets/styles/index.css b/app/assets/styles/index.css index e69de29..da14016 100644 --- a/app/assets/styles/index.css +++ b/app/assets/styles/index.css @@ -0,0 +1,580 @@ +html, +body { + border: none; + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +address, +big, +cite, +code, +em, +font, +img, +small, +strike, +sub, +sup, +li, +ol, +ul, +fieldset, +form, +label, +legend, +button, +table, +caption, +tr, +th, +td { + border: none; + font-size: inherit; + line-height: inherit; + margin: 0; + padding: 0; + text-align: inherit; +} + +blockquote::before, +blockquote::after { + content: ''; +} + +main { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6, +.faux-heading { + -webkit-font-feature-settings: 'lnum'; + font-feature-settings: 'lnum'; + font-variant-numeric: lining-nums; + font-weight: 700; + letter-spacing: -0.0415625em; + line-height: 1.25; + margin: 3.5rem 0 2rem; +} + +h1, +.heading-size-1 { + font-size: 3.6rem; + font-weight: 800; + line-height: 1.138888889; +} + +h2, +.heading-size-2 { + font-size: 3.2rem; +} + +h3, +.heading-size-3 { + font-size: 2.8rem; +} + +h4, +.heading-size-4 { + font-size: 2.4rem; +} + +h5, +.heading-size-5 { + font-size: 2.1rem; +} + +h6, +.heading-size-6 { + font-size: 1.6rem; + letter-spacing: 0.03125em; + text-transform: uppercase; +} + +p { + line-height: 1.5; + margin: 0 0 1em 0; +} + +em, +i, +q, +dfn { + font-style: italic; +} + +em em, +em i, +i em, +i i, +cite em, +cite i { + font-weight: bolder; +} + +big { + font-size: 1.2em; +} + +small { + font-size: 0.75em; +} + +b, +strong { + font-weight: 700; +} + +ins { + text-decoration: underline; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +abbr, +acronym { + cursor: help; +} + +address { + line-height: 1.5; + margin: 0 0 2rem 0; +} + +hr { + border-style: solid; + border-width: 0.1rem 0 0 0; + border-color: #dcd7ca; + margin: 4rem 0; +} + +svg, +img, +embed, +object { + display: block; + height: auto; + max-width: 100%; +} + +.container { + width: 1100px; + max-width: 100%; + margin-left: auto; + margin-right: auto; +} + +:root { + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 62.5%; + letter-spacing: 0.1em; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-size: 1.8rem; +} + +.header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 30px 0; +} + +.header__brand, .header__slogan { + margin: 0; +} + +.header__logo { + display: block; +} + +.banner { + min-height: 550px; + margin-bottom: 70px; + background: #f1eff1; + position: relative; +} + +.banner::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 85px; + background: url(../images/confetti-banner.svg); + background-position: top -100px left 0; + background-repeat: no-repeat; +} + +.banner--home { + background-image: url(../images/banner.jpg); + background-size: auto 550px; + background-repeat: no-repeat; + background-position: center; +} + +.banner--home::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 85px; + background: url(../images/confetti-banner.svg); + background-position: bottom -100px left 0; + background-repeat: no-repeat; +} + +.banner .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 550px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.banner__container { + max-width: 947px; + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; +} + +.banner__img { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin-right: 70px; +} + +.banner__img img { + height: 550px; + width: 420px; +} + +.banner__inner { + padding-bottom: 42px; + padding-top: 60px; +} + +.banner__inner--home { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + padding-right: 35%; + padding-bottom: 0; + padding-top: 0; + text-align: right; +} + +.banner__title { + font-size: 24px; + font-weight: 300; + margin-bottom: 30px; +} + +.banner__title--home { + font-size: 48px; + text-transform: uppercase; + margin: 0; +} + +.banner__title--home span { + font-weight: 700; +} + +.banner__text { + font-size: 13px; + margin-bottom: 20px; +} + +.banner__text--home { + font-size: 24px; + text-transform: uppercase; + margin-bottom: 35px; +} + +.banner__text--home b { + color: #ff6143; + font-weight: 700; +} + +.banner__price { + font-size: 24px; + margin-bottom: 42px; +} + +.banner__sizes { + margin-bottom: 60px; +} + +.banner__sizes__title { + font-size: 13px; + margin-bottom: 14px; +} + +.banner__sizes button { + color: black; + font-size: 13px; + width: 60px; + height: 60px; + padding: 0; + text-align: center; + margin-right: 20px; +} + +.btn { + background: #ff6143; + display: inline-block; + border: 1px solid #ff6143; + border-radius: 50px; + color: white; + line-height: 1; + text-decoration: none; + padding: 10px 40px; +} + +.btn:hover { + border-color: #ff3610; + background: #ff3610; +} + +.btn--outline { + color: #ff6143; + background: transparent; +} + +.btn--outline:hover { + color: white; +} + +.products { + margin-bottom: 130px; +} + +.products__wrapper { + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + gap: 40px; +} + +.products__title { + font-size: 24px; + font-weight: 300; + text-align: center; + margin: 0 0 40px; +} + +.products__title b { + color: #ff6143; + font-weight: 700; +} + +.card { + text-align: center; + padding: 20px; + border: 1px solid transparent; + -webkit-transition: 0.2s; + transition: 0.2s; +} + +.card:hover { + border: 1px solid rgba(0, 0, 0, 0.17); + -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); +} + +.card:hover .card__content { + visibility: visible; +} + +.card__header { + margin-bottom: 25px; +} + +.card__img { + height: 475px; + -o-object-fit: cover; + object-fit: cover; +} + +.card__content { + visibility: hidden; +} + +.card__price { + text-transform: uppercase; +} + +.card__price b { + color: #ff6143; +} + +.footer__inner { + height: 160px; + background: -webkit-gradient(linear, left top, left bottom, from(#ff6143), to(#ff3610)); + background: linear-gradient(180deg, #ff6143 0%, #ff3610 100%); + padding: 45px 0; +} + +.footer__inner .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + height: 100%; +} + +.footer__contact { + margin: 0; + font-size: 14px; +} + +.footer__contact a { + color: white; + text-decoration: none; +} + +.footer__contact a:hover { + text-decoration: underline; +} + +.footer__info-pay { + padding: 40px 0; + border-bottom: 1px solid #dadada; +} + +.footer__info-pay .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.footer__credits { + padding: 32px 0; + font-size: 14px; + text-align: center; +} + +.footer__credits p { + margin: 0; +} + +.footer__credits a { + color: black; + text-decoration: none; + font-weight: 700; +} + +.footer__credits a:hover { + text-decoration: underline; +} + +.modal { + z-index: 99999; + overflow-x: hidden; + overflow-y: auto; + background: rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.modal__dialog { + background: white; + max-width: 100%; + padding: 100px; + border-radius: 20px; + text-align: center; +} + +.modal__header { + margin-bottom: 80px; +} + +.modal__body { + font-size: 28px; + margin: 0 auto 60px auto; + width: 300px; + max-width: 100%; +} + +.modal__footer .btn + .btn { + margin-left: 30px; +} + +.modal__title { + text-transform: uppercase; + font-weight: 300; + color: #ff6143; + margin: 0; +} + +.modal__header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/app/assets/styles/index.css.map b/app/assets/styles/index.css.map new file mode 100644 index 0000000..640f431 --- /dev/null +++ b/app/assets/styles/index.css.map @@ -0,0 +1,15 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "index.scss", + "_css-reset.scss", + "_element-base.scss", + "_variables.scss", + "_layout.scss", + "_content.scss", + "_components.scss" + ], + "names": [], + "file": "index.css" +} \ No newline at end of file diff --git a/app/assets/styles/index.scss b/app/assets/styles/index.scss new file mode 100644 index 0000000..2f7d5f2 --- /dev/null +++ b/app/assets/styles/index.scss @@ -0,0 +1,17 @@ +// CSS Reset +@import 'css-reset'; + +// Element base +@import 'element-base'; + +// CSS Variables +@import 'variables'; + +// Layout +@import 'layout'; + +// Content +@import 'content'; + +// Componentes +@import 'components'; diff --git a/app/views/index.html b/app/views/index.html index e69de29..9e354a6 100644 --- a/app/views/index.html +++ b/app/views/index.html @@ -0,0 +1,73 @@ + + + + + + CarnaStore — Venha ser felix no carnaval! + + + + + + + +
+ + +
+

Se você comprar eu te dou um beijo (só se quixer)

+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/app/views/show.html b/app/views/show.html new file mode 100644 index 0000000..478001b --- /dev/null +++ b/app/views/show.html @@ -0,0 +1,99 @@ + + + + + + CarnaStore — Venha ser felix no carnaval! + + + + + + + +
+ + +
+

Outras fantasias que vc vai gostar

+ +
+
+
+ + + +
+
+
+ confete +

Vivaaaa!

+
+
+

Adicionamos o item no seu carrinho!

+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/layout/images/banner.jpg b/layout/images/banner.jpg deleted file mode 100644 index 0ee513c..0000000 Binary files a/layout/images/banner.jpg and /dev/null differ