0
我需要做一個css任務，而無需編輯index.html或normalize.css
@import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
background-color: lightgray
}
.header {
position: fixed;
top: 0px;
width: 780px;
background-color: rgb(84, 153, 199);
padding: 40px 0;
}
.container {
background-color: white;
width: 780px;
margin: 0 auto;
padding-top: 120px;
}
.photo {
height: 160px;
}
h1,
.help {
font-family: 'Roboto', sans-serif;
}
h1 {
color: white;
margin: 0 1em;
}
.right {
float: right;
margin-right: 18px;
margin-left: 30px;
}
.figure {
border-bottom: solid #BBBBBB;
border-width: 1px;
margin-left: 214px;
width: 340px;
}
.left {
float: left;
margin-right: 20px;
margin-left: 20px;
height: 160px;
border-style: solid;
border-color: #BBBBBB;
border-width: 1px;
padding: 1px;
}
p {
padding-left: 10px;
padding-right: 10px;
}
div.help {
max-width: 40px;
max-height: 40px;
min-width: 40px;
min-height: 40px;
padding: 20px;
position: absolute;
border-radius: 20px;
background-color: blue;
margin-left: 800px;
margin-top: -1000px;
color: white;
font-size: 40px;
}
.photo-grid {
width: 228px;
}<body>
<div class="container">
<div class="header">
<h1>Layout i HTML</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis commodo purus, et imperdiet sapien varius vel. Aliquam quis massa at neque fringilla pharetra eu at ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Nam a orci mattis, efficitur arcu ac, porta dolor. Aenean massa metus, dictum ut nibh ut, porttitor gravida tellus. Maecenas ex velit, pharetra quis pulvinar quis, rhoncus et augue. Donec sit
amet ex elit. Sed at nibh in lorem porttitor eleifend id ac justo. Aliquam eget libero facilisis, faucibus libero nec, ornare elit. Nunc accumsan libero vitae justo hendrerit, sed facilisis velit efficitur. Nullam aliquet dolor nibh, vel fringilla
tortor facilisis ut. Curabitur ultrices dapibus purus. Nullam porttitor odio a malesuada accumsan. Duis eget diam metus. Suspendisse potenti.</p>
<div class="right photo">
<img src="img/photo-one.png">
<img src="img/photo-two.png">
</div>
<p>Vestibulum cursus tellus id pulvinar pellentesque. Suspendisse euismod augue sit amet lorem tempus, vitae ornare quam auctor. Sed placerat eleifend nunc, at semper metus hendrerit ut. Suspendisse nulla libero, suscipit quis euismod quis, sagittis
non lectus. Integer convallis quam suscipit, lacinia felis at, molestie quam. Duis sagittis facilisis erat eget semper. Maecenas a odio enim. Morbi at odio egestas, pharetra est eu, tristique mi. Sed sed facilisis sapien, nec molestie nisl. Curabitur
faucibus risus viverra metus ultricies, vitae bibendum sem cursus. Maecenas quis nulla sollicitudin, luctus ex efficitur, fringilla sem.</p>
<p>Nunc rhoncus dolor vel nisi posuere imperdiet. Phasellus auctor turpis in vestibulum sodales. Vestibulum vitae nibh turpis. Sed vel vestibulum ex. Pellentesque ex lacus, venenatis a condimentum nec, venenatis id risus. Nullam mattis blandit tellus
quis dignissim. In ultrices lacinia interdum. Maecenas quam metus, egestas eu augue aliquam, mollis elementum lorem. Sed vel nulla consequat, porta eros non, porttitor enim. Praesent id turpis in ipsum pulvinar ornare. In tincidunt sit amet nulla
sed euismod. Sed scelerisque arcu justo, ac fringilla magna mollis vel. Phasellus ultricies sed ligula ac fringilla. Vestibulum venenatis velit non dui feugiat faucibus. Duis ut ante malesuada, egestas eros non, hendrerit sem. Fusce vehicula ante
at maximus consectetur.</p>
<div class="figure">
<div>
<img src="img/photo-three.png">
<p>Figur 1: Duis placerat quam at lacus facilisis, a semper dolor aliquet.</p>
</div>
</div>
<p>Aenean ut nisl convallis, volutpat ex vulputate, varius eros. Curabitur urna quam, euismod et egestas vel, dictum vel erat. Quisque dictum quis ex id auctor. Mauris efficitur libero neque, id pulvinar odio facilisis sit amet. Fusce eleifend sem eget
ipsum luctus pharetra. Sed efficitur non enim in blandit. Sed lacus quam, molestie nec volutpat quis, tincidunt et eros. Suspendisse id magna dictum, semper metus ac, ultricies nisi. Sed quis euismod nibh, non pulvinar turpis. Curabitur vulputate
massa luctus varius auctor. Aenean rutrum vitae arcu quis placerat. Donec sagittis porta purus, sed posuere lorem imperdiet quis.</p>
<div class="left photo"><img src="img/photo-four.png"></div>
<div class="right photo-grid">
<img src="img/photo-five.png">
<img src="img/photo-six.png">
<img src="img/photo-seven.png">
<img src="img/photo-eight.png">
</div>
<p>Suspendisse vel consequat risus. Phasellus et posuere orci. Suspendisse iaculis pellentesque neque quis luctus. Vestibulum eget sagittis lorem. Vivamus finibus risus venenatis, gravida diam blandit, tristique eros. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Quisque non congue eros. Quisque venenatis blandit enim, quis elementum dolor iaculis at. Mauris ut magna magna. Nulla facilisi.</p>
<p>Fusce lacinia mauris nec nunc malesuada sollicitudin. Maecenas non enim purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare auctor nunc, et commodo elit condimentum ac. Mauris feugiat feugiat tortor ut egestas. Sed pellentesque
dictum nulla sit amet euismod. Fusce lacinia pulvinar fringilla. Duis eget ante blandit, tristique sapien nec, convallis dolor. Morbi elementum ornare neque non faucibus. Quisque aliquet nisl vitae risus euismod, vitae pretium justo porta. Suspendisse
vel tellus dictum, egestas nisl accumsan, scelerisque tellus. Nunc et faucibus mauris. Duis varius magna erat, a ullamcorper magna ullamcorper et.</p>
<div class="help">
<p>?</p>
</div>
</div>
</body>所以我有這些爲main.css和index.html，它應該看起來像鏈接的圖片，而是它看起來像gyazo，我需要做的事情是，圍繞右邊的2張圖片，糾正橙色圖形並修復questionmark幫助按鈕。
Image of how its supposed to look
Image of how it currently looks