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年以來一直致力于培養(yǎng)男孩的品格和教授他們野外技能。除了重點放在遠足活動上——通常只有一半的營員在營地,另一半在常規(guī)露營和半日冒險中探索——活動還包括廣泛的繩索課程、曲棍球、棒球、木工、射擊、釣魚、游泳、劃槳板、風(fēng)帆、帆船、網(wǎng)球、足球和攝影。這是一個更傳統(tǒng)的營地,每個男孩都有一個職責(zé),并參加日常活動,如升旗儀式和晚禱,鼓勵營員嘗試新的活動,拓寬他們的舒適區(qū)域。湖對面的姐妹營地——Wavus女孩營地——以類似的理念運作,教導(dǎo)勇氣、適應(yīng)能力和對大自然的尊重。 </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.
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%.