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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                  <div id="main">
  <h1 id="title">Priyanka Chopra Jonas</h1>
  <div>Desi Girl</div>
  <div id="img-div">
    
    <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Priyanka-chopra-gesf-2018-7565.jpg" alt "Priyanka-pic">
    <div id="img-caption">
      Priyanka Chopra Jonas at 2018 Global Education and Skills Forum.
    </div>
    
  </div>
  <div id="tribute-info">
      <h3 id="headline">Timeline</h3>
    <div class="flex-container">
     <div class="year">
       <h3 class="heading">1982</h3> 
       <p class="content">Born in India, Jamshedpur</p>        
      </div>
      <div class="year">
         <h3 class="heading">2000</h3>
         <p class="content">Crowned Miss World 2000</p>
      </div>
      <div class="year">
      <h3 class="heading">Career Beginnings & Breakthrough (2002-2004)</h3>
       <p class="content">Screen Debut in Tamil Film Thamizhan. Won 3 Filmfare awards and Producers Guild Film Award</p>
      </div>
      <div class="year">
      <h3 class="heading">Rise To Prominence (2005-2006)</h3>
       <p class="content">Karam, Waqt: The race against time, Yaqeen, Bluffmaster, Krrish, Don were some of the noteworthy perfomances.</p>
      </div>
      <div class="year">
         <h3 class="heading">Setbacks & Resurgence (2007-2008)</h3>
       <p class="content">Made a massive comback with Fashion. Received a National Film Award, Filmfare Award, IIFA award, Screen award, Producers Guild Film Award for Best Actress. Ended the year with a worldwide blockbuster Dostana.</p>
      </div>
      <div class="year">
         <h3 class="heading">Experiment With Unconventional Roles (2009-2011)</h3> 
        <p class="content">Role as a fiesty marathi woman in Kaminey earned Producers Guild Film Awards for Best Actress. Played 12 roles by herself in What's your Raashee? A femme fatale in 7 Khoon Maaf. Performance in Don2 earning her title of first female action hero in Bollywood.</p>
      </div>
      <div class="year">
      <h3 class="heading">Recognitions (2012-2014)</h3>
        <p class="content">Standing out in a male dominated movie Agneepath. Critical acclaim for her role in Barfi (India's Entry to 85th Academy Awards.) as an autistic woman. Voicing Ishani in Planes animation movie. An item song in Goliyon Ki Leela Rasleela. Lead role in commercially successful Gunday. Critical acclaim and Screen Award and Producers Guild Film Award for biographical film Mary Kom.</p>
      </div>
      <div class="year">
      <h3 class="heading">Expansion into Hollywood and Television (2015-present)</h3> 
        <p class="content">Started the year with Dil Dhadakne Do. First South Asian to headline in  an American Network Drama Series and received a People's Choice Awards. Received Padma Sri, The fourth Highest Civilian Award by Government of India for her contribution to arts. Critical acclaim for her role in Bajirao Mastani and won Filmfare Award, Screen Award,IIFA for Best Supporting Actress and Producers Guild For Best Actress. Produced Marathi Drama Ventilator and won 3 National Dilm Awards. Baywatch, A Kid Like Jake and Isn't It Romantic are some of her Hollywood movies.</p>
      </div>
      <div class="year">
      <h3 class="heading">Music Career</h3> 
        <p class="content">In 2002, Ullathe Killathe for Thamizhan, in 2012 did In My City with will.i.am and won Best Female Artist, Best Song and Best video at World Music Awards. Featured on Erase with Chainsmokers. In 2013 released the single Exotic with Pitbull. Third single, a cover of Bonnie Raitt's I Can't Make You Love Me was released in 2014. First song as a playback singer was Chaoro from Mary Kom. In 2015, a duet wuth Farhan Akhtar for Dil Dhadakne Do. Made a playback singing debut in Marathi called Baba for Ventilator. Collaborated with DJ Will Sparks for Young And Free in 2017.</p>
      </div>
      <div class="year">
      <h3 class="heading">Philanthropy</h3>
        <p class="content">Built her foundation The Priyanka Chopra Foundation For Health and Education for underprivileged children. Speaks out on women's issues. Appointed as the national UNICEF Goodwill Ambassador for child rights. Launched Save The Girl Child Campaign. Brand Ambassador for NDTV Greenathon. Adoption of seven villages to provide them with electricity. Adopted a lioness and a tigress of Birsa Bilogical Park. Lent her voice to John Lennon's music video Imagine. Provided voice-over for a documentary Girl Rising. Got selected as one of the nominees of Navaratna for the Swatch Bharat Abhiyan by Indian PM Narendra Modi. Received the Mother Teresa Memorial Award for her contribution towards social causes.
</p>
      </div>
      <div class="year">
      <h3 class="heading">Writing Career</h3> 
        <p class="content">In 2009, wrote an opinion column "The Priyanka Chopra Column for The Hindustan Times. In 2012, Times of India published her column  "No Woman In Mumbai Feels Safe Any Longer" discussing the murder of 25 year old Pallavi Purkayastha. In 2014, The Guardian published the article she wrote against female genital mutilation and child marraige. Wrote an op-ed for New York Times titled "What Jane Austen knew" about the education of girls. Wrote a monthly column for Elle titled "Pret-a-Priyanka". Writing her memoir "Unfinished".</p>
      </div>
    <div class="year">
      <h3 class="heading">Personal Life</h3> 
      <p class="content">A family centric-woman, practicing Hindu. Married Nick Jonas on December 2018.</p>
      </div>
      <div class="year">
        <h3 class="heading">In the Media</h3> 
        <p class="content">The Times Of India called her a "game changer". Film critic Subhash K. Jha labelled her "the best actress in the post-Sridevi generation". Featured on Verve's list of most powerful women in 2009 & 2010. Times named her one of the "100 Most Influential People in the World". Ranked fourth on AskMen's Top 99 Women. Forbes named her the world's eight-highest-paid TV actress. Buzznet named her World's second "Most Beautiful Women" in 2017, after Beyonce. Named one of People magazine's Most Beautiful Women in the World. Variety honoured her with the Power of Women award for her philanthropic work with UNICEF in 2017. Forbes listed her among the World's 100 Most Powerful Women in 2017 and 2018. Named one of the 500 Most Influential Business Leaders by Variety. YouGov named her the world's twelfth Most Admired Woman. First Indian Woman to be ranked first in the list of brand ambassadors of 2009 in a survey conducted by TAM AdEx. Represented many brands, including TAG Heuer, Pepsi, Nokia, Garnier & Nestle. First female representative of Hero Honda. Her likenesses made into a series of miniature dolls for Hasbro and the UK-based Bollywood Legends Corporation. First Indian actress to cast a foot impression at the Salvatore Ferragamo Museum in Florence. First Indian model to represent Guess, whose CEO Paul Marciano called her "the young Sophia Loren". First Indian actress to feature in a school textbook. Her life is described in a chapter of Roving Families, Shifting Homes, a book taught at Springdales School. Biography Priyanka Chopra: The Incredible Story of a Global Bollywood Star written by the journalist Aseem Chhabra was released in 2018. Chopra In 2015 appeared in HuffPost's "100 Most Influential Women on Twitter" list, in which she was ranked first among Indians.</p>
      </div>
    </div>
    <div class="quote">
    <blockquote>
      <p>"Any transition is easier if you believe in yourself and your talent."</p>
      <footer><cite>- Priyanka Chopra Jonas</cite></footer>
    </blockquote>
    </div>
    <p id="extrainfo">Want to know more about Priyanka Chopra? Check out her <a id="tribute-link" href="https://en.wikipedia.org/wiki/Priyanka_Chopra" target="_blank">Wikipedia Page.</a></p>
  </div>
</div>
    <p class="text-center">Written and Coded By <a href="https://www.freecodecamp.com/siyafazila" title="Fazila's Portfolio">Fazila.K.P</a></p>

<p class="copyright">&copy 2019 Afnan Web Studio. All rights reserved.</p>

              
            
!

CSS

              
                html,body{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  background-color: #7c8b92;
  
  text-align:center;
  min-width:260px;
  color: #333;
}
#main{
  margin:auto;
  padding:15px 15px;
  border:0px solid;
  border-radius:5px;
  background-color: #e8e6dc;
  color: #32485c;
  font-family: 'Lora', serif;

}
h1 {
  font-family: 'Lora', serif;

  color: #32485c;
 }

img {
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
  }

#img-div{
   margin: 25px 25px 20px 42px;
  max-width:100%;
  border: 2px solid #914e2f;
  background:#e8e6dc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#img-caption{
  margin:15px;
  font-family: 'Titillium Web', sans-serif;
  color: #32485c;
}

#headline{
 margin: auto;
  margin-top: 25px;
  max-width: 150px;
  text-align:center;
  background-color: #38485c;
  padding-top: 15px;
  padding-bottom: 15px;
    color: #e8e6dc;
}

.flex-container{
  margin: auto;
  display: flex;
  width: 80%;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
}

.heading{
  padding: 10px;
}

.year{
  width: auto;
  height: auto;
  margin: 20px;
  border: 1px solid #914e2f;
}

.content{
  margin: 20px;
  padding: 0px 10px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 1.1px;
  color: #6e5f52;
}

blockquote{
  margin: auto;
  padding: 10px;
  max-height: 50%;
  max-width: 50%;
  font-style: italic;
  background-color: #c98352;
    box-shadow: 10px 10px 5px #6e5f52;
  /*font-size: 2vw;*/
  font-weight: bold;
    font-style: italic;
}

blockquote p{
  color: #e8e6dc;
}

footer{
  color: #ffffff;
}

.text-center{
  color: #e8e6dc;
}

.text-center a {
  text-decoration: none;
  color: #e8e6dc;
  font-style: italic;
  padding: 5px;
}

.text-center a:hover {
  background-color: #e8e6dc;
  color: #914e2f;  
}

#extrainfo {
  margin: auto;
  padding: 30px;
}

#tribute-link{
  font-style: italic;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
  color: #914e2f;  
}

#extrainfo a:hover {
  background-color: #c98352;
  color: #ffffff;
  line-height: 
  
}
.copyright {
  color: #e8e6dc;
  font-weight: bold;
}

@media (min-width: 1200px) {
  
}

@media (min-width: 992px) and (max-width: 1199px){
  
}

@media (min-width: 768px) and (max-width: 991px){
  
}

@media (max-width: 767px){
  .quote p {
    vw: 50vw;
    vh: 25vh;
    font-size: 
  }
  
  width: 100%;
  
}
              
            
!

JS

              
                
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page');


              
            
!
999px

Console