مـهـمـة عـمـل صـفـحـة الـمـنـشـورات …
كــود HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Posty</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul class="navbar">
<li>
<h1>LoGO</h1>
</li>
<li>
<a href="add_post.html">NEW</a>
</li>
</ul>
</nav>
</header>
<main>
<article >
<div >
<img src="https://images.pexels.com/photos/324658/pexels-photo-324658.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
<div class="main_content">
<h2>Faten Ali</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Sit fugit distinctio quisquam quia aliquam itaque ipsa!
Ab corporis reiciendis tenetur nemo, ipsa odio hic veritatis nam,
quaerat expedita vel esse.</p>
</div>
<div class="content">
<a href="Edit.html">Edit</a> |
<a href="Delete.html">Delete</a>
</div>
</article>
<article >
<div >
<img src="https://images.pexels.com/photos/936229/pexels-photo-936229.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
<div class="main_content">
<h2>Ahmed Ali</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Sit fugit distinctio quisquam quia aliquam itaque ipsa!
Ab corporis reiciendis tenetur nemo, ipsa odio hic veritatis nam,
quaerat expedita vel esse.</p>
</div>
<div class="content">
<a href="Edit.html">Edit</a> |
<a href="Delete.html">Delete</a>
</div>
</article>
</main>
</body>
</html>
كــود CSS
body{
margin: 0;
background-color: #f2f2f2;
}
header{
height: 80px;
align-items: center;
max-width: 650px;
margin: 0 auto;
}
header h1{
font-size: 30px;
color: #505252;
}
header .navbar{
list-style: none;
margin: 0;
}
header .navbar li {
display: inline-block;
}
header .navbar li a{
position: relative;
display: flex;
float: right;
color: #fff;
text-decoration: none;
border: 2px solid #14b4dd;
padding: 10px 40px;
border-radius: 40px;
background-color: #14b4dd;
top:15px;
margin-left: 350px;
}
main{
max-width: 700px;
margin: 0 auto;
}
article{
margin: 30px 60px;
padding: 30px;
background-color: #fff;
height: 160px;
border-radius: 2em;
}
main img{
width: 100px;
height:100px ;
border-radius: 50px;
}
main h2{
display:inline;
position: relative;
left: 10px;
top: -2px;
margin-left: 100px;
}
main p {
margin-left: 110px;
color: #3e3f3f;
}
.main_content{
display: inline;
position: relative;
top: -90px;
left: 20px;
}
.content{
margin: -80px 130px;
}
.content a{
color: #14b4dd;
}
#add h2{
margin-left: -10px;
font-weight: bold;
font-size: 25px;
}
main label{
display: block;
margin-top: 20px;
font-weight: bold;
}
#add{
background-color: #fff;
padding: 40px;
max-width: 550px;
border-radius: 10px;
}
main input,textarea{
font-size: 18px;
padding: 10px;
background-color: #fdfdfd;
border: 1px solid #e1e1e1;
margin-top: 6px;
border-radius: 2px;
outline: none;
min-width: 60%;
transition: background-color ease-in-out 0.2s;
max-width: 100%;
}
main button {
background-color: #14b4dd;
color: #fff;
width: 19%;
border-radius: 50px;
padding: 10px;
cursor: pointer;
border: none;
font-size: 16px;
margin-top: 12px;
padding: 12px;
}