I'm having problems with the code.
When I corrected it, my photo on the left side disappeared and the formatting of the description and about me button does not appear
So my question is:
The code is below:
<div class="image">
<img src="images/photo ze.jpg" alt="">
</div>
<div class="content">
<h1>My name is José Moreira, I am
<span
class="txt-rotate"
date-period="2000"
data-rotate='[ "Graphic Design.", "Photographer.", "Web developer.",]'></span>
</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Who, error?</p>
<a href="#about" class="btn">about me</a>
</div>
The complete code is at:
https://jsfiddle.net/Quencyjones79/zrp9e12g/1/
https://codepen.io/Quencyjones79/pen/GRyZQeG
I greatly appreciate your help.
In your CSS, you have the following img properties set. With display: none; applied to the img selector, images on the page will not be visible unless you override the rule with another, more specific CSS rule.
img{
position: relative;
width: 100%;
display: none;
}
One way to get the image you are concerned with to appear would be to add display: inline to the .home .image img{} selector. I'm not saying this is the best approach, but it shows how to target the specific image you are concerned with and change its display property. You could also just remove the display: none property from img.
If you're interested, learn how to debug CSS with developer tools.