Bonjour à tous !
Débutant en html/css je viens vers vous pour un problème
Je m'explique : j'ai télécharger une maquette en psd mais la largeur est de 1600px donc bien plus grand que mon écran, ce que je ne comprend pas, c'est comment adapter une maquette au bon format pour tout proportionner correctement je ne sais pas du tout par ou commencer je suis totalement perdu. Je vous met mon code de la maquette que j'essaye de coder !
Cordialement.
CSS
Merci beaucoup !!!
Débutant en html/css je viens vers vous pour un problème
Je m'explique : j'ai télécharger une maquette en psd mais la largeur est de 1600px donc bien plus grand que mon écran, ce que je ne comprend pas, c'est comment adapter une maquette au bon format pour tout proportionner correctement je ne sais pas du tout par ou commencer je suis totalement perdu. Je vous met mon code de la maquette que j'essaye de coder !
Cordialement.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="syle.css">
<title>Document</title>
</head>
<body>
<section class="section1">
<nav class="navBarre1">
<ul>
<li>About</li>
<li>Products</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<img class="logo" src="images/trans.png" >
<div class="containerText1">
<h3>Sleek as <br>fkuc</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
<img class="fleche1sec1" src="images/fleche1sec1.png">
<div class="containerIconSec1" >
<img src="images/flechesec1blanche.png">
<img src="images/flechsec1orange.png">
</div>
</div>
<img class="image1sec1" src="images/image1sec1.png">
<div class="orangeBox1"> </div>
</section>
<section class="section2" ></section>
</body>
</html>CSS
/*------------RESET------------*/
*{
box-sizing: border-box;
list-style: none;
}
/*------------SEC1------------*/
body{
margin: 0;
padding: 0;
}
.section1{
position: relative;
width: 1600px;
height: 1240px;
background-image: url(images/Rectangle1.jpg);
background-position: center;
background-repeat: no-repeat;
}
.navBarre1{
position: absolute;
top: 0;
width: 50%;
font-family: raleway;
color: white;
font-size: 13px;
}
.navBarre1 ul {
display: flex;
padding-left: 170px;
padding-top: 70px;
}
.navBarre1 ul li {
margin-right: 50px;
}
.logo {
position: absolute;
right: 60px;
top: 50px;
}
.containerText1 {
position: absolute;
top: 240px;
left: 170px;
color: white;
font-family: raleway;
}
.containerText1 h3 {
font-size: 45px;
margin-bottom: 40px;
font-weight: normal;
}
.containerText1 p {
font-size: 15px;
margin-bottom: 28px;
font-weight: lighter;
line-height: 24px;
}
.fleche1sec1 {
margin-left: 90px;
margin-bottom: 60px;
}
.image1sec1{
position: absolute;
right: 0;
bottom: 0;
width: 40%;
}
.orangeBox1{
position: absolute;
left: 565px;
bottom:-250px;
width: 400px;
height: 570px;
background-color: orange;
}
.section2{
width: 100vw;
height: 100vh;
}Merci beaucoup !!!
