HTML >How do I create Separate buttons beside the main ones?

[Satoriwolf]

Hey Guys,

What HTML/CSS do I use to create a profile and cart button as seen in the image attached. I have my standard buttons but I don't have the profile and cart, the issue is I want them different size and alignment more to the top right. Do they need to be in the navbar or superimposed on it? so to speak


<!DOCTYPE html>
<html lang='en'>

<head>

<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta charset="utf-8">

</head>


<body>
<header>
<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo"
class="logo">



<nav>
<ul>
<li><a href="index.html"> HOME </a></li>
<li><a href="tour.html"> TOUR </a></li>
<li><a href="tickets.html"> BUY TICKETS </a></li>
<li><a href="gallery.html"> GALLERY </a></li>
<li><a href="about.html"> ABOUT </a></li>
</ul>
</nav>
</div>
</header>

<img src='images/pic1.png' alt="home page image" class="image">


<div class="social-icons">
<img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp">
<img src='images/facebook.png' style="width:50px;height:50px" alt="facebook">
<img src='images/insta.png' style="width:50px;height:50px" alt="insta">
<img src='images/twitter.png' style="width:50px;height:50px" alt="twitter">
</div>





</body>

</html>

 

[LTomy]

Hi, I guess they are many approaches, but I would put them inside <a> tags and inside the <nav> tag (In the order they appear). Then, I would, in the css, select them using the selector 'nav a img{}' to set their dimension/margin.

 

[Malcolm]

Hi @Satoriwolf!

Please place all code within our (<\>) BBCode feature. This helps with copying and viewing your code.

 

[simong1993]

Hey and welcome 😀 me i use https://ionicons.com/

you download there style sheet then all you have to do is declare the class or use a # and it shows the icon as if its text 😀 if you need some more help i can do a little tut on how to use it 🙂