CodePen Embed - #CodepenChallenge Noodles: Restaurant Home Page

- 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 &lt;Brand Name&gt;!
			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 &lt;Brand Name&gt;
			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;
}

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

This Pen is owned by Takane Ichinose on CodePen.

See more by @takaneichinose on CodePen

External CSS

External JavaScript