Having trouble with the sizing of my image in the skill portion of my website. The clouds and mountains look fine, but for some reason, the image isn't the same size.
Additionally, the text "full stack developer" is not centered under my name anymore.
I've tried adjusting margins, padding, text alignment, and centering without success.
I can't seem to figure out where I went wrong, and unfortunately, I didn't version control properly to revert back to a working state.
.top-container {
background-color: #ffcb74;
}
body {
margin: auto;
margin-top: 0;
text-align: center;
background-color: white;
}
img {
border-radius: 50%;
height: auto;
}
h1 {
margin: 0;
position: static;
font-family: 'Comfortaa', cursive;
padding-top: 10%;
color: #66BFBF;
line-height: 2;
}
h2 {
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
color: #66BFBF;
font-weight: normal;
text-align: left;
margin-left: 25%;
}
h3 {
color: #11999E;
}
a {
color: #11999E;
}
.get-in-touch {
text-align: left;
margin: auto;
}
.fsd {
margin-right: 50%;
}
.contact-me {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.bottom-container {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.footer-link {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.skill-row {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.hello-part {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.bottom-cloud {
position: absolute;
}
.top-cloud {
position: absolute;
right: 305px;
}
.my-skills {
width: 50%;
margin: auto;
text-align: left;
line-height: 2;
}
.webdev-Image {
width: 25%;
}<div class="top-container">
<img class="top-cloud" src="cloud.png" alt="clouds-img">
<h1>I'm Malcolm Henry</h1>
<h2 class="fsd">a full stack developer</h2>
<img class="bottom-cloud" src="cloud.png" alt="clouds-img">
<img src="mountain.png" alt="mountain-img">
</div>
<br>
<div class="middle-container">
<div class="profile">
<img class=""src="" alt="">
<h2>Hello.</h2>
<p class="hello-part">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
</div>
<div class="skills">
<h2>My Skills.</h2>
<div class="my-skills">
<img class="coding-Image" src="Skills.png" alt="Skills Image">
<h3>Lorem & Ipsum</h3>
<p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
</div>
<div class="skill-row">
<img class="webdev-Image" src="web dev.jpeg" alt="2020 Web Dev Image">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
</div>
</div>
<br>
<div class="contact-me">
<h2 class="get-in-touch">Get In Touch</h2>
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
<p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
<a class="btn" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492728242c092c24282025672a2624">[email protected]</a>">CONTACT ME</a>
</div>
</div>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/malcolm-henry-099305168/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com/">Twitter</a>
<p>© 2020 Malcolm Henry.</p>
</div>