Exercice d'intégration d'une maquette simple
graphiweb
Exercice intégration de maquette simple
Bonjour à tous, je me suis lancé dans l'intégration de maquette au format PSD, histoire de m'exercer dans l'intégration en html5-css3. J'ai trouvé une jolie maquette assez simple pour un début. Voici la maquette en question :
https://zupimages.net/up/19/23/hbme.jpg
Voici maintenant l'intégration que j'ai faite de cette maquette :
https://zupimages.net/up/19/23/rnxa.png
Alors, j'ai volontairement retiré la partie Newlester, car j'ai estimé, qu'elle n'avait d'intérêt. Je peux me tromper, mais cela reste subjective.
Si vous voulez jeter un coup d'œil au code HTML et CSS :
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/app.css">
<title>MINIMO</title>
</head>
<body>
<div class="wrap-site">
<header id="header">
<a class="logo" href="inde.html">MINIM0</a>
<nav class="navigation">
<ul>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Photodiary</a>
</li>
<li>
<a href="MUSIC">Music</a>
</li>
<li><a href="#">Travel</a></li>
</ul>
</nav>
</header>
<section id="post">
<article class="post_first">
<p>
<img class="post_image" src="assets/css/thumb/first_post.jpg" alt="Photo post">
</p>
<div class="post-wrap">
<span class="post_category">Photodiary</span>
<h2>The perfect weekend getaway</h2>
<p>
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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
<a href="#" class="leavecomment">leave a comment</a>
</p>
</div>
</article>
<div class="wrap-post">
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_1.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>More than just a music festival</h2>
<p>
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
</p>
</article>
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_2.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>Life tastes better with coffee</h2>
<p>
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
</p>
</article>
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_3.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>Life tastes better with coffee</h2>
<p>
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
</p>
</article>
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_4.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>Life tastes better with coffee</h2>
<p>
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
</p>
</article>
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_5.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>Life tastes better with coffee</h2>
<p>
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
</p>
</article>
<article class="post">
<p>
<a class="post_galery" href="#"><img src="assets/css/images/galery_6.jpg" alt="Photo article"></a>
</p>
<span class="galery_category">Lifestyle</span>
<h2>Life tastes better with coffee</h2>
<p>
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
</p>
</article>
<span class="loadmore"><a href="#">Load more</a></span>
</div>
</section>
</div>
<footer id="footer">
<div class="wrap-footer">
<nav class="navbar_footer">
<a href="#">Terms and conditions</a>
<a href="#">Privacy</a>
</nav>
<nav class="navbar_social">
<a href="#" title="Notre page Facebook"><img src="assets/css/images/fb.png" alt="Notre page Facebook"></a>
<a href="#" title="Notre Twitter"><img src="assets/css/images/tw.png" alt="Notre Twitter"></a>
<a href="#" title="Notre compte Instagram"><img src="assets/css/images/insta.png" alt="Notre page Instagram"></a>
</nav>
</div>
</footer>
</body>
</html>
body{
background: #fff;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
/*
* Import des différents fichiers nécessaires
* Impoort des polices personnaliséés
*/
@import "compass";
@import "font.scss";
@import "media.scss";
.wrap-site { /* Est le conteneur du site */
max-width: 1063px;
min-width: 1000px;
margin: auto;
header#header { /* Header comportent le logo et la navigation */
height: 164px;
line-height: 164px;
.logo { /* Logo du site */
float: left;
color: #000; text-decoration: none;
font-size: 30px;
font-family: 'inconsolataregular';
margin-top: 10px;
}
.navigation { /* Navigation du site */
float: right;
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #626262;
text-transform: uppercase;
font-size: 18px;
font-family: 'playfair_displayregular';
margin: 0px 0px 0px 90px;
&:hover {
color: #b4ad9e; cursor: pointer;
}
}
}
}
}
}
section#post { /* Section des publications */
max-width: 1300px;
article.post_first { /* le premier article en tête */
.post-wrap {
width: 900px;
margin: auto;
h2 {
color: #626262;
font-size: 30px;
font-family: 'playfair_displayregular';
}
p {
font-size: 14px;
line-height: 1.6;
color: #626262;
word-wrap: break-word;
font-family: 'playfair_displayregular';
}
.leavecomment { /* Permet de commenter la publication */
display: block;
color: #b4ad9e;
text-transform: uppercase;
font-size: 14px;
font-family: 'ubuntulight';
margin-top: 60px;
text-decoration: none;
}
.post_category { /* Est la catégorie de l'article */
color: #b4ad9e;
font-size: 14px;
font-family: 'ubuntulight';
}
}
}
.wrap-post {
width: 966px;
margin-left: 50px;
margin-top: -50px;
article.post {
h2 {
color: #626262;
font-size: 30px;
font-family: 'playfair_displayregular';
}
p {
width: 420px;
font-size: 14px;
line-height: 1.6;
color: #626262;
word-wrap: break-word;
font-family: 'playfair_displayregular';
}
display: inline-block;
margin: 130px 22px 0px 28px;
.galery_category {
color: #b4ad9e;
font-size: 14px;
font-family: 'ubuntulight';
text-transform: uppercase;
}
}
.loadmore {
display: flex;
justify-content: center;
margin-top: 100px;
a {
color: #626262;
font-size: 20px;
font-family: 'playfair_displayregular';
border: 1px solid #626262;
text-decoration: none;
padding: 15px 30px 15px 30px;
}
}
}
}
}
.wrap-newsletter {
width: 100%;
height: 290px;
margin-top: 100px;
background: #f0f0f0;
.form-groupe {
h3 {
color: #333333;
font-family: 'playfair_displayregular';
}
.input-newsletter {
display: block;
}
}
}
footer#footer {
width: 100%;
height: 100px;
margin-top: 50px;
line-height: 100px;
background: #f0f0f0;
.wrap-footer {
max-width: 1063px;
min-width: 1000px;
margin: auto;
nav.navbar_footer {
float: left;
a {
color: #000;
font-family: 'playfair_displayregular';
font-size: 14px;
margin: 0px 15px 0px 0px;
text-decoration: none;
}
}
nav.navbar_social {
float: right;
line-height: 100px;
a {
margin: 0px 15px 0px 0px;
text-decoration: none;
}
}
}
}
Vos avis sont les bienvenus.