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

#1

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

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

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

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

#2
<!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
#3

عمل رائع يا يحيى!

اقرا حول التاق section فربما تحتاجه :wink:

1 Like
#4

تمام سأقرأ عنه
شكراً مهندس

1 Like
#5
<!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
#6

عمل ممتاز… انتقلي للتالي :+1:

1 Like
#7
<!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
#8

1 Like
#9

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

1 Like
#10

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

1 Like
#11

هذه محاولتي ^^

<!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
#12

عمل رائع يا كمال كالعادة :+1:

1 Like
#13

شكرا استاذ ياسر ^^

1 Like