Portfolio

test

by Jacques Win

HTML

<!doctype html>
<title>Light Theme</title>
<link href="css/simpleGridTemplate.css" rel="stylesheet" type="text/css">
<link href="mg.css" rel="stylesheet" type="text/css">
<body>
<!-- Main Container -->
<div class="container"> 
  <!-- Header -->
  <img src="http://lorempixel.com/400/200/" width="300" height="96" alt=""/>
<header class="header">
    <h4 class="boxorange reculg">L'apperçu</h4>
  </header>
  <!-- Hero Section -->
  <section>
<div class="column"> </div>
  </section>
  <!-- Stats Gallery Section -->
  <div class="gallery">
    <div class="thumbnail2"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="" width="900"/></a>
      
      <p class="text_column">Création d’une charte graphique pour gamme de produits en GMS.
Où comment <span style="color: #CD9D58">se démarquer</span> dans le rayon traiteur et snacking !</p>
    </div>
    <br>
<div class="thumbnail cards"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="" width="250" height="251"/></a>
      
<p class="text_column"><span style="color: #C9A903"><span style="color: #CD9D58">LE PHOTOMONTAGE : il représente
  une grande partie de mon travail,
  ainsi que la retouche photo</span>.</span> Ici un montage fait de 6 photos différentes.
  Partant d’une photo produit type packshot
  une photo d’ambiance à l’arrivée !</p>
    </div>
    <div class="thumbnail cards"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="" width="360" height="250"/></a>
      
      <p class="text_column"><h4>Création graphique.
      Biscuitier</h4>
    </div>
  
  <div class="gallery">
    <div class="thumbnail cards"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="" width="300"/></a>
      <h4>Créations de logotypes...</h4>
</div>
    <div class="thumbnail cards"> <a href="#"><img src="http://lorempixel.com/400/200/" alt="" width="300"/></a>
      <h4>• Création de la charte graphique.
Boucherie chevaline</h4>
</div>
    <div class="thumbnail cards"> <a href="#"><img...

CSS

.boxorange {
	padding-top: 43px;
	padding-right: 23px;
	padding-left: 23px;
	padding-bottom: 44px;
	clear: right;
	margin-bottom: 12px;
	position: relative;
	height: 100%;
	font-family: Arial;
	font-style: normal;
	font-size: 50px;
	color: #FFFFFF;
	background-color: #CD9D58;
	Texte-indent: 10px
	
				}
		
.boxgris {
	padding-top: 50px;
	padding-right: 23px;
	padding-left: 23px;
	padding-bottom: 50px;
	position: relative;
	height: 100%;
	background-color: #C9A903;
	color: #4A1011;
}
.colomn1 {
	float: left;
	width: 40%;
}

.colomn2 {
		width: 70%;
}


	
	
body, p, td {
	font: 25px/24px "Open Sans", sans-serif;
	font-size: 16px;
	font-family: Arial;
	}

h4 {
	font: 16px/24px "Open Sans", sans-serif;
	color : #FFFFFF
	}

.floatl {
	float: left;
	width: 294px;
	margin-top: 54px;
	margin-right: 54px;
	margin-left: 54px;
	margin-bottom: 54px;
}
.floatr {
	float: right;
	width: 385px;
	margin-top: 15px;
	margin-right: 72px;
	}

.menu{
	position: absolute;
	top: 80px;
	right: 13px;
}


.imgp{
	background-position : 150 100;
	
	}

h5 {
	color: grey ;
}

.boxnoir {
	padding-top: 0px;
	padding-right: 350px;
	padding-left: 350px;
	position: relative;
	height: 100px;
	margin: auto;
	font-color: #FFFFFF;
	background-color: #000000;
	alignment-adjust: auto;
	}
	
	.reculg {
	padding-left: 50px;
	}
					
				
	
	
	

.copyright {
	padding-top: 0px;
	padding-right: 120px;
	padding-left: 0px;
	padding-bottom: 9px;
	margin-bottom: 1px;
	position: relative;
	height: 0%;
	font-family: Arial;
	font-style: normal;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #000000;
	Texte-indent: 8px;
	margin-top: 9px;
				}
		
.boxgris {
	padding-top: 50px;
	padding-right: 23px;
	padding-left: 23px;
	padding-bottom: 50px;
	position: relative;
	height: 100%;
	background-color: #C9A903;
	color: #4A1011;
}
.colomn1 {
		width: 40%;
}

@charset "UTF-8";
/* Body */
body {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	background-color:...