College of Basic Education | ﻛﻠﯾﺔ اﻟﺗرﺑﯾﺔ اﻷﺳﺎﺳﯾﺔ Course 301 – Males 10:00
Computer Department | ﻗﺳم اﻟﺣﺎﺳوب
Summer 2026 | ٢٠٢٦ ﺻﯾﻔﻲ
Final Practical Training
Instructor: Dr. Ahmad Alonaizi | أﺣﻣد اﻟﻌﻧﯾزي. د: اﻟﻣﺣﺎﺿر ﺗدرﯾب ﻋﻣﻠﻲ ﻟﻠﻔﺎﯾﻧل
Student Name اﻻﺳم: .................................................... Final Mark 19: ...... / اﻟدرﺟﺔ اﻟﻧﮭﺎﺋﯾﺔ
Grading Sheet | ﻣﻌﺎﯾﯾر اﻟﺗﻘﯾﯾم
Evaluation Criteria / ﻣﻌﺎﯾﯾر اﻟﺗﻘﯾﯾم Grade / اﻟدرﺟﺔ
mywellness/[Link] + mywellness/[Link] / اﻹﻋدادات ورواﺑط اﻟﻣﺷروع 1.5
pages/[Link] / ﻣﺳﺎرات اﻟﺗطﺑﯾق 1.5
pages/[Link] / ﻧﻣوذج اﻟﺑﯾﺎﻧﺎت 2
pages/[Link] / اﺳﺗﻣﺎرة اﻟﺑﯾﺎﻧﺎت 1.5
pages/[Link] / ﺟﻠب اﻟﺑﯾﺎﻧﺎت واﻟﺣﻣﺎﯾﺔ 4.5
templates/meals/meal_list.html / ﻋرض اﻟﻧﺗﺎﺋﺞ 2.5
templates/meals/meal_form.html + meal_confirm_delete.html / اﺳﺗﻣﺎرات اﻹﺿﺎﻓﺔ واﻟﺣذف 1
Terminal command / أﻣر اﻟطرﻓﯾﺔ 0.5
static/css/[Link] / ﺗﻧﺳﯾق اﻟﺻﻔﺣﺔ 4
Total / اﻟﻣﺟﻣوع 19
Instructions | اﻟﺗﻌﻠﯾﻣﺎت
You are given incomplete files from one small Django project. ا ﻗ ر أ ﻗ ﺎ ﺋ ﻣ ﺔ. أ ﻛ ﻣ ل ا ﻟ ﻛ و د ا ﻟ ﻧ ﺎ ﻗ ص ﻓ ﻘ ط ﺑ ﺧ ط ا ﻟ ﯾ د. أ ﻣ ﺎ ﻣ ك ﻣ ﻠ ﻔ ﺎ ت ﻧ ﺎ ﻗ ﺻ ﺔ ﻣ ن ﻣ ﺷ ر و ع د ﺟ ﺎ ﻧ ﻐ و ﺻ ﻐ ﯾ ر و ا ﺣ د
Complete only the missing code by hand. Read the Required Details .أﻣﺎﻛن اﻹﺟﺎﺑﺔ ﺻﻧﺎدﯾق ﻛود ذات أﺳطر ﻣرﻗﻣﺔ. اﻟﻣطﻠوب ﻗﺑل اﻹﺟﺎﺑﺔ
before answering. The answer areas are code boxes with numbered
lines.
Very Short HTML Cheat Sheet | ﻗﺎﺋﻣﺔHTML ﻣﺧﺗﺻرة ﻟﻠﺗذﻛﯾر
Tag / اﻟوﺳم Use / اﻻﺳﺗﺧدام Remember / ﺗذﻛﯾر
<header class="site-header">...</header> Page header / رأس اﻟﺻﻔﺣﺔ Opening and closing tags
<nav class="nav">...</nav> Navigation / رواﺑط اﻟﺗﻧﻘل Put links inside nav
<main>, <section>, <div> Page sections / أﻗﺳﺎم اﻟﺻﻔﺣﺔ Use class for styling
<h1>, <h2>, <h3>, <p> Headings and text / ﻋﻧﺎوﯾن وﻧﺻوص Close every tag
<a href="...">Text</a> Link / راﺑط href is required
<form method="post">...</form> POST form / ﻧﻣوذج إرﺳﺎل Add csrf_token
<button type="submit">Save</button> Submit button / زر إرﺳﺎل Inside form
Very Short CSS Cheat Sheet | ﻗﺎﺋﻣﺔCSS ﻣﺧﺗﺻرة ﻟﻠﺗذﻛﯾر
CSS / اﻟﺧﺎﺻﯾﺔ Use / اﻻﺳﺗﺧدام Example / ﻣﺛﺎل
selector { property: value; } CSS rule / ﻗﺎﻋدةCSS Use ; after each property
background-color, color Background and text colors / اﻷﻟوان Example: #0f4cbf
margin, padding Outside/inside spacing / اﻟﮭواﻣش واﻟﺣﺷوات Example: 16px
border, border-radius Border and rounded corners / اﻟﺣدود واﻟﺗدوﯾر 1px solid #ddd
display: flex One-row layout / ﺗرﺗﯾب ﻓﻲ ﺻف justify-content, align-items
display: grid Columns / أﻋﻣدة grid-template-columns
gap Space between items / اﻟﻣﺳﺎﻓﺔ اﻟﺑﯾﻧﯾﺔ Example: 16px
font-weight, text-decoration Text style / ﺗﻧﺳﯾق اﻟﻧص bold; none
Very Short Django Cheat Sheet | ﻗﺎﺋﻣﺔDjango ﻣﺧﺗﺻرة ﻟﻠﺗذﻛﯾر
Code / اﻟﻛود Use / اﻻﺳﺗﺧدام Remember / ﺗذﻛﯾر
LOGIN_URL = "login" Login setting / إﻋداد اﻟدﺧول [Link]
path("", include("[Link]")) Connect app URLs / رﺑط اﻟﺗطﺑﯾق project [Link]
path("meals/", views.meal_list, name="meal_list") URL pattern / ﻣﺳﺎر app [Link]
[Link](User, on_delete=[Link]) Record owner / ﻣﺎﻟك اﻟﺳﺟل [Link]
[Link]() / TextField(blank=True) Fields / ﺣﻘول [Link]
class MealForm([Link]): ModelForm / اﺳﺗﻣﺎرة [Link]
[Link](user=[Link]) My records only / ﺳﺟﻼﺗﻲ ﻓﻘط [Link]
get_object_or_404(Meal, id=id, user=[Link]) Owned record / ﺳﺟل ﻣﻣﻠوك [Link]
form = MealForm([Link]) Receive POST / اﺳﺗﻘﺑﺎل اﻟﻧﻣوذج create view
meal = [Link](commit=False) Pause before saving / ﻗﺑل اﻟﺣﻔظ assign [Link]
MealForm([Link], instance=meal) Update record / ﺗﻌدﯾل ﺳﺟل update view
@login_required Protect view / ﺣﻣﺎﯾﺔ اﻟداﻟﺔ above the view
{% for meal in meals %} ... {% endfor %} Loop / ﺗﻛرار template
{% url "meal_update" [Link] %} Named URL / راﺑط ﺑﺎﻻﺳم name + id
{% csrf_token %} / {{ form.as_p }} Form template / ﻗﺎﻟب ﻧﻣوذج inside POST form
python3 [Link] makemigrations Prepare migrations / ﺗﺟﮭﯾز اﻟﮭﺟرة terminal
Page 1 of 6
Target Page Image | ﺻورة اﻟﺻﻔﺣﺔ اﻟﻣطﻠوﺑﺔ
Complete the templates and CSS so the meals page looks close to this target. | أﻛﻣل اﻟﻘواﻟب وﻣﻠف اﻟﺗﻧﺳﯾق ﻟﯾﺻﺑﺢ ﺷﻛل اﻟﺻﻔﺣﺔ ﻗرﯾﺑﺎ ﻣن ﺷﻛل اﻟﺻورة
Required Details | اﻟﻣطﻠوب
File / اﻟﻣﻠف English Requirement اﻟﻣ ط ﻠو ب ﺑﺎﻟﻌر ﺑﯾﺔ
[Link] Set the login page and the page shown after login. . ﺣ د د ﺻ ﻔﺣ ﺔ اﻟد ﺧ و ل و اﻟﺻ ﻔﺣ ﺔ ﺑﻌ د ﻧﺟ ﺎح اﻟد ﺧ و ل
Project [Link] Connect [Link] to the project. . ﺑﺎﻟﻣﺷروع[Link] ارﺑط
Add list, create, update, delete, login, and logout
pages/[Link] . أ ﺿ ف ﻣ ﺳ ﺎر ا ت ا ﻟ ﻘ ﺎ ﺋ ﻣ ﺔ و ا ﻹ ﺿ ﺎﻓ ﺔ و ا ﻟ ﺗ ﻌ د ﯾ ل و ا ﻟ ﺣ ذ ف و ا ﻟ د ﺧ و ل و ا ﻟ ﺧ ر و ج
routes.
Meal belongs to User and has name, calories,
pages/[Link] . ﻣرﺗﺑط ﺑﺎﻟﻣﺳﺗﺧدم وﻓﯾﮫ اﻻﺳم واﻟﺳﻌرات وﻧوع اﻟوﺟﺑﺔ وﻣﻼﺣظﺎت اﺧﺗﯾﺎرﯾﺔMeal
meal_type, and optional notes.
Create MealForm for name, calories, meal_type, and
pages/[Link] . واﻟﻣﻼﺣظﺎت ﻓﻘط، ﻧوع اﻟوﺟﺑﺔ، اﻟﺳﻌرات، ﻟﻼﺳمMealForm أﻧﺷﻲء
notes only.
Protect views (require login); show current user
و ا ﻋ ر ض ﺳ ﺟ ﻼ ت ا ﻟ ﻣ ﺳ ﺗ ﺧ د م و ا ر ﺑ ط ا ﻟ ﺟ د ﯾ د ﺑ ﮫ: ( ا ﺣ م ا ﻟ د و ا ل ) اط ﻠ ب ﺗ ﺳ ﺟ ﯾ ل ا ﻟ د ﺧ و ل
pages/[Link] records; create with [Link]; update/delete
.وﻋد ّل واﺣذف ﺳﺟﻼﺗﮫ ﻓﻘط
owned records only.
In meal_list: Add Header and navigation, page
أ ﺿ ف ر أ س و ر و ا ﺑ ط و ﻋ ﻧ و ا ن و ز ر إ ﺿ ﺎ ﻓ ﺔ و ﺗ ﻛ ر ار: ﻓ ﻲ ﺻ ﻔ ﺣ ﺔ ﻗ ﺎ ﺋ ﻣ ﺔ ا ﻟ و ﺟ ﺑ ﺎ ت
meal_list.html heading, Add Meal link, loop through cards, empty
. ﺑط ﺎﻗ ﺎ ت و ر ﺳ ﺎﻟﺔ ﻓ ﺎر ﻏ ﺔ و ر اﺑط ﺗﻌ د ﯾل
message, Edit link.
In meal_form.html: Add POST form with protection أظﮭر، ﻣﻊ ﺗوﻛن ﺣﻣﺎﯾﺔPOST أﺿف اﺳﺗﻣﺎرة:ﻓﻲ ﺻﻔﺣﺔ اﺳﺗﻣﺎرة اﻟوﺟﺑﺔ
meal_form.html
token, show form as paragpragh, and Save button. . و أﺿ ف ز ر ﻟﻠﺣ ﻔظ، اﻻ ﺳ ﺗﻣ ﺎر ة ﻛ ﻣ ﺟ ﻣ و ﻋ ﺔ ﻓﻘر ا ت
In confirm_delete.html: add POST confirmation form ﻟﺗﺄﻛﯾد اﻟﺣذف ﻣﻊ ﺗوﻛن ﺣﻣﺎﯾﺔPOST أﺿف اﺳﺗﻣﺎرة:ﻓﻲ ﺻﻔﺣﺔ ﺗﺄﻛﯾد اﻟﺣذف
confirm_delete.html
with protection token and Delete button. . و ز ر ﻟﻠﺣ ذ ف
[Link] Follow the detailed Page Design Instructions. . ا ﺗ ﺑ ﻊ ﺗ ﻌ ﻠ ﯾ ﻣ ﺎ ت ﺗ ﻧ ﺳ ﯾق ا ﻟ ﺻ ﻔ ﺣ ﺔ ا ﻟ ﺗ ﻔ ﺻ ﯾ ﻠ ﯾ ﺔ
Complete migration commands after [Link]
Terminal . أﻛ ﻣ ل أو اﻣ ر اﻟﮭ ﺟ ر ة ﻓ ﻲ اﻟط ر ﻓ ﯾﺔ ﻟﻠﺗﺷ ﻐ ﯾ ل ﺑﻌ د ﺗﻌ د ﯾﻼ ت ﻧﻣ ﺎ ذ ج اﻟﺑﯾ ﺎﻧ ﺎ ت
changes.
Project Structure | ھﯾﻛل اﻟﻣﺷروع
mywellness/
├── [Link]
├── mywellness/
│ ├── [Link] # Project settings and login redirects إﻋدادات اﻟﻣﺷروع وﻣﺳﺎرات اﻟﺗﺣوﯾل ﺑﻌد ﺗﺳﺟﯾل اﻟدﺧول
│ └── [Link] # Main project URLs اﻟﻣﺳﺎرات اﻟرﺋﯾﺳﯾﺔ ﻟﻠﻣﺷروع
│
├── pages/
│ ├── [Link] # Meal model and user relationship ﻧﻣوذج اﻟوﺟﺑﺔ وﻋﻼﻗﺗﮫ ﺑﺎﻟﻣﺳﺗﺧدم
│ ├── [Link] # MealForm ﻧﻣوذجMealForm
│ ├── [Link] # List, create, detail, update, and delete واﻟﺣذف، اﻟﺗﻌدﯾل، اﻟﺗﻔﺎﺻﯾل، اﻹﺿﺎﻓﺔ،اﻟﻌرض
│ ├── [Link] # Application URL patterns ﻣﺳﺎرات ﺻﻔﺣﺎت اﻟﺗطﺑﯾق
│
├── templates/
│ ├── [Link] # Common page structure اﻟﮭﯾﻛل اﻟﻣﺷﺗرك ﻟﺻﻔﺣﺎت اﻟﻣوﻗﻊ
│ ├── registration/
│ │ └── [Link] # Login page ﺻﻔﺣﺔ ﺗﺳﺟﯾل اﻟدﺧول
│ └── meals/
│ ├── meal_list.html # Display the user's meals ﻋرض وﺟﺑﺎت اﻟﻣﺳﺗﺧدم
│ ├── meal_form.html # Add and update a meal إﺿﺎﻓﺔ وﺟﺑﺔ وﺗﻌدﯾﻠﮭﺎ
│ ├── meal_detail.html # Display one meal's details ﻋرض ﺗﻔﺎﺻﯾل وﺟﺑﺔ واﺣدة
│ └── meal_confirm_delete.html # Meal deletion confirmation page ﺻﻔﺣﺔ ﺗﺄﻛﯾد ﺣذف اﻟوﺟﺑﺔ
└── static/
└── css/
└── [Link] # Page design and layout ﺗﺻﻣﯾم اﻟﺻﻔﺣﺔ وﺗﻧﺳﯾق ﻋﻧﺎﺻرھﺎ
Page 2 of 6
Student Name اﻻﺳم: ....................................................
Part A — Complete mywellness/[Link] | [Link] أﻛﻣل ( ____ / 1 )
01 # Login page used by @login_required
02 LOGIN_URL = "________________"
03
04 # Page shown after successful login
05 LOGIN_REDIRECT_URL = "________________"
Part B — Complete mywellness/[Link] | أﻛﻣل رواﺑط اﻟﻣﺷروع ( ____ / 0.5 )
01 from [Link] import admin
02 from [Link] import path, include
03
04 urlpatterns = [
05 path("admin/", [Link]),
06 path("", ________________________________),
07 ]
Part C — Complete pages/[Link] | أﻛﻣل رواﺑط اﻟﺗطﺑﯾق ( ____ / 1.5 )
01 from [Link] import path
02 from [Link] import views as auth_views
03 from . import views
04
05 urlpatterns = [
06 path("meals/", views.meal_list, name="meal_list"),
07 path("meals/add/", views.________________, name="meal_create"),
08 path("meals/________________/edit/", views.meal_update, name="meal_update"),
09 path("meals/<int:id>/delete/", views.meal_delete, name="meal_delete"),
10 path("login/", auth_views.________________.as_view(), name="login"),
11 path("logout/", auth_views.LogoutView.as_view(), name="logout"),
12 ]
Part D — Complete pages/[Link] | أﻛﻣل ﻧﻣوذج اﻟﺑﯾﺎﻧﺎت ( ____ / 2 )
01 from [Link] import models
02 from [Link] import User
03
04 class Meal([Link]):
05 user = models.________________(User, on_delete=[Link])
06 name = [Link](max_length=100)
07 calories = models.________________()
08 meal_type = [Link](max_length=50)
09 notes = [Link](________________) #Could be empty ﯾﻤﻜﻦ أن ﯾﻜﻮن اﻟﺤﻘﻞ ﻓﺎرﻏﺎ
10
11 def __str__(self):
12 return self.________________
Part E — Complete pages/[Link] | أﻛﻣل اﺳﺗﻣﺎرة اﻟﺑﯾﺎﻧﺎت ( ____ / 1.5 )
01 from django import forms
02 from .models import Meal
03
04 class MealForm(forms.________________):
05 class Meta:
06 model = __________________
07 fields = ["name", "calories", "meal_type", "________________"]
Page 3 of 6
Part F — Complete pages/[Link] (1 of 2) | أﻛﻣل دوال اﻟﻌرض ( ____ / 2.5 )
01 from [Link] import render, redirect, get_object_or_404
02 from [Link] import login_required
03 from .models import Meal
04 from .forms import MealForm
05
06 @login_required
07 def meal_list(request):
08 meals = [Link](________________________)
09 return render(request, "meals/meal_list.html", {"meals": meals})
10
11 ________________________
12 def meal_create(request):
13 if [Link] == "POST":
14 form = MealForm(________________________)
15 if form.is_valid():
16 meal = [Link](________________________)
17 [Link] = ________________________
18 [Link]()
19 return redirect("meal_list")
20 else:
21 form = MealForm()
22 return render(request, "meals/meal_form.html", {"form": form})
Part F — Complete pages/[Link] (2 of 2) | أﻛﻣل دوال اﻟﻌرض ( ____ / 2 )
01 @login_required
02 def meal_update(request, id):
03 meal = get_object_or_404(Meal, id=id, user=[Link])
04 if [Link] == "POST":
05 form = MealForm([Link], ________________________=meal)
06 if form.is_valid():
07 [Link]()
08 return redirect("meal_list")
09 else:
10 form = MealForm(instance=meal)
11 return render(request, "meals/meal_form.html", {"form": form})
12
13 @login_required
14 def meal_delete(request, id):
15 meal = get_object_or_404(Meal, id=id, user=[Link])
16 if [Link] == "________________":
17 meal.________________()
18 return redirect("meal_list")
19 return render(request, "meals/meal_confirm_delete.html", {"meal": ________________})
Part G — Complete templates/meals/meal_confirm_delete.html | أﻛﻣل ﻗﺎﻟب ﺗﺄﻛﯾد اﻟﺣذف ( ____ / 0.5 )
01 <h2>Delete Meal</h2>
02 <p>Are you sure you want to delete {{ [Link] }}?</p>
03 <form method="________________">
04 {% __________________ %}
05 <button type="submit">Delete</button>
06 </form>
Page 4 of 6
Student Name اﻻﺳم: ....................................................
Part H — Complete templates/meals/meal_list.html | أﻛﻣل ﻗﺎﻟب ﻗﺎﺋﻣﺔ اﻟوﺟﺑﺎت ( ____ / 2.5 )
01 {% load static %}
02 <link rel="stylesheet" href="{% static 'css/[Link]' %}">
03
04 <________________ class="site-header">
05 <h1>My Wellness</h1>
06 <nav class="nav">
07 <a href="{% url 'meal_list' %}">Meals</a>
08 <a href="{% url 'meal_create' %}">Add Meal</a>
09 <a href="{% url 'logout' %}">________________</a>
10 </nav>
11 </header>
12
13 <main class="content">
14 <section class="meals-section">
15 <h2>My Meals<________________>
16 <p>Only your saved meals are shown below.</p>
17 <a ________________="add-btn" href="{% url '________________' %}">+ Add Meal</a>
18
19 <div class="meal-grid">
20 {% if meals %}
21 {% for meal in __________________ %}
22 <div class="________________">
23 <h3>{{ meal.________________ }}</h3>
24 <p>{{ [Link] }} kcal | {{ meal.meal_type }}</p>
25 <a class="edit-btn" href="{% url 'meal_update' meal.________________ %}">Edit</a>
26 </div>
27 {% __________________ %}
28 {% else %}
29 <p>No meals found.</p>
30 {% endif %}
31 </div>
32 </section>
33 </main>
Part I — Complete templates/meals/meal_form.html | أﻛﻣل ﻗﺎﻟب اﺳﺗﻣﺎرة اﻟوﺟﺑﺔ ( ____ / 0.5 )
01 <main class="content">
02 <section class="meal-form-card">
03 <h2>Add or Edit Meal</h2>
04 <form method="post">
05 {% csrf_token %}
06 {{ form.________________ }}
07 <button type="submit">Save Meal</button>
08 </form>
09 </section>
10 </main>
Part K — Terminal Command | أﻣر اﻟطرﻓﯾﺔ ( ____ / 0.5 )
01 # After changing [Link], write the commands in the correct order:
02
03 1) Python3 [Link] makemigrations
04 2) ________________________________________________________________________________
Page 5 of 6
Page Design Instructions | ﺗﻌﻠﯾﻣﺎت ﺗﻧﺳﯾق اﻟﺻﻔﺣﺔ
1. Use a light gray page background: #eef3f8. . #eef3f8 :اﺳﺗﺧدم ﺧﻠﻔﯾﺔ رﻣﺎدﯾﺔ ﻓﺎﺗﺣﺔ ﻟﻠﺻﻔﺣﺔ .1
2. Use a blue site header: #0f4cbf, with white text and 24px padding. . 24px ﻣﻊ ﻧص أﺑﯾض وﺣﺷوة داﺧﻠﯾﺔ#0f4cbf :اﺳﺗﺧدم ﺧﻠﻔﯾﺔ زرﻗﺎء ﻟرأس اﻟﻣوﻗﻊ .2
3. Use Flex to place the title and navigation in one row. . ﻟوﺿﻊ اﻟﻌﻧوان ورواﺑط اﻟﺗﻧﻘل ﻓﻲ ﺻف واﺣدFlex اﺳﺗﺧدم .3
4. Use space-between to separate the title and navigation. . ﻟوﺿﻊ ﻣﺳﺎﻓﺔ ﺑﯾن اﻟﻌﻧوان واﻟرواﺑطspace-between اﺳﺗﺧدم .4
5. Make vertical alignmen centered. . ا ﺟ ﻌ ل ا ﻟﻣ ﺣ ﺎ ذ ا ة ﻋ ﻣ و د ﯾ ﺔ ﻓ ﻲ ا ﻟ ﻣ ﻧ ﺗ ﺻ ف .5
6. Make navigation links white and bold. . اﺟ ﻌ ل ر و اﺑط اﻟﺗﻧﻘ ل ﺑ ﺎﻟﻠو ن اﻷ ﺑﯾ ض و ﺑﺧ ط ﻋ ر ﯾ ض .6
7. Add 14px left spacing between navigation links. .ﺑﯾن اﻟرواﺑط14px أﺿف ﻣﺳﺎﻓﺔ ﯾﺳرى ﻣﻘدارھﺎ .7
8. Center the content area. . ﺳ ط ﻣ ﻧط ﻘ ﺔ اﻟ ﻣ ﺣ ﺗ و ى ّ و .8
9. Set the maximum content width to 900px. .900px اﺟﻌل أﻗﺻﻰ ﻋرض ﻟﻣﻧطﻘﺔ اﻟﻣﺣﺗوى .9
10. Use 30px auto margin and 22px padding for the content area. .22px وﺣﺷوة داﺧﻠﯾﺔ30px auto اﺳﺗﺧدم ھﺎﻣﺷﺎ .10
11. Display meal cards in three equal columns using Grid. .Grid اﻋرض ﺑطﺎﻗﺎت اﻟوﺟﺑﺎت ﻓﻲ ﺛﻼﺛﺔ أﻋﻣدة ﻣﺗﺳﺎوﯾﺔ ﺑﺎﺳﺗﺧدام .11
12. Use a 16px gap between meal cards. . ﺑﯾن اﻟﺑطﺎﻗﺎت16px اﺳﺗﺧدم ﻣﺳﺎﻓﺔ ﺑﯾﻧﯾﺔ ﻣﻘدارھﺎ .12
13. Give cards and the form card a white background. . اﺟ ﻌ ل ﺧ ﻠﻔ ﯾﺔ اﻟﺑط ﺎﻗ ﺎ ت و ﺑط ﺎﻗﺔ اﻟﻧﻣ و ذ ج ﺑﯾ ﺿ ﺎء .13
14. Add a 1px border with color #d8dee8 to cards and the form card. . ﻟﻠﺑطﺎﻗﺎت وﺑطﺎﻗﺔ اﻟﻧﻣوذج1px أﺿف ﺣدًا ﻓﺎﺗًﺣﺎ ﺑﺳﻣﺎﻛﺔ .14
15. Use 12px rounded corners and 14px padding. .14px وﺣﺷوة داﺧﻠﯾﺔ12px اﺳﺗﺧدم ﺗدوﯾًرا ﺑﻣﻘدار .15
16. Give Add, Edit, and Save buttons a green background: #16803c. . #16803c : ﺧﺿراءSave وEdit وAdd اﺟﻌل ﺧﻠﻔﯾﺔ أزرار .16
17. Use white text and no border for the buttons. .ا ﺟ ﻌ ل ﻧ ص ا ﻷ ز ر ا ر أ ﺑ ﯾ ض و ﻣ ن د و ن إ ط ﺎ ر .17
18. Use 8px rounded corners and14px padding for the buttons. .14px وﺣﺷوة داﺧﻠﯾﺔ8px اﺳﺗﺧدم ﻟﻸزرار ﺗدوﯾًرا ﺑﻣﻘدار .18
Part J — Complete static/css/[Link] | أﻛﻣل ﺗﻧﺳﯾق اﻟﺻﻔﺣﺔ ( ____ / 4 )
01 body {
02 margin: 0;
03 font-family: Arial, sans-serif;
04 background-color: __________________;
05 color: #123;
06 }
07 .site-header {
08 background-color: __________________;
09 __________________: white;
10 padding: 24px;
11 display: __________________;
12 justify-content: __________________;
13 align-items: __________________;
14 }
15
16 .nav a {
17 color: __________________;
18 __________________: bold;
19 margin-left: 14px;
20 text-decoration: none;
21 }
22
23 .content {
24 max-width: __________________;
25 margin: 30px auto;
26 padding: __________________;
27 }
28
29 .meal-grid {
30 display: __________________;
31 grid-template-columns: __________________;
32 gap: 16px;
33 }
34 .meal-card, .meal-form-card {
35 background-color: __________________;
36 border: 1px solid #d8dee8;
37 padding: 14px;
38 }
39 .add-btn, .edit-btn, button {
40 __________________: block;
41 background-color: __________________;
42 color: white;
43 border: none;
44 __________________: 8px;
45 padding: 8px 14px;
46 text-decoration: none;
47 }
Page 6 of 6