Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <title>Coco Chanel</title>
    <h1 id="title">Coco Chanel<h1/>
    <figure id="img-div"><img id="image" src="http://www.yuliamoatti.com/wp-content/uploads/2016/05/chanel-gabrielle-luxury-coco-chanel-history-young.jpg" alt="Coco Chanel Picture.">
    <p id="img-caption"> Coco Chanel in her famous pearl necklace</p></figure>
  </head>
    <main>
      <p> Who is Coco Chanel? Ah, here is a simple answer: A women, a fashion icon and a dress maker.
      <q><em>Women think of all colors except the absence of color. I have said that black has it all. White too. Their beauty is absolute. It is the perfect harmony. -Coco Chanel</em></q></p>
<div id="main">
      <section  id="tribute-info">
        <h3> Here is her timeline:</h3>
        <ul>
          <li>19 August 1883: Gabrielle Bonheur Chanel was born in Maine-et-Loire, France.</li>
          <li>1894: Her mom died, Coco had a poor and rejected childhood.</li>
          <li>At the age of twenty-three, Chanel became Balsan's mistress. Balsan showered Chanel with the baubles of "the rich life"</li>
          <li>In 1908, Chanel began an affair with one of Balsan's friend</li>
          <li>In 1910: She became a licensed milliner and opened a boutique at 21 rue Cambon, Paris, named Chanel Modes.</li>
          <li> Chanel's millinery career bloomed thanks to theatre actress Gabrielle Dorziat wore her hat </li>
          <li>In 1913:Chanel opened a boutique in Deauville where she introduced deluxe casual clothing </li>
          <li>In 1921: She opened an early incarnation of a fashion boutique, featuring clothing, hats, and accessories, later expanded to offer jewellery and fragrances-this is the year Chanel No.5 was launched</li>
          <li> 1924:Chanel made an agreement with the Wertheimer brothers, created a corporate entity, Parfums Chanel</li>
          <li> Sadly,by 1935, Chanel had become a habitual drug user </li>
          <li>In 1939, at the beginning of World War II: Chanel closed her shops, maintaining her apartment situated above the couture house at 31 Rue de Cambon</li>
          <li>On 17 May 1947,Chanel received wartime profits from the sale of Chanel No. 5, make her one of the richest women in the world</li>
          <li> September 1944: Chanel was interrogated by the épuration. Churchill's intervention at the end of the war prevented Chanel's punishment for spy collaborations, and ultimately salvaged her legacy.</li>
          <li>1954:Channel made a comeback with her collection,the French press were cautious due to her collaboration during the war and the controversy of the collection. However, the American and British press saw it as a "breakthrough".</li>
          <li> 10 January 1971:Coco Chanel died and her last words were "You see, this is how you die."</li>
        </ul>
        <p> Here's her famous design</p>
        <ol>
          <li>The Boy Bag: The characteristic details are the heavy hardware, bold shape and unique lock.</li>
          <li> Quilted Bag: In February 1955 the iconic bag was born. </li>
          <li> Chanel Two-Tone Shoes</li>
          <li> The Breton Top </li>
          <li> The Little Black Dress </li>
          <li> The Tweed Jacket </li>
          <li> Chanel No. 5 </li>
          <li> Yachting pants</li>
        </ol>
      </section>
   </main>
  <footer>
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Coco_Chanel" target="_blank">Click here to find out more about Coco Chanel </a>
      </div>
      </footer>
 

 
              
            
!

CSS

              
                #title {color:rgb(225,210,25);
          font-family: lobster;
          font-size: 48px;
          background-color:black;
          text-align:center;
           }

  #img-caption{text-align:center;
               background-color:white;
               color:black;}
  p{ text-align: center;
                 font-size: 20px;
                 font-style: serif;
                 background-color:black;
                 color:#FFFFFF;
                 padding:16px;}
  
  #main { box-shadow: 10px 10px 10px,rgba(10,3,2,0.2);
    border: 2px solid;
    border-radius: 25px;
    margin:auto;
    padding: auto;
    line-height:30px;}
  
  img {display: block;
       margin-left: auto;
       margin-right: auto;
       width: 50%;
         border-radius: 50%;
        background-color:white;
      max-width:600px;
       
         
         }

  #img-caption{text-align:center;
               font-size:18px;}
h3{font-size:24px;
   text-align:center;}
                
ul{font-size:20px;
   margin-left:25%;
   margin-right:25%;
   }
ol{font-size:20px;
  margin-left:25%;
   margin-right:25%;
   }
                
  #tribute-link{color:black;
                font-size:18px;
                }

 
   
              
            
!

JS

              
                
              
            
!
999px

Console