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

ما شاء الله… عمل رائع يا أحمد ومتعوب عليه :ok_hand:

بالنسبة للألوان، ربما فقط بعض التغذية البصرية (مراقبة أعمال أخرى على النت) سيجعل اختيارك للألوان أفضل.

أيمن @Ayman97 (محترف الـ UI/UX في فريق الأكاديمية) مرة رشح هذه المواقع للتغذية البصرية:

https://mobbin.design/
https://webframe.xyz/
https://collectui.com/

3 Likes

تمام شكرا جدا ،، هبص عليهم ان شاء الله :heart::heart:

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:orange; font-size:50px;">Logo</h1>
        <nav>
            <a href="post-add.html">New</a>  
        </nav>
    </header>

    <main>
        
        <article>
            <div>
                <img src="https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
            </div>
            <div>
                <h2>Arij Trabelsi</h2>
                <p>Hello everyone, I am back-end developer</p>
                <div>
                    <a href="edit">Edit</a> |
                    <a href="delete">Delete</a>
                </div>
            </div>
        </article>
            
        <article>
            <div>
                <img src="https://images.pexels.com/photos/2146960/pexels-photo-2146960.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" height="250px">
            </div>
            <div>
                <h2>Aziz</h2>
                <p>Hi there</p>
                <div>
                    <a href="edit">Edit</a> |
                        <a href="delete">Delete</a>    
                </div> 
            </div>     
        </article>           
    </main>
    
</body>
</html>
1 Like

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

1 Like

معرفتش اعمله علي visual code ازاى @YaserAlnajjar معرفتش اعمله html عليا

<!D OCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 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/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=50&w=50">
        </div>
        <div>
            <h2>Yasser Alnajjar</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellendus itaque rem 
                reprehenderit tempora officia sapiente? Hic, quae qui atque, quaerat, vitae distinctio 
                similique facilis iste nostrum?</p>
            <div>
                <a href="edit">Edit</a> |
                <a href="delete">Delete</a>
            </div>
        </div>

    </article>

    <article>
        <div>
            <img src="https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=100&w=100">
        </div>
        <div>
            <h2>Mohammed Alhakem</h2>
            <p>Quae qui atque, quaerat, vitae distinctio libero quas similique facilis iste nostrum?</p>
            <div>
                <a href="edit">Edit</a> |
                <a href="delete">Delete</a>
            </div>
        </div>
    </article>

</body>
</html>
1 Like

هل بإمكانك توضح أكثر ماهو الذي لم تعرف عمله؟

لم تعرف تنصيب البرنامج؟ او استعماله؟

عندما عملنا على هذا البرنامج بايثون عملنا بعض خطوات لكى يعمل بايثون انا اريد html اعمل عليها على برنامج كوود

2 Likes

تقصد هل هناك خطوات معينة شبيهة بالبايثون عند التعامل مع ملفات HTML في VS Code ؟ اذا كان هذا قصدك فلا يوجد خطوات. مجرد القيام بحفظ الملف بصيغة HTML فقط.

2 Likes

:open_mouth: هجرب هذا

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>
        <div><img src="zeek zone logo.jpg" height="50px" alt="logo"></div> 
        <div>Posty</div>
        <div><a href="#">New post</a></div>
    </header>
    <main>
        <div>
            <div>
                <img src="itc.jpg" height="80px" alt="profile-img">
                <span>Hassan</span>
            </div>
            <div>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Ratione sint eveniet pariatur vel aperiam, distinctio commodi 
                    sed id molestias facilis.</p>
            </div>
            <div>
                <a href="#">Edit</a> |
                <a href="#">Delete</a>
            </div>
        </div>

        <div>
                <div>
                    <img src="itc.jpg" height="80px" alt="profile-img">
                    <span>Hassan</span>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Ratione sint eveniet pariatur vel aperiam, distinctio commodi 
                        sed id molestias facilis.</p>
                </div>
                <div>
                    <a href="#">Edit</a> |
                    <a href="#">Delete</a>
                </div>
            </div>
    </main>
    <footer></footer>
</body>
</html>
1 Like

عمل جيد @zeekzone :+1:

بامكانك استعمال semantic HTML بدلا من div بشكل متكرر

2 Likes

ok! thank you sir!

1 Like

مـهـمـة عـمـل صـفـحـة الـمـنـشـورات …

كــود 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;
   
  
}



1 Like

عمل ابداعي وفوق التوقعات والمطلوب… ما شاء الله :ok_hand:

2 Likes

:heart_eyes: يــســلــمـــــوا …

1 Like
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <nav>
        <h2 style="color:red;">posty</h2>
        <a href="New" style="float:right;width:100px; height:100px">New</a>
    </nav>

</header>
<div>
    <img src="https://cdn.vox-cdn.com/thumbor/GAI9xVQtPBrX2TZSCtwV5mVIWeg=/0x0:5568x3712/920x613/filters:focal(2858x720:3748x1610):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/62207705/922984782.jpg.0.jpg" width="100px" height="100px">
    <h2>yaser</h2>
    <h4>///////////////</h4>
    <a href="edit">Edit</a>
    <a href="delete">Delete</a>
</div>

</body>
</html>
3 Likes

عمل جميل يامحمد :+1:

3 Likes
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Facebook</title>
</head>
<body>
    <div>
        <div>
            <img src='https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-512.png'>
        </div>
        <div>
            <a href='#'>New</a>
        </div>
        <div id="post">
            <div>
                <img src='https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'>
            </div>
            <div>
                <h2>Adam</h2>
            </div>
            <div>
                <p> Lorem ipsum</p>
            </div>
            <div>
                <a href='#'>Edit | </a>
                <a href='#'>Delete</a>
            </div>
        </div>
        <div id="post">
            <div>
                <img src='https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'>
            </div>
            <div>
                <h2>Ibraham</h2>
            </div>
            <div>
                <p> Lorem ipsum</p>
            </div>
            <div>
                <a href='#'>Edit | </a>
                <a href='#'>Delete</a>
            </div>
        </div>
        <div id="post">
            <div>
                <img src='https://images.unsplash.com/photo-1520006338085-1e203688f573?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'>
            </div>
            <div>
                <h2>John</h2>
            </div>
            <div>
                <p> Lorem ipsum</p>
            </div>
            <div>
                <a href='#'>Edit | </a>
                <a href='#'>Delete</a>
            </div>
        </div>
    </div>

</body>
</html>
1 Like

PyCharm
لا يقوم بتغيل كود الصفحة الرئيسية لفلاسك زر التشغيل رمادي وتأتيني رسالة
configure python enterpreter

1 Like

اهلا اسماعيل

هل حملت مكتبة flask؟

1. ادخل على اعدادات المشروع

image

2. ابحث عن flask في هذه القائمة

3. ربما تحتاج لعمل add من هنا للـ python interpreter ثم OK

1 Like