teams

gallery.html

@@ -21,7 +21,7 @@
     </div>
       <div>
       <p class="galleryintro">
-          Welcome to the Overwatch League gallery. Here we have a range of images for you to browse through.
+          Welcome to the Overwatch League gallery. Here we have images from Overwatch League for you to browse through.
       </p>
       </div>
       <div class="containergal">

main.css

@@ -59,6 +59,7 @@ img.owlimg{
     width: 600px;
     height: 300px;
     float: left;
+    border: 5px solid rgb(0, 0, 0);
 }
 p.imgtext{
     padding: 50px;
@@ -80,4 +81,14 @@ p.galleryintro{
   color: #000;
   font-size: 15px;
   padding-top: 20px;
+}
+/*teams page*/
+img.teams{
+  text-align: center;
+  padding:50px;
+  width:60%;
+  height:60%;
+  margin-left: auto;
+  margin-right:auto;
+  display:block;
 }
\ No newline at end of file

teams.html

@@ -19,5 +19,33 @@
             <li><a href="teams.html">Teams</a></li>       
           </ul>
         </div>
+        <div>
+            <p class="galleryintro">Overwatch League teams <br> Click on a team to find out more
+            </p>
+            <img  src="pics/owl(1).jpg" class="teams" alt="OWL" usemap="#workmap">
+            <map name="workmap">
+                <area shape="rect" coords="100,82,270,200" alt="Washington Justice" href="https://justice.overwatchleague.com/en-us">
+                <area shape="rect" coords="270,82,445,200" alt="San Francisco Shock" href="https://shock.overwatchleague.com/en-us">
+                <area shape="rect" coords="445,82,615,200" alt="Los Angeles Valiant" href="https://valiant.overwatchleague.com/en-us">
+                <area shape="rect" coords="615,82,790,200" alt="Los Angeles Gladiators" href="https://gladiators.overwatchleague.com/en-us">
+                <area shape="rect" coords="790,82,960,200" alt="Toronto Defiant" href="https://defiant.overwatchleague.com/en-us">
+                <area shape="rect" coords="100,200,270,320" alt="Paris Eternal" href="https://eternal.overwatchleague.com/en-us">
+                <area shape="rect" coords="270,200,445,320" alt="Hangzhou Spark" href="https://spark.overwatchleague.com/en-us">
+                <area shape="rect" coords="445,200,615,320" alt="Vancouver Titans" href="https://titans.overwatchleague.com/en-us">
+                <area shape="rect" coords="615,200,790,320" alt="Florida Mayhem" href="https://mayhem.overwatchleague.com/en-us">
+                <area shape="rect" coords="790,200,960,320" alt="Guangzhou Charge" href="https://charge.overwatchleague.com/en-us">
+                <area shape="rect" coords="100,320,270,440" alt="Seoul Dynasty" href="https://dynasty.overwatchleague.com/en-us">
+                <area shape="rect" coords="270,320,445,440" alt="London Spitfire" href="https://spitfire.overwatchleague.com/en-us">
+                <area shape="rect" coords="445,320,615,440" alt="Atlanta Reign" href="https://reign.overwatchleague.com/en-us">
+                <area shape="rect" coords="615,320,790,440" alt="Boston Uprising" href="https://uprising.overwatchleague.com/en-us">
+                <area shape="rect" coords="790,320,960,440" alt="Chengou Hunters" href="https://hunters.overwatchleague.com/en-us">
+                <area shape="rect" coords="100,440,270,560" alt="Dallas Fuel" href="https://fuel.overwatchleague.com/en-us">
+                <area shape="rect" coords="270,440,445,560" alt="Shanghai Dragons" href="https://dragons.overwatchleague.com/en-us">
+                <area shape="rect" coords="445,440,615,560" alt="New York Excelsior" href="https://excelsior.overwatchleague.com/en-us">
+                <area shape="rect" coords="615,440,790,560" alt="Houston Outlaws" href="https://outlaws.overwatchleague.com/en-us">
+                <area shape="rect" coords="790,440,960,560" alt="Philidelphia Fusion" href="https://fusion.overwatchleague.com/en-us">
+
+              </map>
+        </div>
 </body>
 </html>
\ No newline at end of file