diff --git a/AbilitySportsPictures/abilityblue.png b/AbilitySportsPictures/abilityblue.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2eeceac30fece36dc75514039314eace7f8c818
Binary files /dev/null and b/AbilitySportsPictures/abilityblue.png differ
diff --git a/AbilitySportsPictures/abilityblue.tif b/AbilitySportsPictures/abilityblue.tif
deleted file mode 100644
index c14df0138fbf6bd8d1a5f440d25a995bf224ccca..0000000000000000000000000000000000000000
Binary files a/AbilitySportsPictures/abilityblue.tif and /dev/null differ
diff --git a/About.html b/About.html
index 53f7ce1ded7dc53a483ef7e5c9a2f95a2be1b822..e0313ae778e75302d175d06079e51cc7f4161749 100644
--- a/About.html
+++ b/About.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -12,7 +11,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
@@ -37,14 +36,15 @@
}
</script>
-
- <h2 class="heading">About Ability Sports Bristol</h2>
- <p class = "info">
- Every Saturaday 12:00-14:30 we provide sporting activites for young
- people with additional needs at Ability Sports Bristol.
- </p>
+ <section class="infopage">
+ <h2 class="heading">About Ability Sports Bristol</h2>
+ <p class = "info">
+ Every Saturaday 12:00-14:30 we provide sporting activites for young
+ people with additional needs at Ability Sports Bristol.
+ </p>
- <img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
+ <img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
+ </section>
</body>
</html>
\ No newline at end of file
diff --git a/AboutArab.html b/AboutArab.html
index a0647a074b95e4c9ba0d80d34a4dbe9cf749165f..3fac8ac595ce2173b4f81707464870f98e66082c 100644
--- a/AboutArab.html
+++ b/AboutArab.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
@@ -37,12 +36,13 @@
</script>
- <h2 class="heading">حول القدرة الرياضية بريستول</h2>
- <p class = "info">
- كل يوم سبت من الساعة 12:00 إلى 14:30 نوفر أنشطة رياضية للشباب ذوي الاحتياجات الإضافية في Ability Sports Bristol.
- </p>
-
- <img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
-
+ <section class="infopage">
+ <h2 class="heading">حول القدرة الرياضية بريستول</h2>
+ <p class = "info">
+ كل يوم سبت من الساعة 12:00 إلى 14:30 نوفر أنشطة رياضية للشباب ذوي الاحتياجات الإضافية في Ability Sports Bristol.
+ </p>
+ <img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
+ </section>
+
</body>
</html>
\ No newline at end of file
diff --git a/Activites.html b/Activites.html
index ccfcb06ddbd8619bf158f35ff90ded80c10f18af..f6e7163e4c3ecff56e3f4249eab5d786705287f5 100644
--- a/Activites.html
+++ b/Activites.html
@@ -3,20 +3,18 @@
<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" media="screen">
<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="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
-
+
<div class="topnav" id="mytopnav">
- <a onclick="document.location='Home.html'" href="#home">Home</a>
+ <a onclick="document.location='Home.html'" href="#home">Home</a>
<a class="active" onclick="document.location='Activites.html'" href="#activties">Activites</a>
<a onclick="document.location='Booking.html'" href="#booking">Booking</a>
<a onclick="document.location='About.html'" href="#about">About</a>
@@ -25,7 +23,7 @@
<i class="fa fa-bars"></i>
</a>
</div>
-
+
<script>
function myFunction() {
var x = document.getElementById("mytopnav");
@@ -35,7 +33,7 @@
x.className = "topnav";
}
}
- </script>
+ </script>
<section class="para1">
<h2>Authistic Football Group</h2>
@@ -44,6 +42,7 @@
Each session costs 5 pounds.
</p>
</section>
+
<img class="football" src="AbilitySportsPictures/football.jpg" alt="football"/>
<section class="para2">
diff --git a/ActivitesArab.html b/ActivitesArab.html
index 645a9d53def1ca04fe2c4bbf224fafa13f5b3052..9d3d0491bac5b263b8d15907877bc184b6803e6f 100644
--- a/ActivitesArab.html
+++ b/ActivitesArab.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
diff --git a/Booking.html b/Booking.html
index e9d5fdca0ef02f1623cc8af296ce9524ec5cd9a6..0fa17e594ae139294944f96d71443e4f36354ad1 100644
--- a/Booking.html
+++ b/Booking.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
@@ -52,7 +51,7 @@
<input type="text" id="lname" name="lname" required><br><br>
<label for="DOB">Date of Birth</label><br>
- <input type="text" id="DOB" name="DOB" placeholder="(DD/MM/YYYY)" required><br>
+ <input type="date" id="DOB" name="DOB" placeholder="(DD/MM/YYYY)" required><br>
<label for="disability">Disability:</label><br>
<input type="text" id="disability" name="disability" required><br><br>
diff --git a/BookingArab.html b/BookingArab.html
index ee3acd5cfc1984763fb218f1a0a8c6d0ff5c8155..6ab0fdc105e9dfe3ca2aa29fa1a68d4c0295af49 100644
--- a/BookingArab.html
+++ b/BookingArab.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
@@ -52,7 +51,7 @@
<input type="text" id="lname" name="lname" required><br><br>
<label for="DOB">تاريخ الولادة</label><br>
- <input type="text" id="DOB" name="DOB" placeholder="(يوم / شهر / سنة)" required><br>
+ <input type="date" id="DOB" name="DOB" placeholder="(يوم / شهر / سنة)" required><br>
<label for="disability">عجز:</label><br>
<input type="text" id="disability" name="disability" required><br><br>
diff --git a/Contact.html b/Contact.html
index 2f43d581066ce0aa6ac2f58abcf0327deae51373..58ee7992080e47795566120c15415a37f4e40085 100644
--- a/Contact.html
+++ b/Contact.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
diff --git a/ContactArab.html b/ContactArab.html
index 9c32ca237808c60de0508ad15628e440825c90c5..7020674b83f78917adb8be61d79d84e51297f9e1 100644
--- a/ContactArab.html
+++ b/ContactArab.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo"/>
+ <img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
<div class="topnav" id="mytopnav">
diff --git a/Home.html b/Home.html
index 06dfb3ee788b5dfd2bb6e8ce0ba5ab5a530d27eb..1513442206e1c0af8c7ad438aca7c1c5fcf4a08e 100644
--- a/Home.html
+++ b/Home.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class="logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo">
+ <img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
<div class="topnav" id="mytopnav">
diff --git a/HomeArab.html b/HomeArab.html
index e64a7a319ae9880d99919ba093230cbf811e88ac..9e4bc00008a0db93b9e9ce03c14d64893d284f76 100644
--- a/HomeArab.html
+++ b/HomeArab.html
@@ -3,7 +3,6 @@
<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" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ability Sports</title>
@@ -11,7 +10,7 @@
<body>
<header>
- <img class= "logo" src="AbilitySportsPictures/abilityblue.tif" alt="companyLogo">
+ <img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
<div class="topnav" id="mytopnav">
@@ -34,36 +33,35 @@
x.className = "topnav";
}
}
- </script>
-
-<section>
+ </script>
+
+<section class="homepage">
<div class="headimg">
<img class= "headimg" src="AbilitySportsPictures/header.jpg" alt="headerImg">
</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>
<p>
- تشمل جلسة القدرة الرياضية جميع الشباب ذوي الإعاقة.
- لدينا مجموعة أساسية من الأطفال في كلتا الجلستين.
+ تشمل جلسة القدرة الرياضية جميع الشباب ذوي الإعاقة.
+ لدينا مجموعة أساسية من الأطفال في كلتا الجلستين.
</p><br><br>
- <button class="bttn" onclick="document.location='Activites.html'">اكتشف المزيد</button><br><br>
+ <button class="bttn" onclick="document.location='ActivitesArab.html'">اكتشف المزيد</button><br><br>
<div class="homeimgs">
<img class= "homeimg" src="AbilitySportsPictures/home.jpg" alt="homeImg">
@@ -89,7 +87,7 @@
</p><br><br>
</div>
- <button class="bttn" onclick="document.location='Booking.html'">نضم الان</button><br><br>
+ <button class="bttn" onclick="document.location='Booking.html'">JOIN NOW</button><br><br>
<p>
انضم إلينا في رد الجميل للمجتمع ومتابعتنا على صفحات وسائل التواصل الاجتماعي الخاصة بنا.
diff --git a/Styles/Main.css b/Styles/Main.css
index bd136293ae25553c3f19202fdb455fb46d230776..3a7a5576a70842db80285712e9896389d8dddd91 100644
--- a/Styles/Main.css
+++ b/Styles/Main.css
@@ -11,8 +11,6 @@ header { /*The code respresents where the logo is positioned in the grid*/
.topnav { /*This set of code sets up the design of the top bar navigation*/
overflow: hidden;
background-color: #3090C7;
- /*top: 0;
- width: 100%;*/
grid-column: 1/6;
grid-row: 2;
}
@@ -30,14 +28,14 @@ header { /*The code respresents where the logo is positioned in the grid*/
background: rgb(155, 196, 250);
color: black;
}
-.topnav .icon {
+.topnav .icon { /*When this website is opened on a smaller screen this is the icon that will appear*/
display: none;
}
-.topnav a.active {
+.topnav a.active { /*The active screen tab background colour will change to black with white text*/
background-color: black;
color: white;
}
-.logo {
+.logo { /*This set of code edits the logo to be a particular size*/
width: 250px;
height: 120px;
}
@@ -65,7 +63,7 @@ header { /*The code respresents where the logo is positioned in the grid*/
}
/*Home Page*/
-.homepage{
+.homepage{ /*This block of code sets the postion and font sytles of this section*/
grid-column: 1/6;
grid-row: 3;
text-align: center;
@@ -74,7 +72,7 @@ header { /*The code respresents where the logo is positioned in the grid*/
margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
}
-.bttn {
+.bttn { /*This is the homepage button designs and font specifics*/
border: 2px solid darkblue;
background-color: #3090C7;
padding: 14px 70px;
@@ -83,10 +81,10 @@ header { /*The code respresents where the logo is positioned in the grid*/
display: inline-block;
border-radius: 12px;
}
-.bttn:hover{
+.bttn:hover{ /*When the curser hovers over the homepage buttons it changes colour*/
background-color: lightblue;
}
-.fa {
+.fa { /*The codes are the set design for the instragram and facebook icons*/
padding: 20px;
font-size: 30px;
width: 50px;
@@ -94,22 +92,22 @@ header { /*The code respresents where the logo is positioned in the grid*/
text-decoration: none;
margin: 5px 2px;
}
-.fa:hover {
+.fa:hover { /*Once the mouse hovers over the icons they will fade slightly*/
opacity: 0.7;
}
-.fa-facebook {
+.fa-facebook { /*This code sets the colour scheme for the facebook icon*/
background: #3B5998;
color: white;
}
-.fa-instagram {
+.fa-instagram { /*This code sets the colour scheme for the instagram icon*/
background: #3f729b;
color: white;
}
-.headimg {
+.headimg { /*This is the sizing for the first image that stretches across the screen*/
width: 100%;
height: 40%;
}
-.homeimg{
+.homeimg{ /*This is the sizing for the 3 images*/
width: 30%;
height: 30%;
grid-column: 1/6;
@@ -157,7 +155,8 @@ header { /*The code respresents where the logo is positioned in the grid*/
grid-column: 3/6;
grid-row: 3;
width: 100%;
- height: 100%;
+ height: auto;
+ max-width: 100%;
}
.multi-sports {
grid-column: 1/3;
@@ -233,26 +232,21 @@ label {
/*About*/
.heading{
- grid-column: 1/5;
- grid-row: 3;
color: darkblue;
- font-family: Arial, Helvetica, sans-serif;
}
-
.info{
- grid-column: 1/5;
- grid-row: 4;
- font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding-top: 5px;
}
.abtpic {
width: 100%;
height: 75%;
- grid-row: 5;
+}
+.infopage {
grid-column: 1/6;
+ grid-row: 3;
+ font-family: Arial, Helvetica, sans-serif;
}
-
/*Contact*/
.contact {