Understanding the layout

Question

I'm creating a layout to test my skills. I have faced a problem about the layout:

I created a bar (see the image) but this one is overlapped by the card divs (the 400x200 images). The few elements in the form (inside the bar div) are placed at the bottom of the page where they should have been but the colored bar is placed in a wrong way. You can see with your eyes the result and the code. I attached a photo of the result I would like to reach to.

Unwanted result:

$(function(){

    var $buttonNav = $('.header__icon-bar');
     var degree = 45;
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    $buttonNav.toggleClass('animate');


  if( $('.header__nav').hasClass('is-open')){
   $('.header__icon-bar').css('transform','rotate(90deg)')
  }else{
   $('.header__icon-bar').css('transform','rotate(0deg)')
  }


});//end of click event

});//end of $(document).ready()

/*----------
GENERAL
-----------*/
html,body{ width: 100%; margin: 0; padding: 0; }
body{  background: #eee; }
.animate{
  -webkit-trasform: rotate(90deg);
  -ms-trasform: rotate(90deg);
  trasform: rotate(90deg);
}


/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px; position: relative; z-index: 100;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none; text-transform: uppercase; }
.header__nav__item a:hover { background: #ff3333; }

/*----------
cover
-----------*/
.cover{ background-color: #333; height: 80% ; width: 100%;position: relative; margin-top: 90px; padding: 30px;}
.cover__text { color: white; width: 95%; position: relative; left: 40px; }
.cover__text p{ color: #999999; font-size: 20px; }
.line-through{padding: 1px; width: 750px; height: 1px;  background-color:  #e6ccb3; display: table; margin: 0 auto; z-index: 30px;}
.cover__image{ margin:  0; padding:  0; float: left; z-index: 3; width: 600px; height: 400px;  z-index: 20; background-image: url(http://www.dejana.com/wp-content/uploads/2014/08/550x370.png);
  background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
  background-position: center; }
.cover__button { margin: 0 auto; display: table; padding: 20px}
.cover__button a{ padding: 20px; background-color: #ff3333;border-radius: 5px; text-decoration: none; color: black; font-weight: bold;}
.cover__button a:hover{ background: #eee; color: #ff3333; }


/* HIDING OVERFLOW ELEMENTS
html,body{overflow-x: hidden;}
*/

/*---------
CARD
----------*/
.card{ position: relative; margin-top: 30px;  max-width: 1440px;}
.card__img {float: right; margin: 20px 10px; width: 400px; height: 200px}
.card__img:hover{opacity: 0.5}




/*----------
ICON-BAR
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

/*----------
ICON-BAR
-----------*/
.bar{ background-color: #333; height: 50px; border: 1px red solid; margin:0; padding: 0}


/*----------
SMARTPHONE
-----------*/
@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0; }
.header__nav__item { display: block; padding: 20px; margin: 0; position: relative;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left; position: absolute;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}

/*cover*/
.cover{ height: auto; padding: 10px; margin-top: 30px; width: 100%}
.cover__image{  padding:  0; margin: 0; width: 97%; height: 400px; display: block; }
.cover__text{ margin: 0; left: 0; top: 20px; padding: 10px; width: 100%; display: block; overflow-y: scroll;}
.cover__text p {font-size: 16px}
.line-through{ width: 90%}
.cover__button { margin-top: 15px; position: relative; margin-bottom: 10px;}
.cover__button a{ padding: 10px; font-size: 15px;}


/*cards*/
.card{ margin-top: 50px }
.card__img{ margin: 0 ;  padding: 10px 20px; }



}/*END OF @font-face */





















*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}





/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */



 
   

   
      
      
      
  



    
         Home     
         Contact     
         Apply       
         About       
    


 




    


  

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



 Buy a New Course




  
  
  





  
  
  





  

Email

Understanding the layout

Answers (1)

Related Questions