- input type submit mean this will be a submit button value="Submit" will show up on the button
<form action="">
<input type="text">
<input type="submit" value="Submit">
</form>
See the Pen html submit button by Heggyhere (@heggy231) on CodePen.
- Pop the image, add 3-d effect using filter's drop-shadow
img {
filter: drop-shadow(1px 5px 3px rgb(11, 82, 11));
}
<!-- just blue outline around your image -->
img {
filter: drop-shadow(1px 1px 1px blue);
}
- fit img into your container
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
- make
ul,liinto nav bar that is static, horizontal
<!-- Navbar section -->
<nav class="navbar">
<ul>
<li><a href="http://">Gritt-ify</a></li>
<li><a href="http://">Gritty Landing Banner</a></li>
<li><a href="http://">Gritter</a></li>
</ul>
</nav>
.navbar {
/* stay on top page */
position: fixed;
top: 0;
/* take up entire width of pg */
width: 100%;
}
.navbar li {
/* horizontal positioning of li */
display: inline-block;
padding: 7px 10px;
}
.navbar a {
text-decoration: none;
color: black;
}
- To delete default style for
ul:
#greets ul {
list-style-type: none;
}
- To add special avatar to my unordered list
ul:
<ul>
<li><div class="avatar"></div><span>Hello Gritty Bear!</span></li>
<li><div class="avatar"></div><span>What is for lunch?</span></li>
<li><div class="avatar"></div><span>Salmon!</span></li>
</ul>
.avatar {
background-image: url("../images/cookie.png");
background-size: cover;
height: 50px;
width: 50px;
border-radius: 50%;
display: inline-block;
/* keeps the avatar vertically aligned */
vertical-align: middle;
margin-right: 7px;
}
Top comments (0)