مشاركة حلول: صفحة المنشورات HTML

مرحباً جميعاً

المهمة المطلوبة

بإمكانك الإطلاع على المهمة المطلوبة من هنا

كيفية كتابة الأكواد في المنتدى

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>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 فربما تحتاجه :wink:

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:

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

ما شاء الله عمل ممتاز :clap:

1 Like

شكرا :hugs::relaxed::star_struck:

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:

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:

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:

ما شاء الله أنت وعلي @Jileidan في تقدم سريع ومستمر… keep it up :wink:

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 :sweat_smile:
ملحوظة: انا مش كويس اوي ف اختيار الالوان وكده :joy::broken_heart:

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