diff --git a/About.html b/About.html
index e0313ae778e75302d175d06079e51cc7f4161749..07805f89f26c1d9eeae433d8bf7afd0f818c1176 100644
--- a/About.html
+++ b/About.html
@@ -10,11 +10,11 @@
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='Home.html'" href="#home">Home</a>
<a onclick="document.location='Activites.html'" href="#activties">Activites</a>
<a onclick="document.location='Booking.html'" href="#booking">Booking</a>
@@ -25,7 +25,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -43,6 +43,7 @@
people with additional needs at Ability Sports Bristol.
</p>
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
</section>
diff --git a/AboutArab.html b/AboutArab.html
index 3fac8ac595ce2173b4f81707464870f98e66082c..03de4849173ee07004b5d481f4e06f85e4e1df06 100644
--- a/AboutArab.html
+++ b/AboutArab.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='HomeArab.html'" href="#home">الصفحة الرئيسية</a>
<a onclick="document.location='ActivitesArab.html'" href="#activties">أنشطة</a>
<a onclick="document.location='BookingArab.html'" href="#booking">الحجز</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -41,6 +41,8 @@
<p class = "info">
كل يوم سبت من الساعة 12:00 إلى 14:30 نوفر أنشطة رياضية للشباب ذوي الاحتياجات الإضافية في Ability Sports Bristol.
</p>
+
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="abtpic" src="AbilitySportsPictures/about.jpg" alt="informationPagePicture"/>
</section>
diff --git a/Activites.html b/Activites.html
index f6e7163e4c3ecff56e3f4249eab5d786705287f5..b5899225ab3dcaf15d60c1381ebc82e0c66c2e5b 100644
--- a/Activites.html
+++ b/Activites.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<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>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -43,6 +43,7 @@
</p>
</section>
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="football" src="AbilitySportsPictures/football.jpg" alt="football"/>
<section class="para2">
@@ -53,6 +54,7 @@
</p>
</section>
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="multi-sports" src="AbilitySportsPictures/multi-sports.jpg" alt="multisports"/>
</body>
diff --git a/ActivitesArab.html b/ActivitesArab.html
index 9d3d0491bac5b263b8d15907877bc184b6803e6f..8bb46fa2b680e2cb5f22da621bdb258868c072dd 100644
--- a/ActivitesArab.html
+++ b/ActivitesArab.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='HomeArab.html'" href="#home">الصفحة الرئيسية</a>
<a class="active" onclick="document.location='ActivitesArab.html'" href="#activties">أنشطة</a>
<a onclick="document.location='BookingArab.html'" href="#booking">الحجز</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -42,6 +42,7 @@
</p>
</section>
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="football" src="AbilitySportsPictures/football.jpg" alt="football"/>
<section>
@@ -51,6 +52,7 @@
</p>
</section>
+ <!--The image is searched from the folder and inputted onto the page-->
<img class="multi-sports" src="AbilitySportsPictures/multi-sports.jpg" alt="multisports"/>
</body>
</html>
\ No newline at end of file
diff --git a/Booking.html b/Booking.html
index 0fa17e594ae139294944f96d71443e4f36354ad1..e2f006f50c45943531070fe7b6c88233415666cc 100644
--- a/Booking.html
+++ b/Booking.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='Home.html'" href="#home">Home</a>
<a onclick="document.location='Activites.html'" href="#activties">Activites</a>
<a class="active" onclick="document.location='Booking.html'" href="#booking">Booking</a>
@@ -24,7 +24,7 @@
</a>
</div>
-<script>
+<script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -35,15 +35,16 @@
}
</script>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--The form is set up and the action specified-->
<fieldset>
<legend>Booking Form</legend>
<h2 class="subhead">Personal Details</h2>
-
+
<div class="formgrid">
+ <!--The label specifies what needs to be inputted into the input box. The input tag also species that it is required-->
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" required><br>
@@ -125,9 +126,10 @@
<label for="post">Postcode:</label><br>
<input type="text" id="post" name="post" required><br><br>
+ <!--The hyperlink for the privacy document that the user can read and decide whether they agree or not-->
<p>By submitting this form you <a href="PrivacyDocument.pdf" target="_blank"> agree with Privacy Terms</a></p>
-
+ <!--Once the form is complete and valid the user can submit the form-->
<input class="submit" type="submit" value="Submit">
</div>
diff --git a/BookingArab.html b/BookingArab.html
index 6ab0fdc105e9dfe3ca2aa29fa1a68d4c0295af49..d2226c0fb7d1aa2f0a9b7528b3fea34c221bd2c7 100644
--- a/BookingArab.html
+++ b/BookingArab.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='HomeArab.html'" href="#home">الصفحة الرئيسية</a>
<a onclick="document.location='ActivitesArab.html'" href="#activties">أنشطة</a>
<a class="active" onclick="document.location='BookingArab.html'" href="#booking">الحجز</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -35,15 +35,16 @@
}
</script>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--The form is set up and the action specified-->
<fieldset>
<legend>استمارة الحجز</legend>
<h2 class="subhead">تفاصيل شخصية</h2>
-
+
<div class="formgrid">
+ <!--The label specifies what needs to be inputted into the input box. The input tag also species that it is required-->
<label for="fname">الاسم الاول:</label><br>
<input type="text" id="fname" name="fname" required><br>
@@ -72,7 +73,8 @@
<h2 class="subhead">بيانات الدفع</h2>
- <div class="formgrid">
+ <div class="formgrid">
+ <!--The select is also a required field for the user were they have to make a selection-->
<label for="c/r">البلد / المنطقة:</label><br>
<select id="c/r" required>
<option value="">حدد الخيار</option>
@@ -123,9 +125,11 @@
<label for="post">الرمز البريدي:</label><br>
<input type="text" id="post" name="post" required><br><br>
-
+
+ <!--The hyperlink for the privacy document that the user can read and decide whether they agree or not-->
<p>عن طريق تقديم هذا النموذج لك<a href="PrivacyDocument.pdf" target="_blank"> توافق على شروط الخصوصية</a></p>
+ <!--Once the form is complete and valid the user can submit the form-->
<input class="submit" type="submit" value="إرسال">
</div>
diff --git a/Contact.html b/Contact.html
index 58ee7992080e47795566120c15415a37f4e40085..aa2c72039a02b3b72ac41bc6b95017f53b709271 100644
--- a/Contact.html
+++ b/Contact.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='Home.html'" href="#home">Home</a>
<a onclick="document.location='Activites.html'" href="#activties">Activites</a>
<a onclick="document.location='Booking.html'" href="#booking">Booking</a>
@@ -24,7 +24,7 @@
</a>
</div>
-<script>
+<script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -40,14 +40,14 @@
<h3 class="tele">Telephone Number</h3>
<p class="c1">+44 (0) 734 034 4762</p>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--The form is set up and the action specified-->
<fieldset class="form">
<h2 class="contact1">Contact Form</h2>
<div class="formgrid">
-
+ <!--The label specifies what needs to be inputted into the input box. The input tag also species that it is required-->
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
@@ -63,8 +63,10 @@
<label for="details">Details:</label><br>
<input class="details" type="text" id="details" name="details" required><br><br>
+ <!--The hyperlink for the privacy document that the user can read and decide whether they agree or not-->
<p>By submitting this form you <a href="PrivacyDocument.pdf" target="_blank"> agree with Privacy Terms</a></p>
-
+
+ <!--Once the form is complete and valid the user can submit the form-->
<input class="submit" type="submit" value="Submit">
</div>
diff --git a/ContactArab.html b/ContactArab.html
index 7020674b83f78917adb8be61d79d84e51297f9e1..93da7f3ef2502bae24243612f6839f0467be50fc 100644
--- a/ContactArab.html
+++ b/ContactArab.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class= "logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo"/>
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a onclick="document.location='HomeArab.html'" href="#home">الصفحة الرئيسية</a>
<a onclick="document.location='ActivitesArab.html'" href="#activties">أنشطة</a>
<a onclick="document.location='BookingArab.html'" href="#booking">الحجز</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -40,14 +40,14 @@
<h3 class="tele">رقم هاتف</h3>
<p class="c1">+44 (0) 734 034 4762</p>
- <form action="/action_page.php">
+ <form action="/action_page.php"> <!--The form is set up and the action specified-->
<fieldset class="form">
<h2 class="contact1">نموذج الاتصال</h2>
<div class="formgrid">
-
+ <!--The label specifies what needs to be inputted into the input box. The input tag also species that it is required-->
<label for="name">اسم:</label><br>
<input type="text" id="name" name="name" required><br>
@@ -63,10 +63,10 @@
<label for="details">تفاصيل:</label><br>
<input class="details" type="text" id="details" name="details" required><br><br>
-
+ <!--The hyperlink for the privacy document that the user can read and decide whether they agree or not-->
<p>عن طريق تقديم هذا النموذج لك<a href="PrivacyDocument.pdf" target="_blank"> توافق على شروط الخصوصية</a></p>
-
+ <!--Once the form is complete and valid the user can submit the form-->
<input class="submit" type="submit" value="Submit">
</div>
diff --git a/Home.html b/Home.html
index 1513442206e1c0af8c7ad438aca7c1c5fcf4a08e..4ee9a400d106a5e11a486ca88778f20b146e47d7 100644
--- a/Home.html
+++ b/Home.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a class="active" onclick="document.location='Home.html'" href="#home">Home</a>
<a onclick="document.location='Activites.html'" href="#activties">Activites</a>
<a onclick="document.location='Booking.html'" href="#booking">Booking</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -37,19 +37,20 @@
<section class="homepage">
- <div class="headimg">
+ <div class="headimg"> <!--The banner image is located from the source and inserted onto the page-->
<img class= "headimg" src="AbilitySportsPictures/header.jpg" alt="headerImg">
</div>
+ <!--This button links to the Arabic translation with help of Javascript it displays 2 languages-->
<button onmouseover="mOver(this)" onmouseout="mOut(this)" class="arab" onclick="document.location='HomeArab.html'"> الترجمة العربية </button><br><br>
- <script>
+ <script> //This script code allows the translation button to display 2 languages of 'Arabic Translation'
function mOver(obj) {
- obj.innerHTML = "Arab Translation"
+ obj.innerHTML = "Arab Translation" //When the mouse hovers the button this line of code executes
}
function mOut(obj) {
- obj.innerHTML = "الترجمة العربية"
+ obj.innerHTML = "الترجمة العربية" //When the mouse is not hovering the button this code executes
}
</script>
@@ -62,9 +63,10 @@
We do have a core group of kids in both sessions.
</p><br><br>
+ <!--The button links to the 'Activites' page and takes you that page when clicked-->
<button class="bttn" onclick="document.location='Activites.html'">Find out more</button><br><br>
- <div class="homeimgs">
+ <div class="homeimgs"> <!--Images located from folder and inserted onto the page-->
<img class= "homeimg" src="AbilitySportsPictures/home.jpg" alt="homeImg">
<img class= "homeimg" src="AbilitySportsPictures/home2.jpg" alt="homeImg">
<img class= "homeimg" src="AbilitySportsPictures/home3.jpg" alt="homeImg">
@@ -76,9 +78,10 @@
</p><br><br>
</div>
+ <!--This button links to the 'About' page and takes you to that page when clicked-->
<button class="bttn" onclick="document.location='About.html'">Find out more</button><br><br>
- <div class="homeimgs">
+ <div class="homeimgs"> <!--The image is located from the folder and inserted onto the page-->
<img class= "rep" src="AbilitySportsPictures/BAME.jpg" alt="homeImg">
</div>
@@ -88,17 +91,18 @@
</p><br><br>
</div>
+ <!--This button links to the 'Booking' page and onclick takes you to that page-->
<button class="bttn" onclick="document.location='Booking.html'">JOIN NOW</button><br><br>
<p>
Join us in giving back to the community and follow us on our social media pages.
</p><br><br>
- <form>
+ <form> <!--Using the facebook icon a link is created to take the user to the facebook page-->
<a href="#" class="fa fa-facebook" onclick="window.location.href='https://www.facebook.com/abilitysportsbristol1/'"></a>
</form><br><br>
- <form>
+ <form> <!--Using the instagram icon a link is created to take the user to the instagram facebook page-->
<a href="#" class="fa fa-instagram" onclick="window.location.href='https://www.instagram.com/abilitysportsteam/?hl=en'"></a>
</form><br><br>
diff --git a/HomeArab.html b/HomeArab.html
index 9e4bc00008a0db93b9e9ce03c14d64893d284f76..3e88f0ba66a31eff264982bb9066bfc314254ad0 100644
--- a/HomeArab.html
+++ b/HomeArab.html
@@ -9,11 +9,11 @@
</head>
<body>
- <header>
+ <header> <!--The code locating the logo and adding it to the page-->
<img class="logo" src="AbilitySportsPictures/abilityblue.png" alt="companyLogo">
</header>
- <div class="topnav" id="mytopnav">
+ <div class="topnav" id="mytopnav"> <!--The links and names for individual tabs for the naviagtion bar-->
<a class="active" onclick="document.location='HomeArab.html'" href="#home">الصفحة الرئيسية</a>
<a onclick="document.location='ActivitesArab.html'" href="#activties">أنشطة</a>
<a onclick="document.location='BookingArab.html'" href="#booking">الحجز</a>
@@ -24,7 +24,7 @@
</a>
</div>
- <script>
+ <script> //This funtion allows the navigation bar to become responsive
function myFunction() {
var x = document.getElementById("mytopnav");
if (x.className === "topnav") {
@@ -37,18 +37,19 @@
<section class="homepage">
- <div class="headimg">
+ <div class="headimg"> <!--The banner image is located from the source and inserted onto the page-->
<img class= "headimg" src="AbilitySportsPictures/header.jpg" alt="headerImg">
</div>
+ <!--This button links to the Arabic translation with help of Javascript it displays 2 languages-->
<button onmouseover="mOver(this)" onmouseout="mOut(this)" class="arab" onclick="document.location='Home.html'">English Translation</button><br><br>
- <script>
+ <script> //This script code allows the translation button to display 2 languages of 'English Translation'
function mOver(obj) {
- obj.innerHTML = "الترجمة إلى الإنجليزية"
+ obj.innerHTML = "الترجمة إلى الإنجليزية" //When the mouse hovers the button this line of code executes
}
function mOut(obj) {
- obj.innerHTML = "English Translation"
+ obj.innerHTML = "English Translation" //When the mouse is not hovering the button this code executes
}
</script>
@@ -61,9 +62,10 @@
لدينا مجموعة أساسية من الأطفال في كلتا الجلستين.
</p><br><br>
+ <!--The button links to the 'Activites' page and takes you that page when clicked-->
<button class="bttn" onclick="document.location='ActivitesArab.html'">اكتشف المزيد</button><br><br>
- <div class="homeimgs">
+ <div class="homeimgs"> <!--Images located from folder and inserted onto the page-->
<img class= "homeimg" src="AbilitySportsPictures/home.jpg" alt="homeImg">
<img class= "homeimg" src="AbilitySportsPictures/home2.jpg" alt="homeImg">
<img class= "homeimg" src="AbilitySportsPictures/home3.jpg" alt="homeImg">
@@ -75,9 +77,10 @@
</p><br><br>
</div>
+ <!--This button links to the 'About' page and takes you to that page when clicked-->
<button class="bttn" onclick="document.location='About.html'">اكتشف المزيد</button><br><br>
- <div class="homeimgs">
+ <div class="homeimgs"> <!--The image is located from the folder and inserted onto the page-->
<img class= "rep" src="AbilitySportsPictures/BAME.jpg" alt="homeImg">
</div>
@@ -87,17 +90,18 @@
</p><br><br>
</div>
+ <!--This button links to the 'Booking' page and onclick takes you to that page-->
<button class="bttn" onclick="document.location='Booking.html'">JOIN NOW</button><br><br>
<p>
انضم إلينا في رد الجميل للمجتمع ومتابعتنا على صفحات وسائل التواصل الاجتماعي الخاصة بنا.
</p><br><br>
- <form>
+ <form> <!--Using the facebook icon a link is created to take the user to the facebook page-->
<a href="#" class="fa fa-facebook" onclick="window.location.href='https://www.facebook.com/abilitysportsbristol1/'"></a>
</form><br><br>
- <form>
+ <form> <!--Using the instagram icon a link is created to take the user to the instagram facebook page-->
<a href="#" class="fa fa-instagram" onclick="window.location.href='https://www.instagram.com/abilitysportsteam/?hl=en'"></a>
</form><br><br>
diff --git a/Styles/Main.css b/Styles/Main.css
index 3a7a5576a70842db80285712e9896389d8dddd91..029dbd359e09aba3ce2da25da7565841a75e4d6b 100644
--- a/Styles/Main.css
+++ b/Styles/Main.css
@@ -39,7 +39,7 @@ header { /*The code respresents where the logo is positioned in the grid*/
width: 250px;
height: 120px;
}
-@media screen and (max-width:600px)
+@media screen and (max-width:600px) /*On a smaller screen the navigation bar will only display the first tab*/
{
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
@@ -49,13 +49,13 @@ header { /*The code respresents where the logo is positioned in the grid*/
}
@media screen and (max-width:600px)
{
- .topnav.responsive {position: relative;}
- .topnav.responsive .icon {
+ .topnav.responsive {position: relative;} /*This code postions how the responsive navigation bar will position*/
+ .topnav.responsive .icon { /*This code postions the icon on the navigation bar*/
position: absolute;
right: 0;
top: 0;
}
- .topnav.responsive a {
+ .topnav.responsive a { /*This code allows the bar to expand and display the other tabs*/
float: none;
display: block;
text-align: left;
@@ -112,21 +112,21 @@ header { /*The code respresents where the logo is positioned in the grid*/
height: 30%;
grid-column: 1/6;
}
-.homeimgs{
+.homeimgs{ /*This block of code sets the background colour for the 3 images*/
background-color: #3090C7;
padding-bottom: 70px;
padding-top: 70px;
grid-column: 1/6;
}
-.rep{
+.rep{ /*This defines the size of the BAME reps*/
width: 100%;
height: 20%;
}
-.info {
+.info { /*This code sets the width between the text and the images*/
padding-top: 100px;
padding-bottom: 100px;
}
-.arab {
+.arab { /*This block of code designs the button that switches between the languages*/
border: 3px solid black;
background-color: green;
color: white;
@@ -139,35 +139,35 @@ header { /*The code respresents where the logo is positioned in the grid*/
/*Activites*/
-.para1{
+.para1{ /*The position and font specifics is made for paragraph 1*/
grid-column: 1/3;
grid-row: 3;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
-.para2{
+.para2{ /*The position and font specifics is made for paragraph 2*/
grid-column: 3/5;
grid-row: 4;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
-.football {
+.football { /*The size and poisiton of the first image is made here*/
grid-column: 3/6;
grid-row: 3;
width: 100%;
height: auto;
max-width: 100%;
}
-.multi-sports {
+.multi-sports { /*The size and postion of the second image is made here*/
grid-column: 1/3;
grid-row: 4;
width: 100%;
height: 100%;
}
-/*Booking & Contact*/
+/*Booking & Contact form style*/
-input, option {
+input { /*This block of code styles the input box*/
width: 100%;
padding: 12px 100px;
margin: 8px 0;
@@ -177,23 +177,22 @@ input, option {
box-sizing: content-box;
font-size: 20px;
}
-select {
+select { /*This block of code styles the selection options*/
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: lightblue;
+ font-size: 20px;
}
-
-label {
+label { /*The]is code styles the labelling for the form*/
float: left;
width: 100%;
text-align: left;
padding: 5px 1px 1px 1px;
font-size: 20px;
}
-
-fieldset {
+fieldset { /*This code styles the basics for the form overall*/
width: 100%;
padding: 20px;
margin: 2px auto;
@@ -201,15 +200,13 @@ fieldset {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
-
-legend {
+legend { /*This code styles the title of the form*/
font-size: 30px;
width: 100%;
border-bottom: 5px dotted darkblue;
color: darkblue;
}
-
-.submit {
+.submit { /*This styles the code for the submit button*/
width: 100%;
background-color: darkblue;
color: white;
@@ -219,37 +216,31 @@ legend {
border-radius: 4px;
cursor: pointer;
}
-.submit:hover {
+.submit:hover { /*Once the cursor hovers over the submit button the colour changes*/
background-color: lightblue;
}
-label {
- box-sizing: border-box;
- user-select: none;
- cursor: pointer;
-}
-
/*About*/
-.heading{
+.heading{ /*This code styles the title of the page*/
color: darkblue;
}
-.info{
+.info{ /*This code styles the text of the page*/
font-size: 20px;
padding-top: 5px;
}
-.abtpic {
+.abtpic { /*This code sizes the image on the page*/
width: 100%;
height: 75%;
}
-.infopage {
+.infopage { /*This code settings the postion and font specifics of the whole page*/
grid-column: 1/6;
grid-row: 3;
font-family: Arial, Helvetica, sans-serif;
}
/*Contact*/
-.contact {
+.contact { /*This code styles the title of the page*/
grid-column: 1/6;
grid-row: 3;
color: darkblue;
@@ -257,32 +248,29 @@ label {
font-size: 25px;
padding-left: 18px;
}
-.contact1 {
+.contact1 { /*This code postions the form on the page*/
grid-column: 1/6;
grid-row: 3;
- color: darkblue;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 25px;
}
-.tele {
+.tele { /*This code styles the subheading*/
grid-column: 1/6;
grid-row: 4;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding-left: 18px;
}
-.c1 {
+.c1 { /*This code styles the phone number*/
grid-column: 1/6;
grid-row: 5;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding-left: 18px;
}
-.form {
+.form { /*This code postions the form on the page*/
grid-column: 1/6;
grid-row: 8;
}
-.details {
+.details { /*This code resizes the input box on the form*/
width: 100%;
height: 200px;
}