مرحباً جميعاً
المهمة المطلوبة
بإمكانك الإطلاع على المهمة المطلوبة من هنا
2 Likes
<!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>
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<a href="new">New</a>
</nav>
</header>
<main>
<article>
<div>
<img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
</div>
<div>
<h2>Yasser</h2>
<p>First interesting topic goes here </p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
<article>
<div>
<img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
</div>
<div>
<h2>Mohammed</h2>
<p>Second topic goes here</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
<article>
<div>
<img src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
</div>
<div>
<h2>Sara</h2>
<p>Third topic goes here</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
</main>
</body>
</html>
1 Like
عمل رائع يا يحيى!
اقرا حول التاق section فربما تحتاجه 
1 Like
تمام سأقرأ عنه
شكراً مهندس
1 Like
<!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>
</head>
<body>
<header>
<h1 style='color:rgb(54, 65, 212);'>Posty</h1>
<nav>
<a href="post-add.html">New</a>
</nav>
</header>
<main>
<article>
<div>
<img src="https://forums.coretabs.net/user_avatar/forums.coretabs.net/yaseralnajjar/120/604_2.png">
</div>
<div>
<h2>Yasser Alnajjar</h2>
<p>post 1 ...........</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
<article>
<div>
<img src="https://forums.coretabs.net/user_avatar/forums.coretabs.net/alhakem/120/522_2.png">
</div>
<div>
<h2>Mohammed Alhakem</h2>
<p>post 2 ............</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
<article>
<div>
<img src="https://forums.coretabs.net/user_avatar/forums.coretabs.net/asmaa_salih/120/602_2.png">
</div>
<div>
<h2>Asmaa Salih</h2>
<p>post 3 .......</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</div>
</article>
</main>
</body>
</html>
1 Like
عمل ممتاز… انتقلي للتالي 
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POSTY</title>
<style>
article{
margin: 50px;
border:1px solid #ccc;
}
p{
padding: 20px;
}
button{
margin: 20px;
float: right;
}
</style>
</head>
<body>
<nav>
<h1>logo</h1>
<button><a href="#">+New</a></button>
</nav>
<article>
<div>
<img src="https://forums.coretabs.net/user_avatar/forums.coretabs.net/yaseralnajjar/120/604_2.png">
<span>Yaser</span>
</div>
<p>First interesting topic goes here.....</p>
<button>Edit</button>
<button>Delete</button>
</article>
<article>
<div>
<img src="https://forums.coretabs.net/user_avatar/forums.coretabs.net/alhakem/120/522_2.png" alt="this photo of mohamed">
<span>Yaser</span>
</div>
<p>First interesting topic goes here.....</p>
<button>Edit</button>
<button>Delete</button>
</article>
<article>
<div>
<img src="https://scontent-mrs1-1.xx.fbcdn.net/v/t1.0-1/p160x160/13226720_796587797110130_1495327101273824242_n.jpg?_nc_cat=105&_nc_ht=scontent-mrs1-1.xx&oh=48189b5f01485d9c04784de427db3fd2&oe=5D503404" alt="this photo of Sara">
<span>Yaser</span>
</div>
<p>First interesting topic goes here.....</p>
<button>Edit</button>
<button>Delete</button>
</article>
</body>
</html>
1 Like
ما شاء الله عمل ممتاز 
1 Like
شكرا 
1 Like
هذه محاولتي ^^
<!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>Document</title>
</head>
<body>
<header>
<h1>Posty</h1>
<nav>
<a href="post-add.html">New</a>
</nav>
</header>
<main>
<article>
<div>
<img src="https://images.pexels.com/photos/2257800/pexels-photo-2257800.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
height="250px">
<div>
<h2>Yaser</h2>
<p>first interesting topic goes here .......</p>
<div>
<a href="edit">Edit</a> |
<a href="delet">Delet</a>
</div>
</div>
</div>
</article>
<article>
<div>
<img src="https://images.pexels.com/photos/1432552/pexels-photo-1432552.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
height="250px">
<div>
<h2>Mohamed</h2>
<p>Seconde topic goes here .......</p>
<div>
<a href="edit">Edit</a> |
<a href="delet">Delet</a>
</div>
</div>
</div>
</article>
<article>
<div>
<img src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
height="250px">
<div>
<h2>Sara</h2>
<p>Third topic goes here.......</p>
<div>
<a href="edit">Edit</a> |
<a href="delet">Delet</a>
</div>
</div>
</div>
</article>
</main>
</body>
</html>
1 Like
عمل رائع يا كمال كالعادة 
1 Like
شكرا استاذ ياسر ^^
1 Like
<!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>
</head>
<body>
<header>
<div style="color:red; font-size: 50px;">posty</div>
<div>
<a href="new">New</a>
</div>
</header>
<main>
<article>
<img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/47207049_2285194918175683_6021265646132658176_n.jpg?_nc_cat=100&_nc_ht=scontent-mad1-1.xx&oh=9cb7b794531f29d5df32c489c51c3866&oe=5D9E2A07" height="200px">
<div style=" font-size: 25px;">Anam</div>
<p> Hello everyone. I am Anam</p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</article>
<article>
<img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/20992748_1443861152362428_2881576909317786208_n.jpg?_nc_cat=110&_nc_ht=scontent-mad1-1.xx&oh=5cab28e0d69ffaf086ccc24913d6f6ae&oe=5D91A3A8" height="200px">
<div style=" font-size: 25px;">Sam</div>
<p> I am student </p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</article>
<article>
<img src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/61142107_2120150731414945_1819121591355703296_n.jpg?_nc_cat=102&_nc_ht=scontent-mad1-1.xx&oh=d5254ad58b2535bcda16460885a821b8&oe=5D58FCBB" height="200px">
<div style=" font-size: 25px;">Ali</div>
<p> I life in Sanaa </p>
<div>
<a href="edit">Edit</a> |
<a href="delete">Delete</a>
</div>
</article>
</main>
</body>
</html>
1 Like
عمل رائع يا علي… ما شاء الله
1 Like
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Posty</title>
</head>
<body>
<header>
<div>
<h1>Logo</h1>
</div>
<div>
<a href="newpost.html">New+</a>
</div>
</header>
<main>
<article class="">
<div>
<img src="https://images.pexels.com/photos/1904733/pexels-photo-1904733.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
</div>
<div>
<h2>Alalaf</h2>
<p>First interesting topic goes here</p>
</div>
<div class="">
<a href="#">Edit</a>|
<a href="#">Delete</a>
</div>
</article>
<article>
<div>
<img src="https://images.pexels.com/photos/1904733/pexels-photo-1904733.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
</div>
<div>
<h2>Ahmed</h2>
<p>second interesting topic goes here</p>
</div>
<div class="">
<a href="#">Edit</a>|
<a href="#">Delete</a>
</div>
</article>
</main>
</body>
</html>
2 Likes
شكراً
1 Like
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Home</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<header>
<div class="logo">
logo
</div>
<div class="new">
<a href="#">New</a>
</div>
</header>
<!--Yaser-->
<section class="#">
<div>
<img src="https://www.google.com/search?q=image+person&rlz=1C1CHBD_frDZ829DZ829&sxsrf=qwu&tbm=isch&source=iu&ictx=1&fir=epi1o4ZkkhraRM%253A%252CKIRDrY1dWsy9uM%252C_&vet=1&usg=AI4_-kSt6M7VaQEs9Dwcmpfut0zpK9N4VA&sa=X&ved=2ahUKEwiV_IODpsfiAhUYAmMBHeGbAzcQ9QEwBXoECAYQDg#imgrc=epi1o4ZkkhraRM:" alt="" srcset="">
</div>
<h2>Yaser</h2>
<p>first interesting topic goes here...</p>
<div>
<a href="#">Edit</a>|
<a href="#">Delete</a>
</div>
</section>
<!--Mohammed-->
<section class="#">
<div><img src="https://www.google.com/search?q=image+person&rlz=1C1CHBD_frDZ829DZ829&sxsrf=qwu&tbm=isch&source=iu&ictx=1&fir=oHgRfKlUHDUFZM%253A%252ClrXLklXghG-NqM%252C_&vet=1&usg=AI4_-kT_YVS3ms0xMioXh5mogYjxZ7PZ7w&sa=X&ved=2ahUKEwiV_IODpsfiAhUYAmMBHeGbAzcQ9QEwAXoECAYQBg#imgrc=oHgRfKlUHDUFZM:" alt="" srcset=""></div>
<h2>Mohammed</h2>
<p>second topic goes here...</p>
<div>
<a href="#">Edit</a>|
<a href="#">Delete</a>
</div>
</section>
<!--Sara-->
<section class="#">
<div><img src="https://www.google.com/search?q=image+person&rlz=1C1CHBD_frDZ829DZ829&sxsrf=qwu&tbm=isch&source=iu&ictx=1&fir=_QMxxE3JiXIJfM%253A%252CKIRDrY1dWsy9uM%252C_&vet=1&usg=AI4_-kQccFMp0iaDkVpQYg7Q11UPFNYXhw&sa=X&ved=2ahUKEwiV_IODpsfiAhUYAmMBHeGbAzcQ9QEwA3oECAYQCg#imgrc=_QMxxE3JiXIJfM:" alt="" srcset=""></div>
<h2>Sara</h2>
<p>third topic goes here...</p>
<div>
<a href="#">Edit</a>|
<a href="#">Delete</a>
</div>
</section>
</body>
</html>
1 Like
انا رفعت الكود علي Github و ده اللينك:
https://ahmedashrafaz.github.io/CoretabsBlogTest/static_version/index.html
دي Screenshot:
و ده ال source code بس استخدمت فيه شوية css و bootstrap 
ملحوظة: انا مش كويس اوي ف اختيار الالوان وكده 
Code:
<!DOCTYPE html>
<html>
<head>
<title>MyBlog | Home</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Comfortaa|Courgette|Fondamento|Merienda+One&display=swap"
rel="stylesheet">
<style>
html, body
{
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body
{
width: 100%;
background-image: url('https://images.pexels.com/photos/220444/pexels-photo-220444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: 100% 100%;
background-repeat: no-repeat;
}
body .page-wrapper
{
width: 90%;
height: 90%;
margin: 2.5% auto;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
background-color: #2d356181;
}
body .page-wrapper .card
{
background-color: transparent;
}
body .page-wrapper .my-card
{
background-color: transparent;
border-radius: 0;
border-width: 0;
}
body .page-wrapper .card .posts
{
background-color: transparent;
margin: 0;
padding: 0;
}
body .page-wrapper .post-wrapper
{
margin: 1%;
}
body .page-wrapper .card .blog-logo
{
font-family: 'Merienda One', cursive;
font-size: 35px;
font-weight: 100;
border-width: 0;
color: #df9cb2;
background-color: #2d3561;
}
body .page-wrapper .card-header
{
background-color: #735372d8;
color: #6fe7dd;
font-family: 'Fondamento', cursive;
font-size: 18px;
font-weight: 100;
}
body .page-wrapper .card-body
{
background-color: #8f758ed2;
color: #bdf2d5;
font-family: 'Comfortaa', cursive;
font-size: 14px;
}
body .page-wrapper .card-header img
{
display: inline-block;
border-radius: 60%;
}
body .page-wrapper .card-header .post-owner
{
display: inline-block;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="card my-card">
<div class="card-header text-center blog-logo sticky-top">
<p style="display: inline-block">Website Name</p>
<div class="float-right">
<button type="button" class="btn btn-primary" style="font-family:
'Courgette', cursive;">+ Add Post</button>
</div>
<div class="float-none"></div>
</div>
<div class="posts">
<!--Start of a post-->
<div class="card post-wrapper">
<div class="card-header">
<img
class="img-fluid"
src="https://lh3.googleusercontent.com/-kPePE1Kmvog/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfXLacicEIE5f-1_53SGd_wNE7brg.CMID/s192-c/photo.jpg"
width="4%">
<p class="post-owner">Ahmed Ashraf</p>
<div class="float-right" style="margin-top: 1%;">
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
<div class="float-none"></div>
</div>
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</div>
</div>
<!--End of a post-->
<!--Start of a post-->
<div class="card post-wrapper">
<div class="card-header">
<img
class="img-fluid"
src="https://lh3.googleusercontent.com/-kPePE1Kmvog/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfXLacicEIE5f-1_53SGd_wNE7brg.CMID/s192-c/photo.jpg"
width="5%">
<p class="post-owner">Ahmed Ashraf</p>
<div class="float-right" style="margin-top: 1%;">
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
<div class="float-none"></div>
</div>
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</div>
</div>
<!--End of a post-->
<!--Start of a post-->
<div class="card post-wrapper">
<div class="card-header">
<img
class="img-fluid"
src="https://lh3.googleusercontent.com/-kPePE1Kmvog/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfXLacicEIE5f-1_53SGd_wNE7brg.CMID/s192-c/photo.jpg"
width="5%">
<p class="post-owner">Ahmed Ashraf</p>
<div class="float-right" style="margin-top: 1%;">
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
<div class="float-none"></div>
</div>
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</div>
</div>
<!--End of a post-->
<!--Start of a post-->
<div class="card post-wrapper">
<div class="card-header">
<img
class="img-fluid"
src="https://lh3.googleusercontent.com/-kPePE1Kmvog/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rfXLacicEIE5f-1_53SGd_wNE7brg.CMID/s192-c/photo.jpg"
width="5%">
<p class="post-owner">Ahmed Ashraf</p>
<div class="float-right" style="margin-top: 1%;">
<button type="button" class="btn btn-info">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
<div class="float-none"></div>
</div>
<div class="card-body">
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
</div>
</div>
<!--End of a post-->
</div>
</div>
</div>
</body>
</html>
1 Like