A Pen by Louis

Thumbnail
This awesome code was written by louisweb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright louisweb ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Louis</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html >
<html>
	<head>
    <meta charset="utf-8"/> 
    <meta name="author" content="LMP"/>
		<title>Portfolio</title>
    
	</head>

	<body>
    <div id="main">
      <div id="leftblock">
		    <header>
   
         
          <p>Bienvenue sur mon site</p>
      
      <nav class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      
     
      
          <nav class="menu">
            <h3>Secteur d'activités</h3>
            <ul>
              <li><a href="#">Motion Design</a></li>
              <li><a href="#">3D</a></li>
              <li><a href="#">Films</a></li>
              <li><a href="#">Montage</a></li>
              <li><a href="#">Prise de vues</a></li>
              <li><a href="#">Sound-Design</a></li>
              <li><a href="#">Montage</a></li>
              <li><a href="#">Print</a></li>
              <li><a href="#">Illustrations</a></li>
              <li><a href="#">Présentation</a></li>
              <li><a href="#">Gestion de projet</a></li>
              <li><a href="#">Community Management</a></li>
              <li><a href="#">Web-design</a></li>
              <li><a href="#">Web-mastering</a></li>
              <li><a href="#">Social-Media</a></li>
              <li><a href="#">Intégration</a></li>
              <li><a href="#">Développement</a></li>
              <li><a href="#">Serious Games</a></li>
          
          </ul>
        </nav>
      
        
      
          <nav class="menu">
            <h3>Réseaux Sociaux</h3>
            <ul>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Viadeo</a></li>
              <li><a href="#">Linkedin</a></li>
              <li><a href="#">Google+</a></li>
              <li><a href="#">Digikaa</a></li>
      
          
          </ul>
        </nav>
      
   			
		    </header>	
      
      </div>
      <!-- fin du bloc de gauche -->
      
      <div id="rightblock">

        
        
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" />
        
        <h3 class="work-link" href="#" title="link1">Link 1</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Motion Design</a>
            <span class="work-coma">,</span>
            <a href="#">Motion Design</a>
          </div>
        </article> 
       
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/"/>
        
        <h3 class="work-link" href="#" title="link1">Link 2</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">3D</a>
            <span class="work-coma">,</span>
            <a href="#">3D</a>
          </div>
        </article> 
        
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 3</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Film</a>
            <span class="work-coma">,</span>
            <a href="#">Film</a>
          </div>
        </article> 
        
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 4</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Montage</a>
            <span class="work-coma">,</span>
            <a href="#">Montage</a>
          </div>
        </article> 
        
        
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 5</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Sound Design</a>
            <span class="work-coma">,</span>
            <a href="#">Sound Design</a>
          </div>
        </article> 
        
            <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 6</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Graphisme</a>
            <span class="work-coma">,</span>
            <a href="#">Graphisme</a>
          </div>
        </article> 
        
            <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 7</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Présentation</a>
            <span class="work-coma">,</span>
            <a href="#">Présentation</a>
          </div>
        </article> 
        
         <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 8</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Gestion de projet</a>
            <span class="work-coma">,</span>
            <a href="#">Gestion de projet</a>
          </div>
        </article> 
        
         
        <article class="work">
          <img class="work-img" alt="motion-design" src="http://media.dunkedcdn.com/assets/prod/13/420x420-9_cropped_p17o748tnp2m53mn7ua6ut1q653.jpg" href="http://www.elephorm.com/" />
        
        <h3 class="work-link" href="#" title="link1">Link 9</h3>
          <div class="work-tags">
            <a class="work-tag-style" href="#">Web-design</a>
            <span class="work-coma">,</span>
            <a href="#">Web-design</a>
          </div>
        </article> 
       
   
        
      </div>
      <footer>
        <p class="footer-text">2013 ©lmpicard All rights reserved</p>
      </footer>
    </div>
	</body>	

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/louisweb/a-pen-by-louis-Exeuc */
#main {
  margin: 60px auto 30px;
  width: 1700px;
}

#leftblock {
  width:20%;
  float:left;
  /*background-color:grey;*/
  
}

p {
  color: #696969;
  font-family: HelveticaNeue, Helvetica Neue, Helvetica,     Tahoma, Geneva, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  
}

ul {
  list-style-type:none;
  
}




a{
  color:#696969;
  text-decoration:none;
  font-family: HelveticaNeue, Helvetica Neue, Helvetica,     Tahoma, Geneva, Arial, sans-serif;
}
  
  .menu h3 {
    
    margin-left: 5px;
    color:#b2b2b2;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica,     Tahoma, Geneva, Arial, sans-serif;
    font-size:14px;
    font-weight:light;
    
  }
  
  
#rightblock {
  float: right;
  width:80%;
 
}


.work {
  float:left;
  margin-bottom:20px;
  margin-right:20px;
  width:300px;  
  
}

.work img {
  margin-right:20px;
  width:80%;
}


.work-link  {
     color:#b2b2b2;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica,     Tahoma, Geneva, Arial, sans-serif;
    font-size:18px;
    font-weight:light;
    
}

work-tags {
  
  margin-left:10px;
  
}

/*
Fin right block*/



footer {
  clear:right;
}

@media screen and (max-width:640px)
       {
      .work
  {
    float:right;
    width:100%;
  }
  
      

    }

@media screen and (max-width:1024px)
        
           {
      .work
  {
    float:right;
    width:25%;
  }
  
    }

Comments