index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>CRAZY COASTER THEME PARK</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap 4 import -->

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <!-- Font awesome import -->

    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
      integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
      crossorigin="anonymous"
    />

    <script src="https://kit.fontawesome.com/96deacfc14.js"></script>
    <!-- Our style sheet -->
    <link rel="stylesheet" href="index_styling.css" />
  </head>
  <body>
    <header class="showcase">
      <div class="showcase-top">
        <!-- <img src="imgs/map.jpg" alt="" /> -->

        <a href="imgs/map.jpg" class="btn btn-rounded">MAP</a>
      </div>

      <div class="showcase-content">
        <!-- <h1>See what's next</h1> -->

        <h1>
          <i class="fas fa-pumpkin"></i>
          Crazy Coaster Theme Park
          <i class="fas fa-pumpkin"></i>
        </h1>
        <p>Don't mind the clown with the red baloon</p>
        <a href="attractions.html" class="btn btn-xl">TAKE A TOUR</a>
         </a>
      </div>
    </header>

    

    <!-- Tabs  -->

    <section class="tabs">
      <div class="container">
        <div id="tab-1" class="tab-item tab-border">
          
          <i class="far fa-ticket-alt fa-3x"></i>
          <p class="hide-sm">Tickets</p>
        </div>
        <div id="tab-2" class="tab-item">
            <i class="fal fa-alicorn fa-3x"></i> 
          
          <p class="hide-sm">ATTRACTIONS</p>
        </div>
        <div id="tab-3" class="tab-item">
          
          <i class="far fa-concierge-bell fa-3x"></i>
          <p class="hide-sm">SERVICES</p>
        </div>
      </div>
    </section>

   
  </body>
</html>


