Need some assitance regarding header design for a website - php

Question

Does anyone know how I can code the round icon along with clickable social media icons in the picture?
The site in question is: http://subwayisgay666.my-free.website/
Thanks for your help

Answer 1

This will be enough for you to start on the structure
header > div {
display: flex;
width: 100%;
max-width: 955px;
margin: 0 auto;
padding: 60px 0 40px;
}
header .logo {
display: block;
width: 170px;
height: 170px;
margin-right: 20px;
border-radius: 100%;
flex-grow: 0;
}
header .introduction .title {
padding: 30px;
}
header .social, header .main-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
header .social li + li,
header .main-menu li + li {
margin-left: 15px;
}
header .main-menu li a {
display: inline-block;
padding: 10px;
text-transform: uppercase;
}
<header>
<div>
<a class="logo"><img alt></a>
<div class="introduction">
<div class="title">
<h1>Name</h1>
<p class="subtitle">Joker, gentleman & student extraordinnaire</p>
</div>
<ul class="social">
<li class="facebook"><a><img></a></li>
<li class="google-plus"><a><img></a></li>
<li class="twitter"><a><img></a></li>
<li class="linkedin"><a><img></a></li>
<li class="youtube"><a><img></a></li>
<li class="behance"><a><img></a></li>
</ul>
</div>
<div class="navigation">
<p>Add your introduction text here. Your homepage should be the first page that visitors to your site see, so make sure you give a concise overview of who you are, what you do and why you are right for them.</p>
<ul class="main-menu">
<li><a>About</a></li>
<li><a>Resume</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</div>
</header>