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

              
                <!--  FIRST attempt -->

<body>
  <div class="img-responsive bg-image1 ">
  <!--  NAV BAR -->
    <div id="row3">
        <nav id="nav1" class="navbar navbar-default navbar-fixed-top  " role="navigation">
          <div class="container " id="container_navbar;">
            <div class="navbar-header">
              <button id="btn-nav-Smalldevice" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false" aria-controls="#myNavbar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             </button>
              <a id="gly-navbar" class="navbar-brand" href="#home" class="active"> <i class="glyphicon glyphicon-home " aria-hidden="true" style="color:pink; font-size:20px;"> </i> </a>
            </div>
            <!-- navbar-header -->

            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav text-center " id="ul-navbar">
                <li><a href="#ABOUTMESECTION">About me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#WORK">Work</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
            <!-- id="myNavbar"-->
          </div>
          <!-- Container-navbar -->

        </nav>
      <!-- div col-md-4-->
    </div>
    <!-- div Row3-->
    
    <div class="row" id="home" style="padding-top:50px">
      <img class="img-responsive center block" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xla1/v/t1.0-9/13256431_10210303114392194_1642711894133950376_n.jpg?oh=a46916a6a0beddb25e8840aeafe81c49&oe=58A2E34A&__gda__=1485919132_fbd7bcbb568600f1b858f6b6eeb861cb"
        style="border-radius: 50%;  display: block; margin: auto; padding: 5px 20px 5px 20px; width: 200px; height:150px;">
    </div>
    <!-- div Row1-->

    <div class="row" id="row2">
      <div class="col-md-4 "> </div>

      <div class="col-md-4  text-center" id="p-portfolio">
        <p> <span style=" font-size:40px; " class="text-center ">   Portfolio  </span>
          <br /><br />
          <span style="text-transform:uppercase;" class="text-center"> Know about me </span>
          <a class="downArrow-nav1" href="#"> <span class="glyphicon glyphicon-chevron-down  " style="color:pink;" aria-hidden="true"></a></span>
        </p>
      </div>

      <div class="col-md-4 "> </div>
    </div>
    <!-- div Row2-->

  


  </div>
  <!-- div container1 -->
  </div>
  <!-- class= bg-Image-body -->


  <!-- ******************************************************* ABOUT ME ****************************************** -->

  <div id="ABOUTMESECTION" class="row row-aboutme">
    <!--<di> <img class="plant" src="http://img07.deviantart.net/a5c1/i/2012/132/0/8/draped_devils_ivy_by_lilipilyspirit-d4zij52.png"> </div>-->
    <div class="col-md-2  "> </div>

    <div class="col-md-4  text-center" style="  font-family: futura-pt; color: #737373;text-align:center;text-align: justify;font-weight:bold; font-size:18.3px line-height: 1em;
    letter-spacing: 1.5px;">
      <img src="https://alove.salvationarmy.org.uk/sites/employmentplus.salvationarmy.org.uk/files/styles/right-column/public/images/I%20AM3.png?itok=XRTR3J8l" class="img-responsive center-block" style="width: 280px; height:200px; "> <br />

      <p align="text-center" id="p-aboutme"> OLFA, a 26 years old Tunsian girl who is inspiring to be a front-end developer.<span style="color:violet; font-size:20px"> A GREAT ONE!</span> I love everything related to art, and i see coding as one! It takes lots of time to finish but the out
        come will surely be worth it! <br /> I am a serious girl!.. but not that much. <br /> <br />

        <button id="btnPic" type="button" class="btn btn-info " data-toggle="collapse" data-target="#img-click" style=" float:right; background-color:black; border-color:pink; color:white; font-weight:bold;  ">Click Me</button>
      </p>

    </div>
    <!-- col-md-4 -->

    <div class="col-md-4  images-container">
      <img id="img-aboutme" src="http://i.imgsafe.org/1d577c58d8.jpg" class="img-responsive center-block" style="border-radius: 20%; display: block; margin: auto; padding: 5px 20px 5px 20px; width: 400px; height:350px; ">
      <img src="http://i.imgsafe.org/1b646232e6.jpg" id="img-click" class="collapse img-responsive center-block" style="border-radius: 20%; display: block; margin: auto; padding: 5px 20px 5px 20px; width: 400px; height:350px; display:none;">
    </div>
    <div class="col-md-2  "> </div>


  </div>
  <!--  row -->


  <div class="bg-image3">
  </div>

  <!-- ******************************************************* skills ****************************************** -->


  <div id="skills" style="background-color:#ffbf80 ; padding:2px 0px 2px 0px;">
    <h1 class="section-header text-center"> SKILLS </h1>
    <h2 class="section-header text-center" style="font-size:20px">Still Improving </h2>
    <hr />


    <div class="bg-image3" style="min-height:20px">
    </div>


    <div class="row " style="background-color:white; ">
      <!---------------------- carousel: LEFT----------------------------- -->
      <div class="col-md-6 carouselColumns">
        <div id="whatIkhnow-carousel" class="carousel slide  carouselColumns" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#whatIkhnow-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#whatIkhnow-carousel" data-slide-to="1"></li>
            <li data-target="#whatIkhnow-carousel" data-slide-to="2"></li>
            <li data-target="#whatIkhnow-carousel" data-slide-to="3"></li>
            <li data-target="#whatIkhnow-carousel" data-slide-to="4"></li>
          </ol>

          <!--  slides -->
          <div class="carousel-inner" style="background-color:white;" role="listbox">

            <div id="JS-Item" class="item active ">
              <img class="carousel-items-size" src="http://jm.cartlamy.com/css/images/logo_javascript.png" style="widht:200px; height:200px;">
            </div>

            <div id="JQuery" class="item ">
              <img class="carousel-items-size" src="http://blog.netapsys.fr/wp-content/uploads/2016/07/jquery.gif" style="widht:200px; height:200px;">
            </div>

            <div id="CSS-Item" class="item ">
              <img class="carousel-items-size" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/CSS.3.svg/2000px-CSS.3.svg.png" style="widht:200px; height:200px;">
            </div>


            <div id="BTP-Item" class="item ">
              <img class="carousel-items-size" src="http://profil-software.pl/media/image/bootstrap.png" style="widht:200px; height:200px;">
            </div>

            <div id="HTML5-Item" class="item ">
              <img class="carousel-items-size" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" style="widht:200px; height:200px;">
            </div>


            <!-- Left and right controls -->
            <a class="left carousel-control" href="#whatIkhnow-carousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#whatIkhnow-carousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <!-- carrousel-inner-->

        </div>
        <!-- id= whatIkhnow-carrousel-->
      </div>
      <!--class="col-md-6" -->


    </div>
    <!-- row-->
  </div>


  <div class="bg-image3">
  </div>


  <!-- ***************************** WORK  GALLERY****** -->


  <div id="WORK" style="background-color:#ffbf80; padding:5px 0px 5px 0px;">
    <h1 class="section-header text-center"> PORTFOLIO </h1>
    <h2 class="section-header text-center" style="font-size:20px"> Upcoming work </h2>
    <hr />


    <div class="bg-image3" style="min-height:20px">
    </div>


    <div class="row" style="background-color:white">
      <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">
        <ul>
          <li>
            <img id="thmb" class="img-responsive inline-block" alt="Responsive image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR7faiRVWOwvWhbc8Bp7z6y7LmhH9q9f9srGMLzris5jrFeF4hK">
          </li>
          <li>
            <img class="image-responsive inline-block" alt="Responsive image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR7faiRVWOwvWhbc8Bp7z6y7LmhH9q9f9srGMLzris5jrFeF4hK">
          </li>
          <li>
            <img class="image-responsive inline-block" alt="Responsive image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR7faiRVWOwvWhbc8Bp7z6y7LmhH9q9f9srGMLzris5jrFeF4hK">
          </li>
          <li>
            <img class="image-responsive inline-block" alt="Responsive image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR7faiRVWOwvWhbc8Bp7z6y7LmhH9q9f9srGMLzris5jrFeF4hK">
          </li>
        </ul>

      </div>
      <!-- row -->
    </div>


    <!------------------ --------------------------------------------------CONTACT ME ---------------->

    <div class="bg-image3">
    </div>


    <div id="contact" style="background-color:#b35900; padding:5px 0px 5px 0px;">
      <h1 class="section-header text-center"> Contact me </h1>
      <h2 class="section-header text-center" style="font-size:20px"> Hire me </h2>

      <hr />


      <div class="bg-image3" style="min-height:20px">
      </div>


      <div class="row">
        <div class="col-md-2"> </div>
        <div class="col-md-2">
          <a target='_blank' href="mailto:olfa.dhaouadi.marsa@gmail.com?subject=I want to hire you" class="btn" style="color:black;">
            <span class="fa fa-google logo-contact"> </span>
            <div class="section-header text-center" style="font-size:20px; ">Email-Me</div>
          </a>
        </div>
        <!-- col-md-2 -->

        <div class="col-md-1"> </div>
        <div class="col-md-2">
          <a target='_blank' href= "https://forum.freecodecamp.com/users/olfadh" class="btn" style="color:black;">
            <span class="fa fa-fire logo-contact"> </span>
            <div class="section-header text-center" style="font-size:20px; ">Free Code Camp</div>
          </a>
        </div>
        <!-- col-md-2 -->

        <div class="col-md-2"> </div>
        <div class="col-md-2">
          <a target='_blank' href="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" class="btn" style="color:black;">
            <span class="fa fa-github-alt logo-contact"> </span>
            <div class="section-header text-center" style="font-size:20px; ">Github</div>
          </a>
        </div>
        <!-- col-md-2 -->


</body>
              
            
!

CSS

              
                body {
    font-family: "-webkit-body";
    font-size: 19px;
    margin:0px;
    padding:0px;
}

}
#p-aboutme {
    display: block;
    -webkit-margin-before: -1.3em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 50px;
    -webkit-margin-end: 30px;
}

.images-container{
  padding:100px 20px;
}
.row-aboutme{
 
   background-color:#f2f2f2;
   height:530px;
  width:100%;
  padding: 0px 0px 0px 0px;
   margin-left:0px;
   margin-right:0px;
  overflow:none;
   
}

.row li {
  width: 24.3%;
  float: left;
  list-style: none;
}

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.bg-image1{

  background-image: url("http://static.wixstatic.com/media/dc3a03_46a19074459548d097903069b4a05ded.jpg_srz_1235_823_85_22_0.50_1.20_0.00_jpg_srz"); 
      
   min-height: 600px;
}
.bg-image2{

  background-image: url("http://static.wixstatic.com/media/dc3a03_46a19074459548d097903069b4a05ded.jpg_srz_1235_823_85_22_0.50_1.20_0.00_jpg_srz"); 
   min-height: 400px;
  opacity:0.40;
}
.bg-image3{
  
  background-image:url("http://lh3.ggpht.com/ep0A9kCvZUGyQ86KZ6DPsNhsBxUqotTK08YzU2drXY5F0Aps-SHdNdNvP7m-QHqoeSlItZXu51lAKOR6dG7U7RWYMg=s1152");
  min-height: 400px;
  
}

.bg-image1, .bg-image2, .bg-image3, .row-aboutme, .row-education{
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


div{
  display:block;
}
#p-portfolio {
    font-family: "futura-pt serif";
    font-size: 20px;
    line-height: 1.3em;
    letter-spacing: 4px;
    font-weight: 200;
    font-style: normal;
    color: #9c9999;
    margin: 40px auto;
    position: center;
 
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  margin: auto;
}
 .carouselColumns {
   
    position: relative;
    min-height: 0px;
    padding-right: 0px;
    padding-left: 0px;
   
}


 .section-header {
  font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 30px;
  color: #FFF;
}

.logo-contact{
  font-size:100px;
  
}

/*Modal_image*/

              
            
!

JS

              
                
 $(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle();
});

 /* THIS wont work*/
$('#downArrow-nav1').click(function(){
    $("#nav1").removeClass("hidden");
});


$('#btnPic').on('touchstart click',function(){
     $('.images-container img').toggle();
});


              
            
!
999px

Console