.jogger
	.jogger__header
		.jogger__menu
			i.fa.fa-align-center.jogger__menu-icon
			span.jogger__menu-text Menu
		h1.jogger__heading Shoes
		ul.tool
			li.tool__item
				i.fa.fa-heart-o
			li.tool__item
				i.fa.fa-search
			li.tool__item
				i.fa.fa-shopping-bag
	.jogger__nav
		ul.category
			li.category__item
				a.category__link(href="javascript:void(0)") Brands
			li.category__item
				a.category__link(href="javascript:void(0)") Footwear
			li.category__item
				a.category__link(href="javascript:void(0)") Clothing
		.social
			span.social__text Follow us
			ul.social__share
				li.social__share-item
					a.social__share-link(href="javascript:void(0)")
						i.fa.fa-facebook
				li.social__share-item
					a.social__share-link(href="javascript:void(0)")
						i.fa.fa-twitter
	.jogger__slider
		ul.slider
			li.slider__item
				h2.slider__title Congo african jogger
				.slider__img
					img(src="https://preview.ibb.co/m4VkQd/congo.png", alt="Congo african jogger")
					.slider__price $79.00
				button.btn.btn--secondary Add to cart
		ul.slider__arrow
			li.slider__arrow-item.is-active
				span Next 
				span →
			li.slider__arrow-item
				span Prev 
				span ←
View Compiled
/*<!-- https://preview.ibb.co/m4VkQd/congo.png-->*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,100, 300,700");
@import url('https://fonts.googleapis.com/css?family=Lobster');
$primary-color: #BA426C;
$secondary-color: #F3A74C;

$bg-color-top: #953c6c;
$bg-color-bottom: #5A3D57;
$nav-color: #60395C;

body {
	font-family: "Montserrat", sans-serif;
	background-image: linear-gradient(to right, $bg-color-bottom, $bg-color-top);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 100vh;
	overflow: auto;
}

.btn {
	border: 0;
	cursor: pointer;
	padding: 1.5rem;
	min-width: 20rem;
	color: white;
	text-transform: uppercase;
	box-shadow: 0 1rem 4rem rgba(#000, .3);
	outline: none;
	font-family: "Montserrat";
	transform: translateY(-5px);
	transition: .2s;
	&:active {
		transform: translateY(0);
		box-shadow: 0 .5rem 4rem rgba(#000, .3);
	}
	&--secondary {
		background-color: $secondary-color;
	}
}

.jogger {
	background-color: $primary-color;
	width: 95%;
	min-height: calc(100vh - 10rem);
	margin: 5rem auto;
	box-shadow: 0 1rem 4rem rgba(#000, .2);
	overflow: hidden;
	position: relative;
	z-index: 10;
	&:before {
		content: "JOGGER";
		@include centerBox();
		font-size: 18vw;
		font-weight: 700;
		z-index: -1;
		color: black;
		opacity: .025;
	}
	&__header {
		@include flex(row, space-between, center);
	}
	
	&__heading {
		font-size: 2.5rem;
		color: white;
		font-family: "Lobster", sans-serif;
	}
	
	&__menu {
		cursor: pointer;
		padding: 2rem 3rem;
		background-color: $nav-color;
		color: white;
		text-transform: uppercase;
		@include flex(row, center, center);
		&-text {
			margin-left: 1rem;
		}
		&-icon {
			font-size: 1.6rem;
		}
	}
	
	&__nav {
		background-color: white;
		padding: 4rem 3rem;
		height: calc(100% - 5.6rem);
		@include absolute(5.6rem, null, null, 0);
		@include flex(row, space-between, center);
		writing-mode: vertical-lr;
		z-index: 20;
		
		@include maxWidth(52em) {
			display: none;
		}
		.share__link .fa {
			transform-origin: 50% 50%;
    	transform: rotate(90deg);
		}
		&.is-active {
			display: flex;
		}
	}
	
	&__slider {
		width: 100%;
		min-height: 100vh;
		@include relative();
	}
}

.slider {
	&__img {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	&__item {
		min-height: 100vh;
		padding: 4rem 1.5rem;
		text-align: center;
		@include flex(column, space-between, center);
	}
	&__title,
	&__price{
		font-size: 4rem;
		color: white;
		text-transform: uppercase;
		font-weight: 700;
	}
	
	&__arrow {
		@include absolute(50%, 0, null, null);
		transform: translateY(-50%);
		background-color: rgba(#fff, .1);
		box-shadow: -.5rem 0 4rem rgba(#000, .2);
		&-item {
			cursor: pointer;
			padding: 3rem 2rem;
			text-transform: uppercase;
			color: white;
			text-align: center;
			span {
				display: block;
				margin-top: .25rem;
				margin-bottom: .25rem;
			}
			&.is-active {
				background-color: $secondary-color;
			}
		}
	}
}

.category {
	@include flex(row, center, center);
	&__item {
		&:not(:last-child) {
			margin-bottom: 2rem;
		}
	}
	&__link {
		color: black;
		text-transform: uppercase;
		text-decoration: none;
		font-weight: 700;
		transition: .2s;
		&:hover { color: $primary-color; }
	}
}

.social {
	@include flex(row, space-between, center);
	&__text {
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 2rem;
	}

	&__share {
		@include flex(row, center, center);
		&-item {
			&:not(:last-child) {
				margin-bottom: 1rem;
			}
		}
		&-link {
			color: black;
			.fa {
				transform: rotate(90deg);
			}
		}
	}
}


.tool {
	padding: 0 3rem;
	@include flex(row, center, center);
	&__item {
			color: white;
			&:not(:last-child) {
				margin-right: 1.5rem;
		}
	}
	
}
View Compiled

External CSS

  1. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  2. https://codepen.io/blackzero/pen/xjPLwY

External JavaScript

This Pen doesn't use any external JavaScript resources.