Je suis nouveau dans le front-end et j'ai quelques problèmes de mise en page et de réactivité.
Voici mon code jusqu'à présent :
body {
margin: 0;
background-color: #353535;
}
.header {
color: white;
text-align: center;
font-size: 20px;
margin: auto;
font-family: 'Inter', serif;
font-weight: bold;
width: 700px;
height: 150px;
background-color: #3C6E71;
border-radius: 25px;
}
.header h1{
margin: 3px;
}
.content {
margin: auto;
width: 50%;
padding: 5px;
text-align: center;
}
.content img {
object-fit: cover;
width: 500px;
height: 400px;
border: 3px solid white;
}
.content p{
margin-left: 15px;
display: block;
margin: 2px 0 0 0;
color: white;
font-family: 'Inter', serif;
font-weight: bold;
}
.button {
background-color: #D9D9D9;
border: none;
color: #D00000;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 4px 2px;
cursor: pointer;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<h1>We found trip that suits you</h1>
<h1>Kieve Summer Camp</h1>
<h1>Nobleboro, USA</h1>
</div>
<div class="content">
<p>
位于缅因州达马里斯科塔湖畔的Kieve自1926年以来一直致力于培养男孩的品格和教授他们野外技能。除了重点放在远足活动上——通常只有一半的营员在营地，另一半在常规露营和半日冒险中探索——活动还包括广泛的绳索课程、曲棍球、棒球、木工、射击、钓鱼、游泳、划桨板、风帆、帆船、网球、足球和摄影。这是一个更传统的营地，每个男孩都有一个职责，并参加日常活动，如升旗仪式和晚祷，鼓励营员尝试新的活动，拓宽他们的舒适区域。湖对面的姐妹营地——Wavus女孩营地——以类似的理念运作，教导勇气、适应能力和对大自然的尊重。
</p>
<img src="https://images.pexels.com/photos/7772721/pexels-photo-7772721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Italian Trulli">
</div>
<button class="button">Save</button>
<button class="button">Randomize again</button>
</body>
</html>
Vous pouvez voir mes tentatives jusqu'à présent, ce que je veux réaliser : https://www.figma.com/file/lqy0NTOiakaxeG5HoJk50f/Untitled?node-id=0%3A1.
Je sais que c'est basique, mais peu importe ce que j'essaye, quelque chose d'autre arrive toujours.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'utiliserais une grille CSS pour placer les images et les boutons à côté du texte.
Enveloppez également le bouton et l'image ensemble dans un div (je lui ai donné un nom de classe right-col) :
.content { display: grid; grid-template-columns: repeat(2, 50%); gap: 1em; } .right-col { justify-self: start; }Vous souhaiterez peut-être également envelopper tout votre code dans un wrapper avec une largeur maximale et définir à la fois le titre et le contenu à 100 %.