<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook 2</title>
<link rel="stylesheet" href="Facebook 2.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<div class="parent">
<div class="head">
<div class="nav">
<div class="nav-left">
<ol>
<li><img src="facebook-logo.jpg" alt="logo"></li>
<li><i class="fa-regular fa-bell"></i></li>
<li><i class="fa-regular fa-inbox"></i></li>
<li><i class="fa-solid fa-video"></i></li>
</ol>
</div>
</div>
</div>
<div class="main-content"><p>main-content</p></div>
<div class="foot"><p>foot</p></div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
font-family: "poppins", sans-serif;
}
.parent{
width: 100%;
background: #272727;
display: grid;
gap: 15px;
grid-template-columns: repeat(3 ,1fr);
grid-template-rows: repeat(6 ,150px);
grid-template-areas:
"head head head"
"main-content main-content main-content"
"main-content main-content main-content"
"main-content main-content main-content"
"main-content main-content main-content"
"main-content main-content main-content"
"main-content main-content main-content"
"foot foot foot";
}
.parent div{
background: rgba(241, 241, 241, 0.5);
}
.head{
grid-area: head;
}
.main-content{
grid-area: main-content;
}
.foot{
grid-area: foot;
}
.nav-left ol li{
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-left img{
width: 150px;
height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-left{
display: flex;
align-items: center;
justify-content: space-between;
}
كيف يمكن ان تظهر الأيقونات على يمين شعار الفيسبوك وليس بالأسفل: