cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

              <div class="container">  
  <div class="header-photo">
  <div class="metadata">
    <p>Author: <span itemprop="name">Jane Doe</span>, <time datetime="2014-11-7">7th of November 2014</time></p>
  <h1>A Guide to The Mediterranean Diet</h1>
  <p>Truth be told this is just some sample text I'm adding here for the purposes of this CodePen demo and it's based on an article <a href="#">about the Mediterranean diet</a>. It is a diet that is certainly not the fastest way to lose weight, however it belongs on the list of diets that work. It should come as no surprise that this eating program is based around the eating habits of people who live in Mediterranean areas. The key benefit of following this diet is that you will develop healthy habits and improve the quality of your life. Since this diet doesn’t require you to give up on any particular sort of food, you won’t find it too difficult to adapt to a new lifestyle.</p>

  <p>You will see that the Mediterranean diet meal plan is very easy to follow and that this food is extremely delicious! If you’ve ever visited any of the beautiful Mediterranean countries then you probably already know how good their cuisine is.</p>

  <h2>The Secret behind the Mediterranean diet</h2>

  <p>Perhaps you already know that people in the Mediterranean have a longer, healthier life than those of us in the West. What is that? Well, many believe that the simple fact that they always spend a lot of time cooking their own fresh meals is enough, but that isn’t the whole story. Their exposure to clean air and the sunlight throughout the entire year is believed to have a huge impact on the quality of their lifestyle. However, let’s just focus on their eating habits and their diet program for now, shall we?</p>

  <h2>The Food Groups and the Mediterranean Diet Calories</h2>

  <p>If you’ve ever been to Italy, Cyprus or Greece, you probably know that there certain key features in their cuisines that are indigenous to the Mediterranean coast. Olive oil (and olives themselves), pasta, salads, fish and seafood are among the main food groups used in Mediterranean diet meal plan.</p>

  <p>The recommended calorie intake is 2500 calories per day for men and 2000 calories per day for women. If your lifestyle is full of demanding physical activity then it is perfectly normal and recommended to exceed these limits until you feel that your needs are satisfied. Remember that goal of this diet is to develop a healthy lifestyle and not to starve yourself until you start losing weight!</p>

  <p>Exercise is obviously highly encouraged and will help you burn more calories and lose weight quicker. The Mediterranean diet itself is more of an eating program that should be a part of a larger weight loss strategy. Because this diet is part of one of the healthiest lifestyles on the planet we can certainly agree that it is one of those <a href="#" >diets that work great</a> and can improve the overall quality of your life.</p>
              @import url(https://fonts.googleapis.com/css?family=Droid+Serif:700,400italic);
@import url(https://fonts.googleapis.com/css?family=Raleway);

  background-color: #ecf0f1;

  width: 80%;
  margin: 1em auto;

.container h1{
  font-family: "Droid Serif";
  font-weight: 700;

.container h2{
  font-family: "Droid Serif";
  font-weight: 400;

.container h1,h2{

.container p{
  font-family: "Raleway";
  font-weight: 400;

.container a{
  color: #3498db;
  transition: 0.6s all;
  text-decoration: none;

.container a:hover{
  color: #1abc9c;

  width: full;
  height: 400px;
  background: url('http://healthfamilyplus.com/diet-foods/img/46b.jpg');
  background-repeat: no-repeat;
  margin: 0 auto;

.metadata p{
  font-size: 0.9em;
Loading ..................