diff --git a/About.html b/About.html
index 9c8251d1e83e38b00566ea6a0703969eaa23bafb..571b0ab3a7e1f4997fcfae9871080ea51bf13c1a 100644
--- a/About.html
+++ b/About.html
@@ -4,7 +4,8 @@
<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="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>
diff --git a/AboutArab.html b/AboutArab.html
index f6baccf67fc7488b84bdff27d4a78457e9210748..7279aab4278135f280c1ba46ef1ac6063b752054 100644
--- a/AboutArab.html
+++ b/AboutArab.html
@@ -4,7 +4,7 @@
<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="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>
diff --git a/Activites.html b/Activites.html
index 63f8f6fa8f9a3f130e56f5a4f3a4fd071bd4ede4..d4ae7821aad08a83e8826262dec5cb65f9a32d7d 100644
--- a/Activites.html
+++ b/Activites.html
@@ -4,11 +4,10 @@
<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="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>
diff --git a/ActivitesArab.html b/ActivitesArab.html
index 297ae059648f4f9a44a18c0eeed25c7c4128a942..c82d522d7b271919eb7b41c61dab49260978937f 100644
--- a/ActivitesArab.html
+++ b/ActivitesArab.html
@@ -4,7 +4,7 @@
<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="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>
diff --git a/Booking.html b/Booking.html
index 4970c78ad763690de3d1a2d01163a25fafb48640..b84ebc25a6f13e085670c8d7f4a23d82ddbfe82f 100644
--- a/Booking.html
+++ b/Booking.html
@@ -4,7 +4,8 @@
<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="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>
diff --git a/BookingArab.html b/BookingArab.html
index 45955e3cd8f76f6581e783565a91ae57bf5f7249..218ce68d61804812963448c2618116205cb2b9ad 100644
--- a/BookingArab.html
+++ b/BookingArab.html
@@ -4,7 +4,7 @@
<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="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>
diff --git a/Contact.html b/Contact.html
index caf98993b02265b495ee40dcc997ca341b9fc4ce..fbaddba5cf7f23d4e76fb8f852a01ddfb50394d2 100644
--- a/Contact.html
+++ b/Contact.html
@@ -4,7 +4,8 @@
<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="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>
diff --git a/ContactArab.html b/ContactArab.html
index 440652ac61c9b253e0472984809e3d8a3ba3702c..d768eec08a7f1d8bb81c906826c201cbd17e7c74 100644
--- a/ContactArab.html
+++ b/ContactArab.html
@@ -4,7 +4,7 @@
<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="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>
diff --git a/Home.html b/Home.html
index c536216f0302dc054b340d245e1b8a3d1c46d18c..eaed6f419d273b29249586f1dbbced9723255cbc 100644
--- a/Home.html
+++ b/Home.html
@@ -4,7 +4,7 @@
<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="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>
@@ -20,8 +20,21 @@
<button class="btn booking" onclick="document.location='Booking.html'"><a href="#booking">Booking</a></button>
<button class="btn about" onclick="document.location='About.html'"><a href="#about">About</a></button>
<button class="btn contact" onclick="document.location='Contact.html'"><a href="#contact">Contact</a></button>
+ <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+ <i class="fa fa-bars"></i>
+ </a>
</div>
+ <script>
+ function myFunction() {
+ var x = document.getElementById("myTopnav");
+ if (x.className === "topnav") {
+ x.className += " responsive";
+ } else {
+ x.className = "topnav";
+ }
+ }
+ </script>
<section>
diff --git a/HomeArab.html b/HomeArab.html
index e28fb8b17c776d971d6e7c9ff42c7d60eba06e62..d7348dca3a480ec0b96a798d0fcf54c2a28a99c2 100644
--- a/HomeArab.html
+++ b/HomeArab.html
@@ -4,7 +4,7 @@
<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="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>
diff --git a/Styles/Main.css b/Styles/Main.css
index ece76afb899f9a6890837815a31d0327bd89927d..9641ebdb7485cb2123e291d6237d12b66a08885e 100644
--- a/Styles/Main.css
+++ b/Styles/Main.css
@@ -1,14 +1,14 @@
/*Global*/
-body {
+body { /*This set of code outlines the grid format for the entire website*/
display:grid;
grid-template-columns: 1fr 2fr 2fr 1fr;
grid-template-rows: auto auto 1fr 1fr;
}
-header {
+header { /*The code respresents where the logo is positioned in the grid*/
grid-column: 1/6;
grid-row: 1;
}
-.topnav {
+.topnav { /*This set of code sets up the design of the top bar navigation*/
overflow: hidden;
background-color: #3090C7;
top: 0;
@@ -30,6 +30,9 @@ header {
background: rgb(155, 196, 250);
color: black;
}
+.topnav .icon {
+ display: none;
+}
.btn {
border: none;
background-color: #3090C7;
@@ -43,7 +46,32 @@ header {
width: 250px;
height: 120px;
}
+@media screen and (max-width:999px)
+{
+}
+@media screen and (max-width:600px)
+{
+ .topnav a:not(:first-child) {display: none;}
+ .topnav a.icon {
+ float: right;
+ display: block;
+ }
+}
+@media screen and (max-width:600px)
+{
+ .topnav.responsive {position: relative;}
+ .topnav.responsive .icon {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+ .topnav.responsive a {
+ float: none;
+ display: block;
+ text-align: left;
+ }
+}
/*Home Page*/
Section{
@@ -52,7 +80,7 @@ Section{
text-align: center;
font-size: 20px;
margin-top: auto;
- margin-bottom: auto;
+ margin-bottom: 0;
font-family: Arial, Helvetica, sans-serif;
}
.bttn {
@@ -116,7 +144,6 @@ Section{
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
- display: inline-block;
border-radius: 12px;
float: left;
}
@@ -217,16 +244,15 @@ 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;
- margin-top: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
+ padding-top: 5px;
}
.abtpic {
width: 100%;