All I want is to put the icon in the left and let it be horizontally aligned with the title. Here is the CodePen: https://codepen.io/mrlima/pen/WNgoGew
I'm really new to front-end coding, I'm much better with Javascript Algorthims, please, be patient with me because English is my second language.
/*HTML*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Poise Idiomas</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/e424189c9b.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="topnav">
<h1 id="title">
<i style="float:left;"class="fa-solid fa-bars"></i>
<span class="green">P</span><span class="yellow">O</span><span class="blue">I</span><span class="yellow">S</span><span class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy" style="font-size:30pt;">.com</span>
</h1>
</div>
<script src="script/script.js"></script>
</body>
</html>
/*CSS*/
@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Tilt+Warp&display=swap");
:root {
--bg-color: rgba(20, 20, 20, 1);
}
html, body {
background-color: var(--bg-color);
color: white;
font-family: "Tilt Warp", cursive;
margin:0px;
padding:2px;
}
h1 {
margin: 0px;
padding: 0px;
}
::selection{
background: transparent;
color: #d12628;
}
.topnav{
/* display:inline; */
}
#title {
text-align:center;
font-size: 6rem;
color: #ef233c;
}
/* ------------------------------------------------------- */
.blue {color: #002776;}
.yellow {color: #ffdf00;}
.green {color: #009c3b;}
.white {color: #ffffff;}
.fancy{font-family: "Lobster";color:#d12628;}
.fancy-canada-flag {
font-family: "Lobster";
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_(Pantone).svg/800px-Flag_of_Canada_(Pantone).svg.png');
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
/*No Javascript code written.*/
The first thing that I want to mention is to not use float and use flex instead. remove the float part in the tag. add a div around the spans and add these to the CSS.
#title {
display: flex;
align-items: center;
text-align:center;
font-size: 6rem;
color: #ef233c;
}
.title_container{
flex-grow: 1;
}
and here is the HTML part
<h1 id="title">
<i class="fa-solid fa-bars"></i>
<div class="title_container">
<span class="green">P</span><span class="yellow">O</span><span
class="blue">I</span><span class="yellow">S</span><span
class="green">E</span>
<span class="fancy-canada-flag">Idiomas</span><span class="fancy"
style="font-size:30pt;">.com</span>
</div>
</h1>
look at the pen that I wrote for it. :)