AitoSama/diagonal-split-landing-page.markdown

## diagonal-split-landing-page.markdown

      
    Raw
  

              diagonal-split-landing-page.markdown
            
          
    Diagonal Split Landing Page

A Pen by Sophie Kowalski on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Diagonal Split Landing Page</title>
</head>

<body>
  <div class="logo">
    <div class="logo-container">
      <img src="https://cdn.freebiesupply.com/logos/large/2x/codepen-icon-logo-svg-vector.svg" alt="Logo">
    </div>
  </div>

  <div class="oblique">
    <div class="main-block-oblique skew-block">
      <div class="skew-block-repeat">
        <a href="#">
          <div class="oblique-inner">
            <div class="image-wrapper">
              <div class="main-image">
                <img class="image-img"
                  src="https://images.unsplash.com/photo-1545129228-886291dac46f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80"
                  alt="">
              </div>
            </div>
          </div>
          <div class="oblique-caption caption-top">
            <h2>Entry 1</h2>
            <button href="#">Discover</button>
          </div>
        </a>
      </div>
      <div class="skew-block-repeat">
        <a href="#">
          <div class="oblique-inner">
            <div class="image-wrapper">
              <div class="main-image">
                <img class="image-img"
                  src="https://images.unsplash.com/photo-1580909770169-ecd6c5a870eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"
                  alt="">
              </div>
            </div>
          </div>
          <div class="oblique-caption caption-bottom">
            <h2>Entry 2</h2>
            <button href="#">Discover</button>
          </div>
        </a>
      </div>
    </div>
  </div>

  <div class="footer">
    <ul class="landing-social-links">
      <li>
        <a href="#"><i class="fab fa-facebook-f fa-2x"></i></a>
      </li>
      <li>
        <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
      </li>
      <li>
        <a href="#"><i class="fab fa-linkedin-in fa-2x"></i></a>
      </li>
      <li>
        <a href="#"><i class="fab fa-youtube fa-2x"></i></a>
      </li>
      <li>
        <a href="#"><i class="fab fa-pinterest fa-2x"></i></a>
      </li>
    </ul>
    <p class="copyright">Copyright &copy; 2020. All rights reserved.</p>
  </div>
</body>

</html>

## style.scss
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&family=Muli&display=swap");

$skewXpos: 10deg;
$skewXneg: -10deg;

$primary: #CC917A;
$color: #fff;
$reverseColor: #000;

$lg: 992px;
$md: 768px;
$sm: 576px;
$sm: 576px;

@mixin maxSize($size) {
    @media (max-width: $size) {
        @content;
    }
}

@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

@mixin flex($value) {
    -webkit-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}

@mixin flexWrap() {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@mixin backfaceVisibility($value) {
    -webkit-backface-visibility: $value;
    backface-visibility: $value;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

html,
body {
    margin: 0;
    padding: 0;
    background: black;
}

.logo,
.footer {
    display: flex;
    width: 100%;
    position: absolute;
    font-family: "Muli", sans-serif;
}

.logo {
    .logo-container {
        // background: rgba(255, 255, 255, 0.2);
        padding: 0.2rem 1rem;
    }
    top: 2%;
    z-index: 10;
    justify-content: center;
    img {
        height: 100px;
        @include maxSize($sm) {
            height: 65px;
        }
    }
}

.footer {
    color: $color;
    bottom: 1%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    p {
        @include maxSize($sm) {
            font-size: 0.8rem;
        }
    }
    .landing-social-links {
        padding-left: 0;
        margin: 0;
        li {
            list-style-type: none;
            display: inline;
            padding: 0.2rem 0.8rem;
            a {
                i {
                    color: $color;
                    @include transition(all ease-in-out 300ms);
                    @include maxSize($sm) {
                        font-size: 1.2rem;
                    }
                }
                &:hover {
                    i {
                        color: $primary;
                    }
                }
            }
        }
    }
}

.oblique {
    position: relative;
    overflow: hidden;
    .main-block-oblique {
        overflow: hidden;
        position: relative;
        z-index: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        background-repeat: no-repeat;
        @include maxSize($md) {
            @include flexWrap();
        }
    }
    .skew-block {
        margin-left: -10vh;
        margin-right: -10vh;
    }
    .skew-block-repeat {
        will-change: transform;
        @include transition(all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1));
        opacity: 0.8;
        min-height: 100vh;
        float: left;
        position: relative;
        z-index: 0;
        @include flex(1);
        @include backfaceVisibility(hidden);
        margin: 0 -1px;
        @include maxSize($md) {
            min-height: 50vh;
        }
        &:hover {
            @include flex(1.5);
            opacity: 1;
            a {
                .oblique-caption {
                    h2 {
                        animation: bounceIn 1200ms;
                    }
                    button {
                        opacity: 0.8;
                        background: $color;
                        color: $reverseColor;
                    }
                }
            }
        }
        a {
            @include transition(all ease-in-out 300ms);
            outline: none !important;
            text-decoration: none;
            .oblique-inner {
                -webkit-transform: skewX($skewXneg);
                transform: skewX($skewXneg);
                margin-left: 0;
                margin-right: 0;
                @include transition(box-shadow 0.2s ease-out);
                position: relative;
                @include backfaceVisibility(hidden);
                overflow: hidden;
                height: 100%;
                position: absolute;
                width: 100%;
                .image-wrapper {
                    margin-left: -10vh;
                    margin-right: -10vh;
                    -webkit-transform: skewX($skewXpos);
                    transform: skewX($skewXpos);
                    position: relative;
                    @include backfaceVisibility(hidden);
                    height: 100%;
                    .main-image {
                        position: absolute;
                        top: -2px;
                        left: -2px;
                        right: -2px;
                        bottom: -2px;
                        .image-img {
                            position: absolute;
                            width: 100%;
                            -o-object-fit: cover;
                            object-fit: cover;
                            height: 100%;
                            @include backfaceVisibility(hidden);
                            @include transition(0.2s ease-out);
                            max-width: 100%;
                            max-height: 100%;
                            vertical-align: middle;
                            border: 0;
                        }
                    }
                }
            }
            .oblique-caption {
                position: absolute;
                bottom: 90px;
                color: $color;
                z-index: 1;
                width: 100%;
                bottom: auto;
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                text-align: center;
                &.caption-top {
                    @include maxSize($md) {
                        top: 60%;
                    }
                }
                &.caption-bottom {
                    @include maxSize($md) {
                        top: 35%;
                    }
                }
                h2 {
                    font-family: "PT Sans", cursive;
                    font-size: 4rem;
                    color: $color;
                    margin: 0;
                    padding: 0;
                    letter-spacing: 0.1rem;
                    @include maxSize($lg) {
                        font-size: 3rem;
                    }
                }
                // h5 {
                //     font-family: "Muli", sans-serif;
                //     font-size: 18px;
                //     line-height: 18px;
                //     color: #ffffff;
                //     text-transform: uppercase;
                //     margin: 0;
                //     padding: 0;
                //     letter-spacing: 2px;
                // }
                button {
                    font-family: "Muli", sans-serif;
                    font-size: 1.1rem;
                    text-transform: uppercase;
                    background: transparent;
                    color: $color;
                    border: 2px solid $color;
                    padding: 0.8rem 6rem;
                    letter-spacing: 0.1rem;
                    margin-top: 1rem;
                    opacity: 0.5;
                    cursor: pointer;
                    @include transition(all 800ms);
                    @include maxSize($lg) {
                        font-size: 1rem;
                        padding: 0.8rem 4rem;
                    }
                    @include maxSize($md) {
                        opacity: 0.9;
                    }
                }
            }
        }
    }
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Diagonal Split Landing Page</title>
	</head>

	<body>
	<div class="logo">
	<div class="logo-container">
	<img src="https://cdn.freebiesupply.com/logos/large/2x/codepen-icon-logo-svg-vector.svg" alt="Logo">
	</div>
	</div>

	<div class="oblique">
	<div class="main-block-oblique skew-block">
	<div class="skew-block-repeat">
	<a href="#">
	<div class="oblique-inner">
	<div class="image-wrapper">
	<div class="main-image">
	<img class="image-img"
	src="https://images.unsplash.com/photo-1545129228-886291dac46f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80"
	alt="">
	</div>
	</div>
	</div>
	<div class="oblique-caption caption-top">
	<h2>Entry 1</h2>
	<button href="#">Discover</button>
	</div>
	</a>
	</div>
	<div class="skew-block-repeat">
	<a href="#">
	<div class="oblique-inner">
	<div class="image-wrapper">
	<div class="main-image">
	<img class="image-img"
	src="https://images.unsplash.com/photo-1580909770169-ecd6c5a870eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"
	alt="">
	</div>
	</div>
	</div>
	<div class="oblique-caption caption-bottom">
	<h2>Entry 2</h2>
	<button href="#">Discover</button>
	</div>
	</a>
	</div>
	</div>
	</div>

	<div class="footer">
	<ul class="landing-social-links">
	<li>
	<a href="#"><i class="fab fa-facebook-f fa-2x"></i></a>
	</li>
	<li>
	<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
	</li>
	<li>
	<a href="#"><i class="fab fa-linkedin-in fa-2x"></i></a>
	</li>
	<li>
	<a href="#"><i class="fab fa-youtube fa-2x"></i></a>
	</li>
	<li>
	<a href="#"><i class="fab fa-pinterest fa-2x"></i></a>
	</li>
	</ul>
	<p class="copyright">Copyright © 2020. All rights reserved.</p>
	</div>
	</body>

	</html>
	@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&family=Muli&display=swap");

	$skewXpos: 10deg;
	$skewXneg: -10deg;

	$primary: #CC917A;
	$color: #fff;
	$reverseColor: #000;

	$lg: 992px;
	$md: 768px;
	$sm: 576px;
	$sm: 576px;

	@mixin maxSize($size) {
	@media (max-width: $size) {
	@content;
	}
	}

	@mixin transition($args...) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-ms-transition: $args;
	-o-transition: $args;
	transition: $args;
	}

	@mixin flex($value) {
	-webkit-box-flex: $value;
	-webkit-flex: $value;
	-ms-flex: $value;
	flex: $value;
	}

	@mixin flexWrap() {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-orient: vertical;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	}

	@mixin backfaceVisibility($value) {
	-webkit-backface-visibility: $value;
	backface-visibility: $value;
	}

	@keyframes bounceIn {
	0% {
	transform: scale(0.8);
	opacity: 0;
	}
	60% {
	transform: scale(1.1);
	opacity: 1;
	}
	100% {
	transform: scale(1);
	}
	}

	html,
	body {
	margin: 0;
	padding: 0;
	background: black;
	}

	.logo,
	.footer {
	display: flex;
	width: 100%;
	position: absolute;
	font-family: "Muli", sans-serif;
	}

	.logo {
	.logo-container {
	// background: rgba(255, 255, 255, 0.2);
	padding: 0.2rem 1rem;
	}
	top: 2%;
	z-index: 10;
	justify-content: center;
	img {
	height: 100px;
	@include maxSize($sm) {
	height: 65px;
	}
	}
	}

	.footer {
	color: $color;
	bottom: 1%;
	flex-direction: column;
	align-items: center;
	text-align: center;
	p {
	@include maxSize($sm) {
	font-size: 0.8rem;
	}
	}
	.landing-social-links {
	padding-left: 0;
	margin: 0;
	li {
	list-style-type: none;
	display: inline;
	padding: 0.2rem 0.8rem;
	a {
	i {
	color: $color;
	@include transition(all ease-in-out 300ms);
	@include maxSize($sm) {
	font-size: 1.2rem;
	}
	}
	&:hover {
	i {
	color: $primary;
	}
	}
	}
	}
	}
	}

	.oblique {
	position: relative;
	overflow: hidden;
	.main-block-oblique {
	overflow: hidden;
	position: relative;
	z-index: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	background-repeat: no-repeat;
	@include maxSize($md) {
	@include flexWrap();
	}
	}
	.skew-block {
	margin-left: -10vh;
	margin-right: -10vh;
	}
	.skew-block-repeat {
	will-change: transform;
	@include transition(all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1));
	opacity: 0.8;
	min-height: 100vh;
	float: left;
	position: relative;
	z-index: 0;
	@include flex(1);
	@include backfaceVisibility(hidden);
	margin: 0 -1px;
	@include maxSize($md) {
	min-height: 50vh;
	}
	&:hover {
	@include flex(1.5);
	opacity: 1;
	a {
	.oblique-caption {
	h2 {
	animation: bounceIn 1200ms;
	}
	button {
	opacity: 0.8;
	background: $color;
	color: $reverseColor;
	}
	}
	}
	}
	a {
	@include transition(all ease-in-out 300ms);
	outline: none !important;
	text-decoration: none;
	.oblique-inner {
	-webkit-transform: skewX($skewXneg);
	transform: skewX($skewXneg);
	margin-left: 0;
	margin-right: 0;
	@include transition(box-shadow 0.2s ease-out);
	position: relative;
	@include backfaceVisibility(hidden);
	overflow: hidden;
	height: 100%;
	position: absolute;
	width: 100%;
	.image-wrapper {
	margin-left: -10vh;
	margin-right: -10vh;
	-webkit-transform: skewX($skewXpos);
	transform: skewX($skewXpos);
	position: relative;
	@include backfaceVisibility(hidden);
	height: 100%;
	.main-image {
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	.image-img {
	position: absolute;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	height: 100%;
	@include backfaceVisibility(hidden);
	@include transition(0.2s ease-out);
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
	border: 0;
	}
	}
	}
	}
	.oblique-caption {
	position: absolute;
	bottom: 90px;
	color: $color;
	z-index: 1;
	width: 100%;
	bottom: auto;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	&.caption-top {
	@include maxSize($md) {
	top: 60%;
	}
	}
	&.caption-bottom {
	@include maxSize($md) {
	top: 35%;
	}
	}
	h2 {
	font-family: "PT Sans", cursive;
	font-size: 4rem;
	color: $color;
	margin: 0;
	padding: 0;
	letter-spacing: 0.1rem;
	@include maxSize($lg) {
	font-size: 3rem;
	}
	}
	// h5 {
	// font-family: "Muli", sans-serif;
	// font-size: 18px;
	// line-height: 18px;
	// color: #ffffff;
	// text-transform: uppercase;
	// margin: 0;
	// padding: 0;
	// letter-spacing: 2px;
	// }
	button {
	font-family: "Muli", sans-serif;
	font-size: 1.1rem;
	text-transform: uppercase;
	background: transparent;
	color: $color;
	border: 2px solid $color;
	padding: 0.8rem 6rem;
	letter-spacing: 0.1rem;
	margin-top: 1rem;
	opacity: 0.5;
	cursor: pointer;
	@include transition(all 800ms);
	@include maxSize($lg) {
	font-size: 1rem;
	padding: 0.8rem 4rem;
	}
	@include maxSize($md) {
	opacity: 0.9;
	}
	}
	}
	}
	}
	}