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

              
                
<body>
  <div class="container-fluid">
  <div class="well">
 <div class="jumbotron">
    
<h1 class="header_title">Nissa la Bella</h1>
   <!-- <h3 class="header_title"><em>A small tribute to my city</em>
   </h3> -->
   
  </div><!-- end of header jumbotron-->
<!-- start of carousel -->
<div id="carousel-nice" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-nice" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-nice" data-slide-to="1"></li>
    <li data-target="#carousel-nice" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <a href="#"><img src="http://www.destination360.com/europe/france/images/s/promenade-des-anglais.jpg" target="_blank" class="img-rounded img-responsive" style="width:100%;height:360px"/></a>
      <div class="carousel-caption">
        <h4>Promenade des Anglais</h4>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://fr.attikainternational.com/xml/cache/mceimages/blog_pics/top-10-nice-cours-saleya.jpg" target="_blank" class="img-rounded img-responsive" style="width:100%;height:360px"/></a>
      <div class="carousel-caption">
        <h4>Cours Saleya</h4>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://fr.attikainternational.com/xml/cache/mceimages/blog_pics/top-10-nice-nice-port.jpg" target="_blank" class="img-rounded img-responsive" style="width:100%;height:360px"/></a>
      <div class="carousel-caption">
        <h4>Le Port</h4>
        
      </div>
    </div>
  </div>
 
<!-- carousel controls -->
  <a class="left carousel-control" href="#carousel-nice" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-nice" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- end of carousel -->
    <br />
    <br />
    <h3><span>Here are some nice facts.....</span></h3>
    <div class="container">
      <ol>

          <h2 class="timeline-style">Capital of the French Riviera <input type='button' id='hideshow1' value='show/hide' class="btn btn-primary " >
        </h2>
 <div id="capital-id">
     <li class="list-group-item list-group-item-danger"><p> Nice is called as the capital of Alpes Maritimes department in France. This city has the area of 278 square km or 721 km square.<br /></p></li>
        </div>
        <h2 class="timeline-style">The Second Largest City <input type='button' id='hideshow2' value='show/hide' class="btn btn-primary " >
        </h2>
        <div id="largest-id">
     <li class="list-group-item list-group-item-danger"><p>On the Mediterranean coast and in the Provence-Alpes-Côte d’Azur region, Nice is called as the second largest city. It is situated on the south east coast of France on the Mediterranean Sea.<br /></p></li>
        </div>
        
        <h2 class="timeline-style">The Name <input type='button' id='hideshow3' value='show/hide' class="btn btn-primary " > </h2>
        <div id="name-id">
     <li class="list-group-item list-group-item-danger"><p>Nice France is called as Nissa la Bella. The meaning of this name is Nice the Beautiful. In 1912, Menica Rondelly wrote an unofficial anthem for Nice.<br /></p></li>
        </div>
        <h2 class="timeline-style">Inspiration 
           <input type='button' id='hideshow4' value='show/hide' class="btn btn-primary " >
        </h2>
    <div id="inspiration-id"> 
      <li class="list-group-item list-group-item-danger"><p>The beauty and clear air of Nice became the inspiration of various painters in the world such as Arman, Niki de Saint Phalle, Henri Mattisse, and Marc Chagall.<br /></p></li>
      </div>
        
        <h2 class="timeline-style">Attraction <input type='button' id='hideshow5' value='show/hide' class="btn btn-primary " > </h2>
<div id="attraction-id">      
     <li class="list-group-item list-group-item-danger"><p>What are the main attractions in Nice? People can enjoy the top label shopping, rich blue green sea, art décor façade and splendid dining here.<br /></p></li>     
        </div>
    </ol>
    <br />
    <br />
    <h3><span>Let's learn some history.....</span></h3>
    <ul>
    <h2 class="timeline-style">Antiquity <input type='button' id='hideshow6' value='show/hide' class="btn btn-primary " > </h2>
      <div id="antiquity-id">
       <li class="list-group-item list-group-item-danger"><p>The site of Nice is occupied from 400 000 BC ( Terra Amata ).<br /></p></li>
       <li class="list-group-item list-group-item-danger"><p>Between 900 BC and 600 BC, the Ligurians settled on the coast and afterwards the Celts.<br /></p></li> 
        
       <li class="list-group-item list-group-item-danger"><p>The phoenicians settled in the colony of Massilia (Marseille) to establish trading posts on the coast and in particular with Nikaia (Nice). 
This Greek colony will be attacked by different tribes before the romans take the power in 154 BC.<br /> </p></li>
       <li class="list-group-item list-group-item-danger"><p>Nice survives during the barbarian invasions due to  the fall of the Roman Empire in the Vth century.<br /></p></li>
    </div>
    <h2 class="timeline-style">Middle Age <input type='button' id='hideshow7' value='show/hide' class="btn btn-primary " > </h2>
      <div id="middle-age-id">
      <li class="list-group-item list-group-item-danger"><p>Nice began to get richer in the trading market, particulary with Pisa and Genoa. <br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>Starting from 1215 it passes the authority of the counts of Provence to that of Genoa.<br /></p></li> 
      <li class="list-group-item list-group-item-danger"><p>From 1265, Nice goes under the authority of the counts of Anjou.<br /></p></li> 
      <li class="list-group-item list-group-item-danger"><p>In the XIVth century, several epidemics of Plague decimate the 2/3 of the population of Nice.<br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>In 1388, Nice, refuses to recognize Louis d'Anjou, and to goes under the autority of the Count of Savoy. The county of Nice is then created, becoming an important stronghold to avoid being picked up by the Counts of Provence and the Kings of France.<br /></p></li> 
      <li class="list-group-item list-group-item-danger"><p>In the start of the XVIth century, when Provence was annexed by the kingdom of France, Nice became a buffer zone between France and the Holy Roman Empire.<br /></p></li>
      </div>
    <h2 class="timeline-style">Rennaissance <input type='button' id='hideshow8' value='show/hide' class="btn btn-primary " > </h2>
      <div id="rennaissance-id">
      <li class="list-group-item list-group-item-danger"><p>In this period of time Nice continues to get richer thanks to the sea trade, especially with the Provence and Liguria.<br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>During the XVIIth century the city builds many baroque style churches.<br /></p></li> 
      <li class="list-group-item list-group-item-danger"><p>Louis XIV annexed the city and proclaimed himself count of Nice, he took down the citadel and razed the city walls,but
In 1713 the treaty of Utrecht obliges France give back the county of Nice to  the county of Savoy.<br /></p></li> 
      </div>
      <h2 class="timeline-style">The XVIIIth and XIXth centuries
        
   <input type='button' id='hideshow9' value='show/hide' class="btn btn-primary " > </h2>
      <div id="century-id">
      <li class="list-group-item list-group-item-danger"><p>The city modernizez and welcomes the first English tourists in the XVIIIth century.<br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>In 1790, the county of Nice welcomes many counter-revolutionarys. <br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>In 1815, the treaty of Paris gives Nice to Victor Emmanuel ,first king of Sardinia. During his period the city modernizez and welcomes more and more tourists for the winter season, English and Russian.<br /></p></li>
      <li class="list-group-item list-group-item-danger"><p>The last shift for the city is in 1860 when following a referendum the people choose France over the sard kings. From that period on Nice became a city of entertainment : theatres, operas, racetracks... are built and the medieval carnival is exhumed.<br /></p></li> 
        </div>
    <h2 class="timeline-style">The XXth centuries <input type='button' id='hideshow10' value='show/hide' class="btn btn-primary " > </h2>
      <div id="twenty-century-id">
     <li class="list-group-item list-group-item-danger"><p> The XXth century, sees Nice welcoming great names of american literature, and then tourists from the whole world.<br /></p></li>
      </div>
      </ul>
    </div> <!-- end of container for the text  -->
    <br />
    <br />
    
    
    <br />
    <br />
    <h4 >Want to see and learn more about Nice ? Click this <a href="https://en.wikipedia.org/wiki/Nice"  target="_blank">link</a> to go to the wiki page of the city.</h4>
    
 <br />
    <p>Source of informations : <a href="http://wwww.wikipedia.org" target="_blank">Wikipedia</a> and <a href="http://www.myinterestingfacts.com/nice-france-facts/">InterestingFacts</a></p>
 <br />
 
  </div><!-- end of well -->
    </div><!-- end of container-fluid -->
  <div class="footer">
      <h5>This tribute page was made by <a href="https://www.freecodecamp.com/radu29" target="_blank">Ciobanu Radu</a> <br> using HTML,CSS and Bootstrap </h5>
    </div>
</body>


              
            
!

CSS

              
                .header_title{
    text-align:center;
}
.footer{
  text-align:center;
}
.container-fluid{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
    margin-top:20px;
    margin-bottom:20px;
}
.well{
  margin-top:20px;
}
.timeline-style{
  text-align:center;
  border-bottom:1px solid black;
  text-shadow: 0px 1px 1px #4d4d4d;
}

.carousel-inner > .item > a > img,  .carousel-inner > .item > img {
    width: 100%;
} 
.jumbotron {
    margin: 0%;
    background-position: 0% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    color: red;
    text-shadow: 0px 1px 1px #4d4d4d;
	  font: 80px 'LeagueGothicRegular';
}
h3 span{
    color: red;
    text-shadow: 0px 1px 1px #4d4d4d;
	  font: 30px 'LeagueGothicRegular';
}
.btn-primary{
  width:20%;
  position:relative;
  background-color:#f08080;
  float:right;
}
              
            
!

JS

              
                $(document).ready(function(){
  $('.carousel').carousel({
    interval: 6000
});
  $('#capital-id').hide();
  $('#largest-id').hide();
  $('#name-id').hide();
  $('#inspiration-id').hide();
  $('#antiquity-id').hide();
  $('#attraction-id').hide();
  $('#middle-age-id').hide();
  $('#rennaissance-id').hide();
  $('#twenty-century-id').hide();
  $('#century-id').hide();
  
 $('#hideshow1').on('click', function(event) {        
         $('#capital-id').toggle('show');

    });
  $('#hideshow2').on('click', function(event) {        
         $('#largest-id').toggle('show');

    });
  $('#hideshow3').on('click', function(event) {        
         $('#name-id').toggle('show');

    });
  $('#hideshow4').on('click', function(event) {        
         $('#inspiration-id').toggle('show');

    });
  $('#hideshow5').on('click', function(event) {        
         $('#attraction-id').toggle('show');

    });
  $('#hideshow6').on('click', function(event) {        
         $('#antiquity-id').toggle('show');

    });
  $('#hideshow7').on('click', function(event) {        
         $('#middle-age-id').toggle('show');

    });
  $('#hideshow8').on('click', function(event) {        
         $('#rennaissance-id').toggle('show');

    });
  $('#hideshow9').on('click', function(event) {        
         $('#century-id').toggle('show');

    });
  $('#hideshow10').on('click', function(event) {        
         $('#twenty-century-id').toggle('show');

    });
});
              
            
!
999px

Console