Mini 7

In this example below you will see how to do a Mini 7 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Cbanks5, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cbanks5 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mini 7</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756113/normalize.css">

<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756113/skeleton.css">

<link href="//fonts.googleapis.com/css?family=Teko" rel="stylesheet">
                                                                     <link href="//fonts.googleapis.com/css?family=Yanone Kaffeesatz" rel="stylesheet">
</head>

<html>
<div class="box">
  <di
  <div id="row1" class="row">
    <div class="eight columns logo">
           <img src=""/>BALL AND ENTERTAINMENT  WEEKLY
    </div>
 
     
  </div>
    
   <div id="row2" class="row">
      <div class="two columns heading navbar red">
        <a href="" target="blank">Videos<a/>
    </div>
     <div class="two columns heading navbar darkblue">
       <a href="" target="blank">Entertain<a/>
    </div>
     <div class="two columns heading blue">
       <a href=""target="blank">Sports<a/>
    </div>
     <div class="two columns heading navbar lightblue">
       <a href="" target="blank"><a/>
    </div> 
     <div class="two columns heading navbar green"> 
       <a href="" target="blank"><a/>
    </div>
     <div class="two columns heading navbar orange">
       <a href="" target="blank"><a/>
    </div> 

  </div> 
       <h1> Hottest Videos! </h1>
   <div id="row3" class="row"> 
        <div class="eight columns bannerimage"> ENTERTAINMENT
  
   <iframe width="1060" height="315" src="https://www.youtube.com/embed/NLZRYQMLDW4" frameborder="0" allowfullscreen></iframe>
      <hr width=1060px> SPORTS   
          <iframe width="1060" height="315" src="https://www.youtube.com/embed/2h0K3TrT8wM" frameborder="0" allowfullscreen></iframe>
        <hr width=1060px> SPORTS    
    <iframe width="1060" height="315" src="https://www.youtube.com/embed/F1jf3KxRYNQ" frameborder="0" allowfullscreen></iframe>  
          <hr width=1060px> SPORTS/ENTERTAINMENT  
   <iframe width="1060" height="315" src="https://www.youtube.com/embed/JQWHao01A9E" frameborder="0" allowfullscreen></iframe> 
         <hr width=1060px> ENTERTAINMENT  
          <iframe width="1060" height="315" src="https://www.youtube.com/embed/WZlFKYavwVU" frameborder="0" allowfullscreen></iframe>
      <hr width=1060px> ENTERTAINMENT   
      <iframe width="1060" height="315" src="https://www.youtube.com/embed/iSP6IrS40UE" frameborder="0" allowfullscreen></iframe> 
      <hr width=1060px> SPORTS   
          <iframe width="1060" height="315" src="https://www.youtube.com/embed/81GP_DdZ2mQ" frameborder="0" allowfullscreen></iframe>
      <hr width=1060px> SPORTS
          <iframe width="1060" height="315" src="https://www.youtube.com/embed/Fk-ysLKygSU" frameborder="0" allowfullscreen></iframe>
          
     </div>
      
           
       </div>
 
       
<footer>
    <div class="four columns footer text">(c)2016 Ballanden ,Inc</div>
    <div class="four columns footer text">817 879 2556</div>
    <div class="four columns footer text">info@Ballanden.club</div>
  </footer>

</div>
       </html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Cbanks5/mini-7-evaYqe */
.box
{
   background-color:black;
}
.row
{
  background-color:white;
  width:985px;
  margin:auto;
}
#row1
{font-size:45px;font-family:Yanone Kaffeesatz;color:white}

.clear
{
  clear:both;
}

.logo 
{
  height: 60px;

  margin-bottom:10px;

}


.logo img
{
  
  margin-left:90px;
  width:1px;
}

.smallbutton 
{
  margin-top:0px;
  
  height:10px;
  
}

.smalltext
{
  
  font-family:Yanone Kaffeesatz;Font-color:white

}

.icon
{
  margin-top:5px;
  margin-right:1px;
  width:20px;color:white
 
}

.navbar
{
  margin-bottom:5px;

}

.bannerimage img
{
  background-color:#fe9b01 ;
  height: 570px;
  width:650px;
  margin-left:10px;
}



.bttn
{
  height:150px;
  width:350px;
  background-color: #00aef5;
  margin-bottom:10px;
  margin-left:px;
 
}



.sideimages img
{
  height:100px;width:150px;
  position:relative;
  margin-top:-24px;
  float:left;

}

.rightsidetext
{
  margin-left:150px;margin-bottom:-50px;
  text-align:center;
  font-family:Teko;font-size:25px;
}

.connect
{
   display:block;
   height:200px;
   margin-bottom:30px;
   margin:10x;

  
}

.featured
{
  background-color:#ece54d;
  width:78px;
  height:400px;
 
  margin-bottom:0px;
  
}

.smtext
{
  color:white;
  text-align:center;
}

.sidetext
{
  color:white;
  padding-left:15px;
}

.heading
{
  color:white;
  padding-left:10px;
  font-family: Teko;
  font-size:35px;
  
}


#row4 p
{
  font-family:Yanone Kaffeesatz;
  color:black;
  padding:5px 10px 10px 10px;
  font-size:50px;
}

#row5 p
{
  font-family:Yanone Kaffeesatz;
  color:black;
  font-size:30px;
  display:inline-block;
}

.readmore
{

  color:white;
  font-size:30px;
 
  width:135px;
  height:25px;  
 
  position: relative;
  top:-15px;
  left: auto;
  right: auto;
}


footer
{
  height:65px;
  width:1300px;
  background-color:rgb(0,0,0);
  color:white;
  text-align:center;
  font-family:Yanone Kaffeesatz;

}

.red
{
  background-color:white; 
}
.darkblue
{
  
  background-color:white; 
}
.blue
{
  background-color:white; 
}

.lightblue
{
  background-color:white; 
}

.green
{
  background-color:white; 
}

.orange
{
  background-color:white; 
}

h1
{color:red;position:relative;left:130px;}

Comments