search

Home  >  Q&A  >  body text

Design responsive pages with images and content

I'm new to front-end and I'm having some problems dealing with layout and responsiveness.

This is my code so far: 

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>

You can see my attempts so far, which is what I want to achieve: https://www.figma.com/file/lqy0NTOiakaxeG5HoJk50f/Untitled?node-id=0:1.

I know this is pretty basic, but no matter what I try, something else always comes up.

P粉676588738P粉676588738452 days ago513

reply all(1)I'll reply

  • P粉833546953

    P粉8335469532023-09-08 14:29:38

    I would use css grid to place the images and buttons next to the text.

    Also wrap the button and image together in a div (I gave it a class name right-col): 

    .content {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 1em;
}

.right-col {
  justify-self: start;
}

    You may also want to wrap all your code in a wrapper with a max-width and make both the title and content 100%.

    reply
    0
  • Cancelreply