LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

[ / ] Lorem ipsum [ / ]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque totam quisquam modi repudiandae ab. Perferendis id deserunt deleniti possimus vitae, nihil eos esse atque? Mollitia neque minima laboriosam, aliquam sunt tempora eveniet! Non numquam nisi in, quaerat laborum necessitatibus saepe veritatis, id fuga quis, nihil libero at itaque vero fugit laudantium vitae eos quod possimus! Porro expedita magnam ipsum in, voluptatibus debitis optio sequi cupiditate, tenetur deserunt nesciunt est unde magni distinctio excepturi libero quia eveniet ullam illum iure! Explicabo tenetur minima, libero placeat voluptatibus adipisci beatae ea nobis, aliquam consequuntur porro? Provident, ullam? Saepe, eligendi soluta consectetur, magni optio possimus quae maiores pariatur sit neque quibusdam necessitatibus error molestias dignissimos earum tempore dicta eveniet qui! Dolorem, suscipit nam ipsam autem harum reprehenderit consequuntur. Ut dignissimos deleniti eos eaque! Illum suscipit nam quos asperiores sapiente at ex itaque! Nesciunt ab unde eos nemo consequuntur impedit alias, molestiae blanditiis nulla? Aspernatur?

Lorem ipsum dolor sit amet consectetur adipisicing elit. A quos in, odit praesentium autem ut placeat aliquid natus. Provident non obcaecati placeat, voluptatibus repellendus eum. Iure fuga voluptas expedita odit, adipisci vitae soluta voluptate ad.
© 20xx Lorem, ipsum dolor.
CSS
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ffdfac;
  font-family: Arial, helvetica, sans-serif;
}

.header { /* This is where the magic happens */
  display:flex;

  clip-path: polygon(
  0 0, /*left top*/
  100% 0, /*right top*/
  100% 3.2vw, /*right bottom*/
  0 6vw /*left bottom*/
  );
  background-color:#383f49;
  width:100%;
  height:125px;
}

.header #brand {
  display: flex;
  align-items: center;
  color: #ffdfac;
  text-shadow: 1px 1px #ca8705;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 10px;
  text-transform: uppercase;
  padding-left: 30px;
}

.container {
  display: flex;
  padding: 10px 35px;
}

.about {
  flex: 2;
}

.aside {
  margin-left: 20px;
  flex: 1;
}

.foot {
  padding-top: 20px;
  margin-left: 30px;
}
JS
/* Utilized https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/ for most of the guidance I needed and then also used https://bennettfeely.com/clippy/ to help me find the trapezoid I needed */

/* Best viewed in Chrome */

Description

Sketching out a simple slanted header design was proving difficult until I came across the following resources: Utilized https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/ for most of the guidance I needed for the desired effect and then also used https://bennettfeely.com/clippy/ to help me find the trapezoid I needed.
Term
Sat, 04/14/2018 - 20:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv