I recently started trying to learn webdesign and I've already jumped into my first project. I've created a template in photoshop but I'm having trouble reproducing it in my visual studio code. Any help would be awesome. I've included my questions in the CSS comments. Also, not very relevant but, these past 3-4 days of this new learning experience have been great and very challenging! Would love some general coding tips if possible. Sorry for being an absolute noob. My first project ideal outcome
body {
margin: 0;
background-color: #282828;
}
/* how can I make the navbar go a few pixels down? like in the photo */
.navbar {
width: 100%;
float: left;
background-color: #cb209d;
}
/* can't make the searchbox go to the left side of the navbar :( */
.searchbox {
float: left;
}
/* how am I supposed to center the social logos without using position: absolute? */
li {
list-style: none;
float: right;
border-right: 1px solid #282828;
display: inline-block;
font-size: 35px;
padding: 0px 25px;
color: #282828;
}
/* Can't seem to fix these vertical dividers... I know, I'm a handful :/ */
li:last-child {
border-right: none;
}
#u2b {
border-right: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script
src="https://kit.fontawesome.com/f77b4d6781.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<title>first project</title>
</head>
<body>
<!-- top navigation bar -->
<div class="navbar">
<ul>
<li id="u2b"><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li>
<input
class="searchbox"
type="text"
name=""
placeholder="Search me fam"
id=""
/>
</li>
</ul>
</div>
</body>
</html>
