When I run the test on my Tribute page, I’m getting the following 2 errors:
#Content
5. Within the “img-div” element, I should see an element with a corresponding id=“img-caption” that contains textual content describing the image shown in “img-div”.
#Layout
- The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Here is a link to the forked Codepen site with my HTML and CSS: https://codepen.io/LINDGRENBA/pen/oaJOxv
Here is my HTML:
<body>
<div id="main">
<div id="top">
<h1 id="title">Gemma & Pixie Project</h1>
<p class="title">A love story</p>
**<div id="img-div">**
** <img id="image" src="https://i.postimg.cc/J0yHTTcq/gemmacrop300.png" alt="Gemma the dog asleep on the couch">**
** <p id="img-caption">Gemma sleeps soundly next to her person on the couch.</p>**
** </div><!--end of div img-div-->**
</div><!--end of div top-->
<div id="bottom" class="cf">
<div id="bottom-left">
<h2>Gemma</h2>
<p id="tribute-info">Gemma was adopted from Pixie Project, a not for profit rescue in Portland Oregon. The following are some fun facts about Gemma:</p>
<ul>
<li><strong>Age:</strong> Two and a half years old.</li>
<li><strong>Weight:</strong> 17 lbs, after the Vet called her a <q>tube</q> and put her on a doggie diet.</li>
<li><strong>Favorite food:</strong> Anything. Literally anything. We caught her eating pieces of the doorstop off the carpet last night. She also likes to lick lint off the floor.</li>
<li><strong>Best friend:</strong> Mr. Cronos, the dog who lives next door.</li>
</ul>
</div><!--end of div bottom-left-->
<div id="bottom-right">
<h2>Pixie Project</h2>
<p>
Pixie Project takes in animals from nearby, overcrowded shelters in rural areas of Portland and from other states as well. Pixie offers <q> pet adoption services, pet owner education and support and low cost and free spay and neuter and veterinary services for homeless and low-income pet owners.</q> When you adopt an animal through Pixie Project there is a two week trial period, which gives you time to make sure that your new fuzzy friend is a good fit for your home... and that you are a good fit for them! If you're looking to adopt, <a id="tribute-link" href="https://www.pixieproject.org/category/dogs+adopt/" target="_blank">check out Pixie Project</a> to find your furry life partner.
</p>
</div> <!--end of div bottom-right -->
</div> <!-- end of div bottom -->
<footer>
<p>©Brittany Lindgren 2018 </p>
</footer>
</div> <!--end of div main-->
</body>
and my CSS:
body {
background-color: #F4DBD8;
font-size: medium
}
h1 {
font-size: 200%;
}
h2 {
font-size: 150%;
}
p, li, footer, #img-caption {
font-size: 110%;
text-align:
font-family: 'Bellefair', serif;
}
ul {
list-style-type: none;
}
footer {
text-align: center;
margin: 30px 0px;
}
.title {
font-size: 130%;
}
h1, h2, .title {
font-family: 'Pacifico', cursive !important;
}
#title, .title {
text-align: center;
}
**#img-div {**
** position: relative;**
** width: 300px;**
** height: 300px;**
** margin-top: 200px;**
** margin-bottom: 0;**
** top: 50%;**
** left: 50%;**
** -webkit-transform: translate(-50%, -50%);**
** -moz-transform: translate(-50%, -50%);**
** -o-transform: translate(-50%, -50%);**
** -ms-transform: translate(-50%, -50%);**
** transform: translate(-50%, -50%);**
**}**
**#image {**
** border-radius: 50%;**
** width: 250px;**
** height: 250px;**
** max-width: 250px;**
** border: 5px solid black;**
** display: block;**
** margin-left: auto;**
** margin-right: auto;**
**}**
#img-caption {
text-align: center;
padding-top: 30px;
}
#top {
width: 100%;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
@media (min-width: 850px) {
#bottom-left {
width: 40%;
float: left;
padding: 0px 30px 0px 30px;
}
#bottom-right {
width: 40%;
float: right;
padding: 0px 30px;
}
}
Sorry that I’ve included so much code, but I wasn’t sure if maybe something I’m not considering is effecting my outcomes, so wanted to include as much detail as possible.