Hi all!
I’ve been doing the Responsive Web Design course on here and I’m nearly at the Tribute project, so I’ve learnt a little but not a lot!
I decided to have a go at a little side project using what I’ve learnt so far, and try and create a basic webpage, and possibly make the buttons clickable linking to other pages after I’ve completed the Home Page design.
I’m working on the navigation bar at the moment using flexbox. My goal is to have “buttonsix”(Login) and “buttonseven”(Register) flex over to the right side of the navigation bar but I’m having trouble doing this.
It worked when I had only one button (the Register one) but when I added another button for Login I can’t get them both over there, the Login button is completely missing at the moment and I can’t get them both to show up on the right side.
I’ve tried a couple of different things but I’ve hit a wall, and would appreciate if you guys could help me out.
Probably some badly typed coding in there also if anyone could offer any tips with cleaning it up a bit.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Painting</title>
<link href="styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="canvas">
<div class="container">
<div class="buttonone"><div class="navbuttontext">Home</div></div>
<div class="buttontwo"><div class="navbuttontext">Videos</div></div>
<div class="buttonthree"><div class="navbuttontext">Shopping</div></div>
<div class="buttonfour"><div class="navbuttontext">News</div></div>
<div class="buttonfive"><div class="navbuttontext">Books</div></div></span>
<div class="buttonsix"><div class="navbuttontext">Register</div></div>
</div></div>
<div class="buttonseven"><div class="navbuttontext">Login</div></div>
</div>
</div>
</body>
</html>
.canvas {
height: 800px;
width: 100%;
background-color: #0a0a23;
padding-top: 180px;
overflow: hidden;
}
.container {
height: 30px;
width: 100%;
background-color: #3b3b4f;
padding-left: 10px;
display: flex;
flex-direction: row;
gap: 10px;
overflow: hidden;
padding: 2px;
text-align: center;
}
.buttonone, .buttontwo, .buttonthree, .buttonfour, .buttonfive {
justify-content:space-between;
height: 20px;
width: 120px;
background-color: #99c9ff;
align-content: left;
margin: 5px 0 5px 0;
border-radius: 5px;
text-align: center;
margin: 5px 0 0 10px;
}
.navbuttontext {
justify-content: center;
text-align: center;
margin: auto;
letter-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
}
.buttonsix, .buttonseven {
flex-direction: row;
margin: 5px 15px 5px auto;
height: 20px;
width: 120px;
background-color: #99c9ff;
border-radius: 5px;
justify-content: space-evenly;
}