cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
  <title>What's the future of flat design?</title>
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
</head>

<body>
  <header>
  <h1>What's the future of flat design?</h1>
  </header>
  <p class="author">by Aysha Khan</p>
  <p>
    <p>Until 2012, the world of web and print design revolved around gradients, three-dimensional interfaces and so-called skeuomorphic designs that looked so real you could reach out and touch it. Apple is known for popularizing such design in its app
      icons and interfaces.</p>
  <img src="http://factionmedia.com/wp-content/uploads/2014/05/skeuomorphic-ios.png" class="left-image"</img>
  <p>
    But in 2013, the trend began to veer toward minimal, thin, simple and flat designs that reduced clutter and shine and texture, mimicking styles that have long been popular with print designers. These designs tend to rely on grid-based layouts, too. </p><p>Within months, flat design had revolutionized digital media and even become the norm, even – and especially – among Apple. Gurus touted the renewed focus on content and usability, rather than sparkles and widgets that increased page load time.
  </p>
  <img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2013/09/mobile_os_mini.jpg" class=</>
  <p>
    “But is flat design really all it’s cracked up to be?” creative agency <a href="http://factionmedia.com/from-the-world-of-design-trends-flat-design-is-dying/">Faction’s writer Natalia Klishina asked boldly</a> in 2014. “While it started a valuable
    conversation about simplification, it’s already on its way out.”
  </p>
  <p>
    Not so much, it turns out. From vector icons to app interfaces to game design, flat design has continued to expand even well into 2016.
  </p>
  <p>
    “With responsive design pretty much taken over the Web, expect flat design to continue to be a dominate [sic] design aesthetic throughout 2016,” The Next Web writer Amber Leigh Turner <a href="http://thenextweb.com/dd/2016/01/01/10-web-design-trends-can-expect-see-2016/">wrote </a>just
    three months ago. “Not only will there be websites that launch with flat designs, those sites who’ve already embraced the flat design trend will look to make things even flatter.”
  </p>
  <p>
    Turner points to Google’s recent logo redesign as an example, where the colorful letters lost their bevels and texture.
  </p>
  <img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2015/09/google.png">
  </>
  <p>
    Google has also been pushing since 2014 for a large-scale shift toward <a href="https://www.google.com/design/spec/material-design/introduction.html">material design</a>, which adds hints of depth and tactile interactivity to the foundations of clean, flat design. Industry
    professionals say that material design has finally become the next major trend for web designers this year.
  </p>
<div class="videoWrapper">
<iframe height=400px width=100% src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</body>
            
          
!
            
              body {
  padding: 0px;
  margin: 0px;
  font-family: 'Fauna One';
  background-color: #fafafa;
}

header {
  position: relative;
  padding-top: 20vh;
  padding-left: 10vh;
  padding-right: 10vh;
  height: 500px;
  background: url(https://images.unsplash.com/uploads/141103282695035fa1380/95cdfeef?ixlib=rb-0.3.5&q=80&fm=jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;}

p, iframe {
  max-width: 700px;
  display: block;
  font-size: 20px;
  line-height: 28px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}

img {
  width: 100%;
}

h1 {
  font-size: 4.5em;
  top: 1em;
  font-family: 'Playfair display';
  max-width: 700px;
  padding-top: 1em;
  padding-right: 1em;
  padding-left: 1em;
   display: block;
  margin-top: 1em;
}

.author {
  padding-top: 1em;
  text-transform: uppercase;
  font-family: 'Playfair display';
  padding-bottom: 1.5vw;
  color: gray;
}

video {
  width: 100%;
}

.right-image {
  float: right;
  width: 49.9%;
  padding: 1.5em
}

.left-image {
  float: left;
  width: 40%;
  padding: 1.5em;
}

img {
  padding-bottom: 3px;
}

a {
  color: #3b5998;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 650px) {
    h1 {
  font-size: 2.5em;
  }
  header {
  padding-top: 5vh;
  padding-left: 5vh;
  padding-right: 5vh;
  height: 300px;
  }
  
  @media only screen and (max-width: 400px) {
    h1 {
  font-size: 1.5em;
  }
  header {
  padding-top: 1vh;
  padding-left: 3vh;
  padding-right: 3vh;
  padding-bottom: 5vh;
  height: 180px;
  }
}
  
  .videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
  padding-right: 1em;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console