This is my HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- doctype html
-->
<div id="main">
<div id="title">
<strong>
<h1>
Broccoli - The true hero
</h1>
</strong>
</div>
<figure id="img-div">
<img id="image" src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt="Broccoli">
<figcaption id="img-caption">
Broccoli treehouse
</figcaption>
</firure>
<div id="info">
<div id="tribute-info">
<p>
Broccoli is an edible green plant in the cabbage family whose large flowering head, stalk and small associated leaves are eaten as a vegetable. Broccoli is classified in the Italica cultivar group of the species Brassica oleracea.
</p>
</div>
<a href="https://www.healthline.com/nutrition/foods/broccoli" id="tribute-link" target="_blank">
<div class="outer-circle">
<div class="inner-circle">
<p>
LEARN MORE
</p>
</div>
</div>
</a>
</div>
This is my CSS
body{
background-color: #313F51;
font-family: 'Roboto', sans-serif;
}
#main{
color: #white;
}
img{
width: 100%;
border-top-left-radius: 44%;
border-top-right-radius: 44%;
border: 6px solid #eff593;
max-width: 100%;
margin-right: auto;
margin-left: auto;
display: block;
}
#img-div{
align-content: center;
text-align: center;
}
#title{
text-align: right;
margin-right: 80px;
font-size: 18px;
}
#info{
display: flex;
top: 50%;
position: absolute;
}
#tribute-info{
width: 25%;
margin-left: 3%;
border: 2px solid #eff593;
border-radius: 10px;
}
#tribute-info p{
padding: 5%;
}
#tribute-link {
top: 0%;
right: 14%;
position: absolute;
}
.outer-circle{
height: 150px;
width: 150px;
position: absolute;
top: 0%;
right: 30%;
border-radius: 50%;
border: 2px solid #efa593;
}
.inner-circle{
width: 125px;
height: 125px;
border-radius: 50%;
border: 2px dotted #fff;
margin: 10px auto;
}
.inner-circle p{
color: white;
font-weight: bold;
margin: 34% 10%;
}
.outer-circle:hover {
background-color: #315141;
}
@media (max-width: 470px){
#info{
display: flex;
top: 33%;
position: absolute;
}
#tribute-info{
width: 92%;
margin: 5%;
}
#tribute-link{
top: 100%;
right: 33%;
position: absolute;
}
Its about tribute page: build a tribute page. New respons version