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

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#109 
<!DOCTYPE html>
<html>
  <head>
    <meta charset ="utf-8">
    <title>فيتامين</title>
  </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" width="500px">
      </div>
      <a href="#">اطلب وساطه</a>
    </main>
    <footer>
      <p>&copy; جميع الحقوق محفوظه لفيتامين واو 2018</p>
    </footer>
  </body>
</html>
1 Like
#110

شكراً :grin:

ملاحظة واحدة ال attribute الي في الصورة width لا يحتاج ان تقومي فيه بتحديد وحدة القياس. لذا قومي بكتابه 500 بدون px

#111

هدا هو حلي

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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; 2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
1 Like
#112

ممتاز كلة مية مية :muscle: @mhmd_fthy

1 Like
#113

شكرا

1 Like
#115

لقد أتممت المهمة :blush::blush::blush:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        <main>
            <div>
                <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" height="250">
            <div>
            <a href="WOW">إطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p>&copy; جميع الحقوق محفوظة لفيتامين واو 2019</p>
        </footer>
    </body>
</html>
1 Like
#116

ممتاز :+1:

1 Like
#117

عمل ممتاز ياسين :+1:، ملاحظة واحدة فقط:

قمت بإعطاء الـ attribute href الخاص بالرابط القيمة WOW

 <a href="WOW">إطلب وساطة</a>

في الوقت الحالي الرابط هذا لا يؤدي إلى أي مكان لذا يفضل وضع القيمة الخاصة به هاش # بدلاً من WOW

1 Like
#118

تمام حاضر…شكرا على ملاحظة :relaxed:

1 Like
#119 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>
    <body>
        <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">
            </div>
            <a href="#">أطلب وساطه</a>
        </main>    
        <footer>
             <p>&copy; 2018 جميع الحقوق محفوظة لفيتامين واو</p> 
        </footer>
    </body>
</html>
2 Likes
#120

مية مية ي تغريد :+1:

#121

تـطـبـيـق فـيـتـامـيـن واو
@Alhakem

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Vitamin Wow</title>
 </head>
 <body>
	<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">
	  </div>
	  <a href="#">أطلب وساطه</a>
	</main>
	
	<footer>
	  <p>&copy;جميع الحقوق محفوظه لفيتامين واو 2018</p>
	</footer>
 </body>
</html>
1 Like
#122

تم انجاز المطلوب ^^

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو ^^</title>
    </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>
1 Like
#123

@FatenAli @kamel_1

:100:

1 Like
#129 
<!DOCTYPE html>
<html lang="ar">
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </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">
            <br>
            <a href="#">اطلب وساطة</a>
        </main>
        <footer>
            <p>&copy;2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
1 Like
#130

عمل رائع ومضبوط :star2:

ملاحظة واحد:
تجنبي استخدام العنصر br لاضافة سطر جديد، بدلاً من ذلك ضعي الصورة او الرابط بداخل عنصر div وسيتم اخذها في سطر منفصل

1 Like
#131

image
image.png1366×728 215 KB

1 Like
#132

ممتاز نبيلة :+1:

#133

شكرا استاذ اسعدني ذلك و لكن
حاولت كتابة الاكواد في الخانة التي طرحتها و فتحت الفيديو الى انني لم افهم

1 Like
#134

ما فهمت عليك وضحي لي ايش المشكلة بالضبط :slightly_smiling_face: