مشاركة حلول: مهمة تنسيق تطبيق فيتامين واو


#21

تقريباً خبرة سابقة لانو قبل حاولت اكثر من مرة ادخل في مجال الفرونت ايند بس الكورسات كانت ماتسوي واهس استمر ههههههه فأتركها وايضاً كنت اتعامل مع مدونات بلوكر كانت في 2014 لدي اكثر من مدونة عكس الان الصراحة دورتكم كلش حلوة وتساعد كلش على انو الواحد يستمر بالتعلم

انت بتذاكر من ورانا ؟ :joy:

لاتخبر احد خليها بيني وبينك :joy:


#22

جميل :star_struck:، وصحيح كما أشرت الكورسات الي على النت تشتت الواحد وهذه مشكلة انا واجهتها لهذا كان هدفنا من الأكاديمية إنتاج محتوى وتوجية يساعد الناس على تجنب التشتت والضياع في هذا المجال.

عكس الان الصراحة دورتكم كلش حلوة وتساعد كلش على انو الواحد يستمر بالتعلم

شكراً لك يسعدني سماع ذلك :blush:

لاتخبر احد خليها بيني وبينك :joy:

:shushing_face: حاضر ههههههههه


#23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body {                
                background-color: #171a29;
                font-family: 'Tajawal', sans-serif;
                margin: 0;
                color: #fff;
            }
            header {
                background-color: #212639;
                font-size: 10px;  
                height: 45px;
                line-height: 45px;
                text-align: center;
            }
            header h1 {
             margin-top: 0;   
            }
            main {
                text-align: center;
                margin-top: 60px;
            }
            main h2 {
                font-size: 19px;
            }
            main p {
                margin-bottom: 40px;
                font-size: 12px;
                width: 600px;
                margin-left: auto;
                margin-right: auto;
            }
            main div img {
                margin-bottom: 20px;
                width: 600px;
                height: 210px;
            }
            main a {
                margin-top: 25px;
                text-decoration: none;
                background-color: #3b7c3a;
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 120px;
                height: 30px;
                line-height: 30px;
                color: #fff;
                margin-bottom: 50px;
            }
            footer {
                background-color: #0f121b;
                color: #707281;
                text-align: center;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                margin: 0;
            }
        </style>
    </head>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <h2>سنجعلك في المقدمة إن تأخرت</h2>
        <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
        <div>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="600">
        </div>
        <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        <p>&Copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
    </footer>
    
</html>

#24

ممتاز بن يحيى :star_struck::muscle:


#25
<!DOCTYPE html>
    <html>
        <head>
            <title>عنوان الموقع</title>
            <meta charset="UTF-8">
            <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
            <style>
                * {margin:0}
                body{
                    font-family: 'Tajawal', sans-serif;
                    background-color:#171a29;
                    color: #fff;
                }
                header{background-color: #212639;}
                header h1{
                    margin:0;
                    padding:10px;
                    text-align:center;
                    font-size:20px
                }
                main{text-align:center;padding:60px;}
                main h2{margin-bottom:20px;}
                main p{margin-bottom:50px;}
                main img{
                    height:210px;
                    width:600px;
                }
                main a{
                    background-color:#3b7c3a;
                    color:#fff;
                    display:block;
                    width:20%;
                    margin:20px auto;
                    padding:10px;
                    text-decoration:none;
                }
                footer{
                    background-color:#0f121b;
                    text-align:center;
                    color:#707281;
                }
            </style>
        </head>
        <body>
            <header>
                <h1>فيتامين واو</h1>
            </header>
            <main>
                <h2>سنجعلك في المقدمة إن تأخرت</h2>
                <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
                <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
                   <a href="#">أطلب وساطه</a> 
            </main>
            <footer><p>&copy;جميع الحقوق محفوظه لفيتامين واو</p></footer>
        </body>    
    </html>

#26

عمل ممتاز محمود :smiley:

ملاحظتي الوحيدة هي إعطاء الفقرة النصية عرض محدد على سبيل المثال بالقيمة 600px


#27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>عنوان الموقع</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
             body {
                 margin: 0;
                 background-color: #171a29;
                 font-family: 'Tajawal', sans-serif;
                 color: #fff;
                 text-align: center;
                 box-sizing: border-box;
             }
             header {
                 background-color: #212639;
                 height: 50px;
                 font-weight: 20px;
             }
             header h1 {
                 margin: 0;
                 text-align: center;
                 line-height: 50px;
                 font-size: 20px;
                 
             }
             main {
                 widht: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 padding: 40px 0 40px 0;
             }
             main h2 {
                 font-weight: bold;
                 font-size: 20px
             }
             main p {
                 widht: 600px;
                 font-weight: 200px;
                 font-size: 16px;
                 padding: 0 180px 40px 180px;
             }
             main img {
                 margin-left: auto;
                 margin-right: auto;
                 width: 600px;
                 height: 210px;  
                 margin-bottom: 18px;
             }
             a {
                 display: inline-block;
                 border: 1px solid #3b7c3a;
                 background-color: #3b7c3a;
                 color: #fff;
                 margin-top: 15px;
                 text-decoration-line: none;
                 padding: 5px 18px 5px 18px;
                 font-size: 10px;
                 font-weight: bold;
             }
             footer {
                 background-color: #0f121b;
                 color: #707281;  
             }
             footer p {
                 padding: 8px 0 8px 0;
                 margin-bottom: 0;
                 font-weight: bold;
                 font-size: 10px;
             }
     
        
        </style>
    </head>
    <body>
        <header> 
            <h1> فيتامين باء </h1>
        </header>
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>  إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.
            </p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="400">
            <div>
              <a href="#">اطلب وساطه</a>
            </div>
        </main>
        <footer> 
            <p>&copy; 2018  جميع الحقوق محفوظة للفيتامين باء</p>
        </footer>
    </body>
</html>

#28

عمل ممتاز :+1:

الملاحظة الأولى قمت بكتابة خاصية العرض خطأ widht

قم بتغييرها بالكلمة الصحيحة width

الملاحظة الثانية قمت بإعطاء الخاصية font-weight قيمة بوحدة الـ px

هذه الخاصية لا تحتاج إلى وحدة قياس قم بإستخدام القيم بشكل مباشر هكذا مثلاً

font-weight: 200;

#29

شكرا لك اخي :green_heart: انني في بعض الاحيان افتقد للتركيز لكن سوف اعمل على تجاوز ذلك.


#30

مرحباً :hatched_chick::baby_chick::baby_chick:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>تنسيقات موقع فيتامين واو</title>
        <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
        <style>
            body{
                background-color: #171a29;
                margin: 0;
                font-family: 'Tajawal', sans-serif;
                text-align: center;
                color: #fff;
            }

            header h1 {
                background-color: #212639;
                height: 60px;
                margin: 0;
                line-height: 60px;
                font-size: 24px;
            }
                    
            main {
                width: 600px;
                margin: 80px auto;
            }
                    
            main img{
                width: 600px;
                height: 210px;
                margin-top: 40px;
                margin-bottom: 40px;

            }
                    
            main a{
                background-color: #3b7c3a;
                display: block;
                width: 160px;
                height: 40px;
                margin-left: auto;
                margin-right: auto;
                line-height: 40px;
                text-decoration: none;
                font-size: 16px;
                color: #fff;
            }
                    
            footer{
                background-color: #0f121b;
                height: 40px;
                color: #707281;
                line-height: 40px;
            }

        </style>
</head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <div>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
        </div>
        <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        <p>&copy; 2018 جميع الحقوق محفوظة لفيتامين واو</p>
    </footer>
</body>
</html>


#31

ممتاز :star_struck::muscle: