diff --git a/Ability Sports Pictures/BAME.jpg b/Ability Sports Pictures/BAME.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..335efa9323b2d5a53c612fac79b225e923dc0f79
Binary files /dev/null and b/Ability Sports Pictures/BAME.jpg differ
diff --git a/Ability Sports Pictures/ability blue.tif b/Ability Sports Pictures/ability blue.tif
new file mode 100644
index 0000000000000000000000000000000000000000..c14df0138fbf6bd8d1a5f440d25a995bf224ccca
Binary files /dev/null and b/Ability Sports Pictures/ability blue.tif differ
diff --git a/Ability Sports Pictures/about.jpg b/Ability Sports Pictures/about.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..503adb3638db524c3a58092d867c25d38777b619
Binary files /dev/null and b/Ability Sports Pictures/about.jpg differ
diff --git a/Ability Sports Pictures/football.jpg b/Ability Sports Pictures/football.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..21d4254c290b8818fab6f45214f701da1ab006f3
Binary files /dev/null and b/Ability Sports Pictures/football.jpg differ
diff --git a/Ability Sports Pictures/header.jpg b/Ability Sports Pictures/header.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4322a15a1926465d119a13d43093bfb2e56a9749
Binary files /dev/null and b/Ability Sports Pictures/header.jpg differ
diff --git a/Ability Sports Pictures/home.jpg b/Ability Sports Pictures/home.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a1e37e488036888264e3a1bce93b823cfcc0dec8
Binary files /dev/null and b/Ability Sports Pictures/home.jpg differ
diff --git a/Ability Sports Pictures/home2.jpg b/Ability Sports Pictures/home2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6cdb5c2923458b8954ed59428e06848c13e4acc9
Binary files /dev/null and b/Ability Sports Pictures/home2.jpg differ
diff --git a/Ability Sports Pictures/home3.jpg b/Ability Sports Pictures/home3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2f4ef4e18fcd316d13167c2eceef3fe208a69446
Binary files /dev/null and b/Ability Sports Pictures/home3.jpg differ
diff --git a/Ability Sports Pictures/multi-sports.jpg b/Ability Sports Pictures/multi-sports.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3851164b3708354e9c7987960d008aba5da8a019
Binary files /dev/null and b/Ability Sports Pictures/multi-sports.jpg differ
diff --git a/About.html b/About.html
index e2c856290cbfbc940a20b934ac7bc252b54a6e86..9c8251d1e83e38b00566ea6a0703969eaa23bafb 100644
--- a/About.html
+++ b/About.html
@@ -9,8 +9,9 @@
</head>
<body>
+
<header>
- <h1>Ability Sports</h1>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
</header>
<div class="topnav">
@@ -26,5 +27,8 @@
Every Saturaday 12:00-14:30 we provide sporting activites for young
people with additional needs at Ability Sports Bristol.
</p1>
+
+ <img class="abtpic" src="Ability Sports Pictures/about.jpg" alt="information page picture"/>
+
</body>
</html>
\ No newline at end of file
diff --git a/AboutArab.html b/AboutArab.html
new file mode 100644
index 0000000000000000000000000000000000000000..f6baccf67fc7488b84bdff27d4a78457e9210748
--- /dev/null
+++ b/AboutArab.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="Styles/Main.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Ability Sports</title>
+</head>
+
+<body>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
+
+ <div class="topnav">
+ <button class="btn home" onclick="document.location='HomeArab.html'"><a class="active" href="#home">الصفحة الرئيسية</a></button>
+ <button class="btn activites" onclick="document.location='ActivitesArab.html'"><a href="#activties">أنشطة</a></button>
+ <button class="btn booking" onclick="document.location='BookingArab.html'"><a href="#booking">الحجز</a></button>
+ <button class="btn about" onclick="document.location='AboutArab.html'"><a href="#about">حول</a></button>
+ <button class="btn contact" onclick="document.location='ContactArab.html'"><a href="#contact">اتصل</a></button>
+ </div>
+
+ <h2 class="heading">حول القدرة الرياضية بريستول</h2>
+ <p1 class = "info">
+ كل يوم سبت من الساعة 12:00 إلى 14:30 نوفر أنشطة رياضية للشباب ذوي الاحتياجات الإضافية في Ability Sports Bristol.
+ </p1>
+
+ <img class="abtpic" src="Ability Sports Pictures/about.jpg" alt="information page picture"/>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Activites.html b/Activites.html
index 66317fa5e85eee36d83e511cfc66e99ccb830570..63f8f6fa8f9a3f130e56f5a4f3a4fd071bd4ede4 100644
--- a/Activites.html
+++ b/Activites.html
@@ -6,10 +6,14 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Styles/Main.css">
<title>Ability Sports</title>
+
+
+
</head>
<body>
+
<header>
- <h1>Ability Sports</h1>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
</header>
<div class="topnav">
@@ -20,16 +24,23 @@
<button class="btn contact" onclick="document.location='Contact.html'"><a href="#contact">Contact</a></button>
</div>
+
+
<p1 class="para1">
- <h2>Authistic Football Group</h2>
+ <h2 class="subhead">Authistic Football Group</h2>
The duration for each football session varies.
Each session costs 5 pounds.
</p1>
+
+ <img class="football" src="Ability Sports Pictures/football.jpg" alt="football"/>
<p2 class="para2">
- <h2>Downs Multi-Sports Group</h2>
+ <h2 class="subhead">Downs Multi-Sports Group</h2>
The duration for each downs multi-sports group session varies.
Each session costs 5 pounds.
</p2>
+ <img class="multi-sports" src="Ability Sports Pictures/multi-sports.jpg" alt="multisports"/>
+
</body>
+
</html>
\ No newline at end of file
diff --git a/ActivitesArab.html b/ActivitesArab.html
new file mode 100644
index 0000000000000000000000000000000000000000..297ae059648f4f9a44a18c0eeed25c7c4128a942
--- /dev/null
+++ b/ActivitesArab.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="Styles/Main.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Ability Sports</title>
+</head>
+
+<body>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
+
+ <div class="topnav">
+ <button class="btn home" onclick="document.location='HomeArab.html'"><a class="active" href="#home">الصفحة الرئيسية</a></button>
+ <button class="btn activites" onclick="document.location='ActivitesArab.html'"><a href="#activties">أنشطة</a></button>
+ <button class="btn booking" onclick="document.location='BookingArab.html'"><a href="#booking">الحجز</a></button>
+ <button class="btn about" onclick="document.location='AboutArab.html'"><a href="#about">حول</a></button>
+ <button class="btn contact" onclick="document.location='ContactArab.html'"><a href="#contact">اتصل</a></button>
+ </div>
+
+ <p1 class="para1">
+ <h2>مجموعة التوحد لكرة القدم</h2>
+ تختلف مدة كل جلسة كرة قدم. كل جلسة تكلف 5 جنيهات.
+ </p1>
+
+ <img class="football" src="Ability Sports Pictures/football.jpg" alt="football"/>
+
+ <p2 class="para2">
+ <h2>مجموعة داونز للرياضات المتعددة</h2>
+ تختلف مدة كل جلسة جماعية متعددة الرياضات. كل جلسة تكلف 5 جنيهات.
+ </p2>
+ <img class="multi-sports" src="Ability Sports Pictures/multi-sports.jpg" alt="multisports"/>
+</body>
+</html>
\ No newline at end of file
diff --git a/Booking.html b/Booking.html
index 1f4381c5734c65db1da27fc654852bf11f79b40a..4970c78ad763690de3d1a2d01163a25fafb48640 100644
--- a/Booking.html
+++ b/Booking.html
@@ -9,9 +9,9 @@
</head>
<body>
- <header>
- <h1>Ability Sports</h1>
- </header>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
<div class="topnav">
<button class="btn home" onclick="document.location='Home.html'"><a href="#home">Home</a></button>
@@ -29,61 +29,75 @@
<div class="formgrid">
<label for="fname">First Name:</label><br>
- <input type="text" id="fname" name="fname"><br>
+ <input type="text" id="fname" name="fname" required><br>
+
<label for="lname">Surname:</label><br>
- <input type="text" id="lname" name="lname"><br><br>
+ <input type="text" id="lname" name="lname" required><br><br>
+
<label for="DOB">Date of Birth (DD/MM/YYYY)</label><br>
- <input type="text" id="DOB" name="DOB"><br>
+ <input type="text" id="DOB" name="DOB" required><br>
+
<label for="disability">Disability:</label><br>
- <input type="disability" id="disability" name="disability"><br><br>
+ <input type="disability" id="disability" name="disability" required><br><br>
<legend>Gaurdian Details</legend>
<label for="fname1">First Name:</label><br>
- <input type="text" id="fname1" name="fname1"><br><br>
- <label for="lname1">Surame:</label><br>
- <input type="text" id="lname1" name="lname1"><br><br>
+ <input type="text" id="fname1" name="fname1" required><br><br>
+
+ <label for="lname1">Surname:</label><br>
+ <input type="text" id="lname1" name="lname1" required><br><br>
+
<label for="contact">Contact Number:</label><br>
- <input type="text" id="contact" name="contact"><br><br>
+ <input type="number" id="contact" name="contact" required maxlength="11"><br><br>
<legend>Payment Details</legend>
<label for="c/r">Country/Region:</label><br>
- <select>
+ <select id="c/r" required>
<option value=“opt1”>Russia</option>
<option value=“opt2” selected>United States</option>
<option value=“opt3” selected>Cayman Islands</option>
<option value=“opt4” selected>Canada</option>
<option value=“opt5” selected>United Kingdom</option>
- <option value="opt6" selected>Select Option</option>
+ <option value="" selected>Select Option</option>
</select><br><br>
+
<label for="cname1">Cardholder First Name:</label><br>
- <input type="cname1" id="cname1" name="cname1"><br><br>
- <label for="cname2">Cardholder Surame:</label><br>
- <input type="cname2" id="cname2" name="cname2"><br><br>
+ <input type="text" id="cname1" name="cname1" required><br><br>
+
+ <label for="cname2">Cardholder Surname:</label><br>
+ <input type="text" id="cname2" name="cname2" required><br><br>
+
<label for="card">Card Type:</label><br>
- <select>
+ <select id="card" required>
<option value=“opt1”>Visa Debit/Visa/Visa Electron</option>
<option value=“opt2” selected>Mastercard</option>
<option value=“opt3” selected>Discover</option>
<option value=“opt4” selected>Maestro</option>
<option value=“opt5” selected>American Express</option>
- <option value="opt6" selected>Select Option</option>
+ <option value="" selected>Select Option</option>
</select><br><br>
+
<label for="cardnum">Card Number:</label><br>
- <input type="cardnum" id="cardnum" name="cardnum"><br><br>
+ <input type="number" id="cardnum" name="cardnum" required><br><br>
+
<label for="exdate">Expiry Date:</label><br>
- <input type="exdate" id="exdate" name="exdate"><br><br>
+ <input type="text" id="exdate" name="exdate" required><br><br>
+
<label for="code">Security Code:</label><br>
- <input type="code" id="code" name="code"><br><br>
+ <input type="number" id="code" name="code" required><br><br>
<legend>Billing Address</legend>
<label for="address1">Address Line 1:</label><br>
- <input type="address1" id="address1" name="address1"><br><br>
+ <input type="text" id="address1" name="address1" required><br><br>
+
<label for="address2">Address Line 2:</label><br>
- <input type="address2" id="address2" name="address2"><br><br>
+ <input type="text" id="address2" name="address2" required><br><br>
+
<label for="city">Town/City:</label><br>
- <input type="city" id="city" name="city"><br><br>
+ <input type="text" id="city" name="city" required><br><br>
+
<label for="post">Postcode:</label><br>
- <input type="post" id="post" name="post"><br><br>
+ <input type="text" id="post" name="post" required><br><br>
<input class="submit" type="submit" value="Submit">
diff --git a/BookingArab.html b/BookingArab.html
new file mode 100644
index 0000000000000000000000000000000000000000..45955e3cd8f76f6581e783565a91ae57bf5f7249
--- /dev/null
+++ b/BookingArab.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="Styles/Main.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Ability Sports</title>
+</head>
+
+<body>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
+
+ <div class="topnav">
+ <button class="btn home" onclick="document.location='HomeArab.html'"><a class="active" href="#home">الصفحة الرئيسية</a></button>
+ <button class="btn activites" onclick="document.location='ActivitesArab.html'"><a href="#activties">أنشطة</a></button>
+ <button class="btn booking" onclick="document.location='BookingArab.html'"><a href="#booking">الحجز</a></button>
+ <button class="btn about" onclick="document.location='AboutArab.html'"><a href="#about">حول</a></button>
+ <button class="btn contact" onclick="document.location='ContactArab.html'"><a href="#contact">اتصل</a></button>
+ </div>
+
+ <form action="/action_page.php">
+
+ <fieldset>
+
+ <legend>تفاصيل شخصية</legend>
+
+ <div class="formgrid">
+ <label for="fname">الاسم الاول:</label><br>
+ <input type="text" id="fname" name="fname" required><br>
+
+ <label for="lname">لقب:</label><br>
+ <input type="text" id="lname" name="lname" required><br><br>
+
+ <label for="DOB">تاريخ الميلاد (يوم / شهر / سنة)</label><br>
+ <input type="text" id="DOB" name="DOB" required><br>
+
+ <label for="disability">عجز:</label><br>
+ <input type="disability" id="disability" name="disability" required><br><br>
+
+ <legend>تفاصيل الوصي</legend>
+
+ <label for="fname1">الاسم الاول:</label><br>
+ <input type="text" id="fname1" name="fname1" required><br><br>
+
+ <label for="lname1">لقب:</label><br>
+ <input type="text" id="lname1" name="lname1" required><br><br>
+
+ <label for="contact">رقم الاتصال:</label><br>
+ <input type="number" id="contact" name="contact" required><br><br>
+
+ <legend>بيانات الدفع</legend>
+
+ <label for="c/r">البلد / المنطقة:</label><br>
+ <select id="card" required>
+ <option value=“opt1”>روسيا</option>
+ <option value=“opt2” selected>الولايات المتحدة الأمريكية</option>
+ <option value=“opt3” selected>جزر كايمان</option>
+ <option value=“opt4” selected>كندا</option>
+ <option value=“opt5” selected>المملكة المتحدة</option>
+ <option value="" selected>حدد الخيار</option>
+ </select><br><br>
+
+ <label for="cname1">الاسم الاول لحامل البطاقة:</label><br>
+ <input type="text" id="cname1" name="cname1" required><br><br>
+
+ <label for="cname2">لقب حامل البطاقة:</label><br>
+ <input type="text" id="cname2" name="cname2" required><br><br>
+
+ <label for="card">نوع البطاقة:</label><br>
+ <select id="card" required>
+ <option value=“opt1”>فيزا مدين / فيزا / فيزا إلكترون</option>
+ <option value=“opt2” selected>بطاقة ماستر بطاقة ائتمان</option>
+ <option value=“opt3” selected>اكتشف</option>
+ <option value=“opt4” selected>فنان قائد فرقة موسيقية</option>
+ <option value=“opt5” selected>أمريكان اكسبريس</option>
+ <option value="" selected>حدد الخيار</option>
+ </select><br><br>
+
+ <label for="cardnum">رقم البطاقة:</label><br>
+ <input type="number" id="cardnum" name="cardnum" required><br><br>
+
+ <label for="exdate">تاريخ الانتهاء:</label><br>
+ <input type="text" id="exdate" name="exdate" required><br><br>
+
+ <label for="code">رمز الحماية:</label><br>
+ <input type="number" id="code" name="code" required><br><br>
+
+ <legend>عنوان وصول الفواتير</legend>
+
+ <label for="address1">العنوان السطر 1:</label><br>
+ <input type="text" id="address1" name="address1" required><br><br>
+
+ <label for="address2">سطر العنوان 2:</label><br>
+ <input type="text" id="address2" name="address2" required><br><br>
+
+ <label for="city">المدينة / المدينة:</label><br>
+ <input type="text" id="city" name="city" required><br><br>
+
+ <label for="post">الرمز البريدي:</label><br>
+ <input type="text" id="post" name="post" required><br><br>
+
+
+ <input class="submit" type="submit" value="إرسال">
+
+ </div>
+
+ </fieldset>
+
+ </form>
+
+
+
+ </body>
+ </html>
\ No newline at end of file
diff --git a/Contact.html b/Contact.html
index 19ca56f06de99aec58b38bb92246de0d6c3799cd..caf98993b02265b495ee40dcc997ca341b9fc4ce 100644
--- a/Contact.html
+++ b/Contact.html
@@ -9,9 +9,9 @@
</head>
<body>
- <header>
- <h1>Ability Sports</h1>
- </header>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
<div class="topnav">
<button class="btn home" onclick="document.location='Home.html'"><a href="#home">Home</a></button>
@@ -23,12 +23,44 @@
<h2 class="contact">Contact details</h2>
- <h3 class="tele">Telephone Number</h3>
+ <h3 class="tele">Telephone Number</h3>
<p1 class="c1">+44 (0) 734 034 4762</p1>
- <h3 class="email">Email Address</h3>
- <p2 class="c2">abilitysports@hotmail.co.uk</p2>
+ <form action="/action_page.php">
- <h3 class="address">Address</h3>
+ <fieldset class="form">
+
+ <h2 class="contact1">Contact Form</h2>
+
+ <div class="formgrid">
+
+ <label for="name">Name:</label><br>
+ <input type="text" id="name" name="name" required><br>
+
+ <label for="email">Email:</label><br>
+ <input type="email" id="email" name="email" required><br>
+
+ <label for="contact">Contact Number:</label><br>
+ <input type="number" id="contact" name="contact" maxlength="11"><br><br>
+
+ <label for="subject">Subject:</label><br>
+ <input type="text" id="subject" name="subject" required><br><br>
+
+ <label for="details">Details:</label><br>
+ <input class="details" type="text" id="details" name="details" required><br><br>
+
+ <label>
+ <input class="regcheck" type="checkbox" name="privacy" required><a href="Privacy Document.pdf" target="_blank">Agree with Privacy Terms</a>
+ </label>
+
+ <input class="submit" type="submit" value="Submit">
+
+ </div>
+
+ </fieldset>
+
+ </form>
+
</body>
+
</html>
\ No newline at end of file
diff --git a/ContactArab.html b/ContactArab.html
new file mode 100644
index 0000000000000000000000000000000000000000..440652ac61c9b253e0472984809e3d8a3ba3702c
--- /dev/null
+++ b/ContactArab.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="Styles/Main.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Ability Sports</title>
+</head>
+
+<body>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
+
+ <div class="topnav">
+ <button class="btn home" onclick="document.location='HomeArab.html'"><a class="active" href="#home">الصفحة الرئيسية</a></button>
+ <button class="btn activites" onclick="document.location='ActivitesArab.html'"><a href="#activties">أنشطة</a></button>
+ <button class="btn booking" onclick="document.location='BookingArab.html'"><a href="#booking">الحجز</a></button>
+ <button class="btn about" onclick="document.location='AboutArab.html'"><a href="#about">حول</a></button>
+ <button class="btn contact" onclick="document.location='ContactArab.html'"><a href="#contact">اتصل</a></button>
+ </div>
+
+ <h2 class="contact">بيانات المتصل</h2>
+
+ <h3 class="tele">رقم هاتف</h3>
+ <p1 class="c1">+44 (0) 734 034 4762</p1>
+
+ <form action="/action_page.php">
+
+ <fieldset class="form">
+
+ <h2 class="contact1">نموذج الاتصال</h2>
+
+ <div class="formgrid">
+
+ <label for="name">اسم:</label><br>
+ <input type="text" id="name" name="name" required><br>
+
+ <label for="email">البريد الإلكتروني:</label><br>
+ <input type="email" id="email" name="email" required><br>
+
+ <label for="contact">رقم الاتصال:</label><br>
+ <input type="number" id="contact" name="contact" required maxlength="11"><br><br>
+
+ <label for="subject">موضوع:</label><br>
+ <input type="text" id="subject" name="subject" required><br><br>
+
+ <label for="details">تفاصيل:</label><br>
+ <input class="details" type="code" id="details" name="details" required><br><br>
+
+ <label>
+ <input class="regcheck" type="checkbox" name="privacy" required><a href="Privacy Document.pdf" target="_blank">توافق على شروط الخصوصية</a>
+ </label>
+
+ <input class="submit" type="submit" value="Submit">
+
+ </div>
+
+ </fieldset>
+
+ </form>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Home.html b/Home.html
index 99a72148bd55ea75b68532fe782e898a24a08e4a..c536216f0302dc054b340d245e1b8a3d1c46d18c 100644
--- a/Home.html
+++ b/Home.html
@@ -11,8 +11,9 @@
<body>
<header>
- <h1>Ability Sports</h1>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
</header>
+
<div class="topnav">
<button class="btn home" onclick="document.location='Home.html'"><a class="active" href="#home">Home</a></button>
<button class="btn activites" onclick="document.location='Activites.html'"><a href="#activties">Activites</a></button>
@@ -21,32 +22,64 @@
<button class="btn contact" onclick="document.location='Contact.html'"><a href="#contact">Contact</a></button>
</div>
+
<section>
+
+ <div class="headimg">
+ <img class= "headimg" src="Ability Sports Pictures/header.jpg" alt="header img"/>
+ </div>
+
+ <button onmouseover="mOver(this)" onmouseout="mOut(this)" class="arab" onclick="document.location='HomeArab.html'"> الترجمة العربية </button><br><br>
- <p1>
+ <script>
+ function mOver(obj) {
+ obj.innerHTML = "Arab Translation"
+ }
+
+ function mOut(obj) {
+ obj.innerHTML = "الترجمة العربية"
+ }
+ </script>
+
<h3>
Sporting Activties for Young People
</h3>
+
+ <p1>
Ability Sports session are inclusive of all young people with disabilites.
We do have a core group of kids in both sessions.
</p1><br><br>
- <button class="bttn" onclick="document.location='Activites.html'"><a href="#activties">Find out more</a></button><br><br>
+ <button class="bttn" onclick="document.location='Activites.html'">Find out more</button><br><br>
+ <div class="homeimgs">
+ <img class= "homeimg" src="Ability Sports Pictures/home.jpg" alt="home img"/>
+ <img class= "homeimg" src="Ability Sports Pictures/home2.jpg" alt="home img"/>
+ <img class= "homeimg" src="Ability Sports Pictures/home3.jpg" alt="home img"/>
+ </div>
+
+ <div class="info">
<p2>This organisation is led by representives from the BAME community in
St.Pauls, Bristol.
</p2><br><br>
+ </div>
- <button class="bttn" onclick="document.location='About.html'"><a href="#about">Find out more</a></button><br><br>
+ <button class="bttn" onclick="document.location='About.html'">Find out more</button><br><br>
+ <div class="homeimgs">
+ <img class= "rep" src="Ability Sports Pictures/BAME.jpg" alt="home img"/>
+ </div>
+
+ <div class="info">
<p3>
All young people with a range of disabilities are welcome.
</p3><br><br>
+ </div>
- <button class="bttn" onclick="document.location='Booking.html'"><a href="#booking">JOIN NOW</a></button><br><br>
+ <button class="bttn" onclick="document.location='Booking.html'">JOIN NOW</button><br><br>
<p4>
- Join us in giving back to the community and follow us on our social medias.
+ Join us in giving back to the community and follow us on our social media pages.
</p4><br><br>
<form>
diff --git a/HomeArab.html b/HomeArab.html
new file mode 100644
index 0000000000000000000000000000000000000000..e28fb8b17c776d971d6e7c9ff42c7d60eba06e62
--- /dev/null
+++ b/HomeArab.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="Styles/Main.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+ <title>Ability Sports</title>
+</head>
+
+<body>
+ <header>
+ <img class= "logo" src="Ability Sports Pictures/ability blue.tif" alt="company logo"/>
+ </header>
+
+ <div class="topnav">
+ <button class="btn home" onclick="document.location='HomeArab.html'"><a class="active" href="#home">الصفحة الرئيسية</a></button>
+ <button class="btn activites" onclick="document.location='ActivitesArab.html'"><a href="#activties">أنشطة</a></button>
+ <button class="btn booking" onclick="document.location='BookingArab.html'"><a href="#booking">الحجز</a></button>
+ <button class="btn about" onclick="document.location='AboutArab.html'"><a href="#about">حول</a></button>
+ <button class="btn contact" onclick="document.location='ContactArab.html'"><a href="#contact">اتصل</a></button>
+ </div>
+
+
+<section>
+
+ <div class="headimg">
+ <img class= "headimg" src="Ability Sports Pictures/header.jpg" alt="header img"/>
+ </div>
+
+ <button onmouseover="mOver(this)" onmouseout="mOut(this)" class="arab" onclick="document.location='Home.html'">English Translation</button><br><br>
+
+ <script>
+ function mOver(obj) {
+ obj.innerHTML = "الترجمة إلى الإنجليزية"
+ }
+
+ function mOut(obj) {
+ obj.innerHTML = "English Translation"
+ }
+ </script>
+
+ <h3>
+ الأنشطة الرياضية للشباب
+ </h3>
+
+ <p1>
+ تشمل جلسة القدرة الرياضية جميع الشباب ذوي الإعاقة.
+ لدينا مجموعة أساسية من الأطفال في كلتا الجلستين.
+ </p1><br><br>
+
+ <button class="bttn" onclick="document.location='Activites.html'">اكتشف المزيد</button><br><br>
+
+ <div class="homeimgs">
+ <img class= "homeimg" src="Ability Sports Pictures/home.jpg" alt="home img"/>
+ <img class= "homeimg" src="Ability Sports Pictures/home2.jpg" alt="home img"/>
+ <img class= "homeimg" src="Ability Sports Pictures/home3.jpg" alt="home img"/>
+ </div>
+
+ <div class="info">
+ <p2>
+ ويقود هذه المنظمة ممثلون عن مجتمع BAME في St.Pauls ، بريستول.
+ </p2><br><br>
+ </div>
+
+ <button class="bttn" onclick="document.location='About.html'">اكتشف المزيد</button><br><br>
+
+ <div class="homeimgs">
+ <img class= "rep" src="Ability Sports Pictures/BAME.jpg" alt="home img"/>
+ </div>
+
+ <div class="info">
+ <p3>
+ نرحب بجميع الشباب ذوي الإعاقات.
+ </p3><br><br>
+ </div>
+
+ <button class="bttn" onclick="document.location='Booking.html'">نضم الان</button><br><br>
+
+ <p4>
+ انضم إلينا في رد الجميل للمجتمع ومتابعتنا على صفحات وسائل التواصل الاجتماعي الخاصة بنا.
+ </p4><br><br>
+
+ <form>
+ <a href="#" class="fa fa-facebook" onclick="window.location.href='https://www.facebook.com/abilitysportsbristol1/'"></a>
+ </form><br><br>
+
+ <form>
+ <a href="#" class="fa fa-instagram" onclick="window.location.href='https://www.instagram.com/abilitysportsteam/?hl=en'"></a>
+ </form><br><br>
+
+</section>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Privacy Document.pdf b/Privacy Document.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..df1b4c5914b8954c87da314e7c13fabf26757fe9
Binary files /dev/null and b/Privacy Document.pdf differ
diff --git a/Styles/Main.css b/Styles/Main.css
index a4d6a9f66108d834f5c55ec7d231707d8a972e5f..ece76afb899f9a6890837815a31d0327bd89927d 100644
--- a/Styles/Main.css
+++ b/Styles/Main.css
@@ -7,7 +7,6 @@ body {
header {
grid-column: 1/6;
grid-row: 1;
- color: darkblue;
}
.topnav {
overflow: hidden;
@@ -40,14 +39,21 @@ header {
display: inline-block;
width: 19%;
}
+.logo {
+ width: 250px;
+ height: 120px;
+}
/*Home Page*/
Section{
- grid-column: 2/4;
- grid-row: 3/6;
+ grid-column: 1/6;
+ grid-row: 3;
text-align: center;
- color: darkblue
+ font-size: 20px;
+ margin-top: auto;
+ margin-bottom: auto;
+ font-family: Arial, Helvetica, sans-serif;
}
.bttn {
border: 2px solid darkblue;
@@ -80,21 +86,68 @@ Section{
background: #3f729b;
color: white;
}
+.headimg {
+ width: 100%;
+ height: 40%;
+}
+.homeimg{
+ width: 30%;
+ height: 30%;
+ grid-column: 1/6;
+}
+.homeimgs{
+ background-color: #3090C7;
+ padding-bottom: 70px;
+ padding-top: 70px;
+ grid-column: 1/6;
+}
+.rep{
+ width: 100%;
+ height: 350px;
+}
+.info {
+ padding-top: 100px;
+ padding-bottom: 100px;
+}
+.arab {
+ border: 3px solid black;
+ background-color: green;
+ color: white;
+ padding: 14px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ display: inline-block;
+ border-radius: 12px;
+ float: left;
+}
/*Activites*/
.para1{
grid-column: 1/3;
grid-row: 3;
- color: darkblue;
+ font-size: 20px;
+ font-family: Arial, Helvetica, sans-serif;
}
.para2{
grid-column: 3/5;
grid-row: 4;
- color: darkblue;
+ font-family: Arial, Helvetica, sans-serif;
+}
+.football {
+ grid-column: 3/6;
+ grid-row: 3;
+ width: 100%;
+ height: 100%;
+}
+.multi-sports {
+ grid-column: 1/3;
+ grid-row: 4;
+ width: 100%;
+ height: 100%;
}
-/*Booking*/
+/*Booking & Contact*/
input, option {
width: 100%;
@@ -104,7 +157,7 @@ input, option {
border: 1px solid darkblue;
border-radius: 4px;
box-sizing: content-box;
- font-size: 16px;
+ font-size: 20px;
}
select {
@@ -120,7 +173,7 @@ label {
width: 100%;
text-align: left;
padding: 5px 1px 1px 1px;
- font-size: 16px;
+ font-size: 20px;
}
fieldset {
@@ -128,6 +181,7 @@ fieldset {
padding: 20px;
margin: 2px auto;
border: 0 none;
+ font-family: Arial, Helvetica, sans-serif;
}
legend {
@@ -163,43 +217,62 @@ label {
grid-column: 1/5;
grid-row: 3;
color: darkblue;
+ margin-bottom: auto;
+ font-family: Arial, Helvetica, sans-serif;
}
.info{
grid-column: 1/5;
grid-row: 4;
- color: darkblue;
+ margin-top: auto;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+}
+.abtpic {
+ width: 100%;
+ height: 75%;
+ grid-row: 5;
+ grid-column: 1/6;
}
/*Contact*/
.contact {
- grid-column: 1/5;
+ grid-column: 1/6;
grid-row: 3;
color: darkblue;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 25px;
+ padding-left: 18px;
+}
+.contact1 {
+ grid-column: 1/6;
+ grid-row: 3;
+ color: darkblue;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 25px;
}
.tele {
- grid-column: 1/5;
+ grid-column: 1/6;
grid-row: 4;
- color: darkblue;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ padding-left: 18px;
}
.c1 {
- grid-column: 1/5;
+ grid-column: 1/6;
grid-row: 5;
- color: darkblue;
-}
-.email {
- grid-column: 1/5;
- grid-row: 6;
- color: darkblue;
-}
-.c2 {
- grid-column: 1/5;
- grid-row: 7;
- color: darkblue;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 20px;
+ padding-left: 18px;
}
-.address {
- grid-column: 1/5;
+.form {
+ grid-column: 1/6;
grid-row: 8;
- color: darkblue;
}
+.details {
+ width: 100%;
+ height: 200px;
+}
+
+