Having some trouble with my styling here. None of it seems to be showing up and I keep getting 'invalid property value' errors for all the assigned values.
Let's take a look at the provided HTML and CSS:
HTML:
<div>
<img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">
<div>
<h2>Digital Assets For Creative Professionals</h2>
</div>
<div>
<ul>
<li>
<a href="" class="btn1">Photo</a>
</li>
<li>
<a href="" class="btn1">Video</a>
</li>
<li>
<a href="" class="btn1">Motion</a>
</li>
</ul>
</div>
</div>
CSS:
h2 {
position: absolute;
z-index: 1;
top: 140px;
color: #FFF;
padding-left: 4%;
}
ul {
position: absolute;
z-index: 1;
top: 290px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
margin-left: 10em;
}
li {
float: left;
padding-right: 40px
}
a.btn1 {
display: inline-block;
padding: 0.3em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 2em;
box-sizing: border-box;
text-decoration: none;
font-weight: 300;
color: #FFFFFF;
background-color: #4eb5f1;
text-align: center;
transition: all 0.2s;
}
a.btn1:hover{
background-color: #4095c6;
}
I would really appreciate any help or advice on this issue.
Initially, I thought it might be a browser problem, but I haven't noticed anything unusual there. I even tried testing this code in other browsers like Firefox, but the problem persists.
Thank you very much!