- var bannerCount = 5;
#app
.banner
- for (var i = 0; i < bannerCount; i++)
.img(class="img-" + i v-bind:class="{ 'active' : activeImg == " + i + " }")
.banner-front
h1 Codepen Challenge Noodles
h1
small Noodle Store
.controls
a(href="#" v-on:click="activeImg = (activeImg == 0) ? " + (bannerCount - 1) + " : (activeImg - 1)")
i.fas.fa-arrow-left
span {{ activeImg + 1 }}
a(href="#" v-on:click="activeImg = (activeImg == " + (bannerCount - 1) + ") ? 0 : (activeImg + 1)")
i.fas.fa-arrow-right
.container
.card.bg-yellowish
h1.heading Welcome to <Brand Name>!
h1.heading
small Your noodlicious choice!
.grid
.disp.disp-1
.disp.disp-2
.disp.disp-3
.card.bg-reddish.text-white
h1.heading Brief history behind <Brand Name>
p.margin-0.text-justify Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.card.bg-orangeish.text-white
.grid
.icon
i.fas.fa-utensils
span Menu
.icon
i.fas.fa-phone
span Reserve
.icon
i.fas.fa-truck
span Deliver
.banner
.img.img-6.active
.banner-front
h1 How about a serving?
h1
small You'll like this
.container
.card
.contact
.left
.schedule
h2 Opening Time
h4 Weekdays
p x:xx AM - x:xx PM
h4 Weekends
p x:xx AM - x:xx PM
.right
.map Map goes here...
.footer
p This is just an example, so this is not copyrighted
p Example for Social Media links
p
a(href="#")
i.fab.fa-facebook-f
a(href="#")
i.fab.fa-twitter
a(href="#")
i.fab.fa-instagram
View Compiled
$background-image: (
url(https://images.unsplash.com/photo-1548280460-efb82e3a1e52?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ),
url(https://images.unsplash.com/flagged/photo-1556742524-750f2ab99913?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ),
url(https://images.unsplash.com/photo-1558892349-f0812740196e?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ),
url(https://images.unsplash.com/photo-1540277104473-b662b6715a5b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ),
url(https://images.unsplash.com/photo-1540162416395-16f7dfbb68d1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
);
$spacing: 50px;
$heading-font-size: 28px;
$banner-front-color: #ffffff;
$banner-front-font-family: "Lobster Two", cursive;
$banner-front-font-size: $heading-font-size;
$main-background-color: #e8e8e8;
$background-extra-size: 150px;
$background-extra-color: $main-background-color;
$controls-color: #ffffff;
$controls-font-family: "Fredoka One", cursive;
$controls-font-size: 24px;
$controls-background-color: rgba(0, 0, 0, 0.6);
$controls-width: 150px;
$controls-height: 50px;
$card-color: #1f0d02;
$card-font-family: "Raleway", sans-serif;
$card-font-size: 18px;
$card-background-color: #ffffff;
$card-max-width: 960px;
$grid-grid-gap: 10px;
$disp-height: calc(100vw - #{$spacing * 2});
$disp-max-height: 240px;
$disp-after-color: #ffffff;
$disp-after-background-color: rgba(0, 0, 0, 0.7);
$icon-height: calc(100vw - #{$spacing * 2});
$icon-max-height: 240px;
$schedule-spacing: 20px;
$map-background-color: #efefef;
$footer-background-color: #ffffff;
$footer-spcing: 20px;
$footer-links-font-size: 40px;
$footer-links-margin: 0 15px;
@import url("https://fonts.googleapis.com/css?family=Lobster+Two&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap");
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
#app {
background-color: $main-background-color;
}
.banner {
width: 100%;
height: calc(100vh + #{$background-extra-size});
position: relative;
}
.img {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 800ms ease-out;
@for $i from 1 through length($background-image) {
&-#{$i - 1} {
background-image: nth($background-image, $i);
}
&.img-6 {
background-image: url(https://images.unsplash.com/photo-1501200040150-4d65c94e8f21?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}
}
&.active {
opacity: 1;
}
}
.banner-front {
color: $banner-front-color;
font-family: $banner-front-font-family;
font-size: $heading-font-size;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(50, 30, 0, 0.6), rgba(50, 30, 0, 0.2) calc(100% - #{$background-extra-size}), $background-extra-color);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
h1 {
text-align: center;
word-wrap: break-word;
padding: 0;
margin-top: 0;
&:first-child {
margin: calc(-#{$background-extra-size} - #{$heading-font-size / 2}) $spacing 0 $spacing;
}
small {
font-size: 0.7em;
}
}
}
.controls {
color: $controls-color;
font-family: $controls-font-family;
font-size: $controls-font-size;
background-color: $controls-background-color;
width: $controls-width;
height: $controls-height;
display: flex;
position: absolute;
top: 0;
left: calc(50% - #{$controls-width / 2});
span, a {
color: inherit;
font-family: inherit;
text-align: center;
width: 100%;
height: 100%;
line-height: $controls-height;
display: block;
}
a i {
transition: transform 150ms ease-in-out;
}
a:hover i {
transform: scale(1.5);
}
a:active i {
transform: scale(0.9);
}
}
.container {
width: 100%;
margin-top: -$spacing;
display: flex;
flex-flow: column nowrap;
align-items: center;
position: relative;
}
.card {
color: $card-color;
font-family: $card-font-family;
font-size: $card-font-size;
background-color: $card-background-color;
width: 100%;
max-width: $card-max-width;
padding: $spacing;
margin-bottom: $spacing;
box-sizing: border-box;
}
.heading {
font-size: $heading-font-size;
text-align: center;
word-wrap: break-word;
small {
font-size: 0.7em;
}
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: $grid-grid-gap;
}
.disp {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: $disp-height;
max-height: $disp-max-height;
overflow: hidden;
&-1 {
background-image: url(https://images.unsplash.com/photo-1555126634-323283e090fa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
&:after {
content: 'Noodes for cold weather';
}
}
&-2 {
background-image: url(https://images.unsplash.com/photo-1551183053-bf91a1d81141?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
&:after {
content: 'Fried noodles for a change';
}
}
&-3 {
background-image: url(https://images.unsplash.com/photo-1533450823749-791a21b4692a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
&:after {
content: 'Western noodles (Spaghetti FTW)';
}
}
&:after {
color: $disp-after-color;
background-color: $disp-after-background-color;
text-align: center;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
}
&:hover:after {
transform: scale(1);
transition: transform 250ms ease-in-out;
}
}
$icon-i-font-size: 64px;
$icon-i-margin-bottom: 10px;
$icon-span-font-size: 20px;
.icon {
height: $icon-height;
max-height: $icon-max-height;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
i {
font-size: $icon-i-font-size;
margin-bottom: $icon-i-margin-bottom;
}
span {
font-size: $icon-span-font-size;
}
}
.contact {
display: flex;
flex-direction: column;
}
.left {
text-align: center;
width: 100%;
padding: $spacing;
box-sizing: border-box;
}
.schedule {
h2 {
font-size: 24px;
}
h4, p {
font-size: 18px;
}
h2, h4, p {
padding: 0;
margin: 0;
margin-bottom: $schedule-spacing;
&:last-child {
margin-bottom: 0;
}
}
}
.right {
width: 100%;
}
.map {
background-color: $map-background-color;
width: 100%;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.footer {
text-align: center;
background-color: $footer-background-color;
width: 100%;
padding: $spacing;
position: relative;
box-sizing: border-box;
p {
margin-bottom: $footer-spcing;
&:last-child {
margin-bottom: 0;
}
a {
color: $card-color;
font-size: $footer-links-font-size;
margin: $footer-links-margin;
display: inline-block;
transition: transform 150ms ease-out;
&:hover {
transform: scale(1.5);
}
}
}
}
@media (min-width: 540px) {
.banner-front {
font-size: $heading-font-size;
h1:first-child {
margin: -#{$background-extra-size - ($heading-font-size / 2)} $spacing 0 $spacing;
}
}
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
.contact {
flex-direction: row;
}
.left {
width: 30%;
}
.right {
width: 70%;
}
}
.bg-yellowish {
background-color: #e2ba0f;
}
.bg-reddish {
background-color: #e52c09;
}
.bg-orangeish {
background-color: #d95600;
}
.text-white {
color: #ffffff;
}
.text-justify {
text-align: justify;
}
.margin-0 {
margin: 0;
}
View Compiled
var app = new Vue({
el: '#app',
data: {
activeImg: 0
},
mounted: function() {
let self = this;
document.addEventListener('readystatechange', function() {
if (document.readyState == 'complete') {
self.activeInterval = setInterval(function() {
if (self.activeImg == 4) {
self.activeImg = 0;
}
else {
self.activeImg++;
}
}, 5000);
}
});
}
});
View Compiled
