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

فيتامين واو

<!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>
3 Likes

عمل ممتاز :clap:

2 Likes

تدريب فيتامين واو :v:

<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">
            <div>
            <a href="#">اطلب وساطة</a>
            </div>
        </main>
        <footer>
            <p> &copy 2018 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
4 Likes

جميل ي عمر :star_struck::muscle:

ملاحظة: في كود واحد ناقص اكتشف وين :wink:

2 Likes

لم أعرف بعد كيفية الكتابة باللغة العربية في محرر النصوص لتظهر على الصفحة
هذا الكود الخاص بي

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> Vitmine WOW </title>
</head>
<body>
	<header>
		<h1>VIT O</h1>
	</header>
	<main>
		<h2> we will make you at the head if you are late</h2>
		<p>
			you need this Vit more than any other Vit. beacause, it not only provides your body with power but also your future career.
		</p>
		<div>
			<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
		</div>
		<a href="https://www.youtube.com/"> make an order now </a>
	</main>
	<footer>
		<p>
			&copy; 2018 all rights reserved
		</p>
	</footer>
</body>
</html>
4 Likes

عمل مضبوط مية مية :smiley:

ماهي المشكلة الي بتواجهك عند كتابة المحتوى بالعربية؟

1 Like

تقصد هذا السطر :thinking:

<!DOCTYPE html>
2 Likes

ايوة، هذا السطر يعرف المتصفح باصدار لغة ال HTML والذي هو 5 في حالتنا :+1:

2 Likes
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>فيتامين واو </title>
    <style>
        body {
           background-color:#171a29;
           color:#ffffff;
        }
        header{
             background-color:#212639;
             width:100%;
             height:60px;
        }
        main img{
            width:600px;
            height:210px;
        }
        main a{
            background-color:#3b7c3a;
            color:#ffffff;
        }
        footer p{
            background-color:#0f121b;
            color:#707281;
            width:100%;
            height:40px;
        }
    </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; جميع الحقوق محفوظة لفيتامين واو 2018</p>
    </footer>
    </body>
</html>
4 Likes

جميل كما هو مطلوب :muscle:

1 Like

لا يتعرف محرر النصوص لذي استخدمه على الاحرف لعربية
أستخدم sublime text3

1 Like

مهمة: التدرب على تقسيم وهيكلة الصفحات
الكود: :grinning::grinning:

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

شكرا :grinning:

3 Likes

مع الأسف مشكلة واجهتني سابقاً وبالرغم من وجود اضافة تساعدك على حل المشكلة الا انها تضل مزعجة.

أنصح بالإنتقال إلى VS Code او Atom

:white_check_mark: مية مية :+1:

1 Like

شكرا لك استاذ
عندي سؤال هل هذه نهاية هذا المساق مستوى مبتدى
ام هناك فيديوات لاحقة
وايضا هل يحق لي الالتحاق باكثر من مسار ضمن الاكاديمية اذا نعم فالالتحاق كيف يتم ارجو التوضيح
وشكرا

1 Like

لا شكر على واجب :blush:

عندي سؤال هل هذه نهاية هذا المساق مستوى مبتدى

لا، مازال لدينا وحدتين ونكمل العمل على الورشة الأولى.

أعتذر لتأخر طرح باقي الدروس لظروف خارجة عن الإرادة ولكن سنعود لطرح البقية والبدء بورشة عمل جديدة خلال الايام القادمة وسأحرص على وضع جدول زمني محدد.

وايضا هل يحق لي الالتحاق باكثر من مسار ضمن الاكاديمية اذا نعم فالالتحاق كيف يتم ارجو التوضيح

نعم تستطيعي التغيير بين المسارات من خلال لوحة التحكم

بالضغط على الصورة الشخصية > إعدادات الحساب > تغيير المسار

2 Likes
فيتامين واو

فيتامين واو

<section>
	<article>
		<p>سنجعلك في المقدمة إن تأخرت</p>

		<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>

		<div>
			<img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="man">
		</div>

		<button>أطلب وساطة</button>
	</article>
</section>

<footer>
	<p>جميع حقوق الطبع محفوظة فيتامين واو 2018</p>
</footer>
1 Like

الحمد لله الذي بنعمته تتم الصالحات :smiley:

<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" width="500" height="200">
            </div>
            <a href="www.vitamino.com">اطلب وساطة</a>
        </main> 
        <footer>
            <p>&copy; 2018جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>  
    </body>
</html>

2 Likes

ممتاز كل شئ حسب المطلوب :grin::clap:

2 Likes

قم بكتابة بقية الوسوم بالإضافة إلى إضافة العنصر header :blush:

1 Like