<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Premium Bootstrap 5 Landing Page Template" name="description" />
    <meta content="bootstrap 5, premium, marketing, multipurpose" name="keywords" />
    <meta content="Coderthemes" name="author" />
    <!-- Site Title -->
    <title>UNA Campus Guide</title>
    <!--Material Icon -->
    <link crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.3.67/css/materialdesignicons.min.css"
        integrity="sha512-nRzny9w0V2Y1/APe+iEhKAwGAc+K8QYCw4vJek3zXhdn92HtKt226zHs9id8eUq+uYJKaH2gPyuLcaG/dE5c7A=="
        referrerpolicy="no-referrer" rel="stylesheet" />
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&amp;family=Tajawal:wght@200;300;400;500;700;800;900&amp;display=swap"
        rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://arabyai-webpages.s3.me-south-1.amazonaws.com/template_website/araby_ai_template/css/animate.css"
        rel="stylesheet" />
    <link href="https://arabyai-webpages.s3.me-south-1.amazonaws.com/template_website/testing_template/css/bootstrap.min.css"
        rel="stylesheet" />
    <link class="style" href="css/style.css" rel="stylesheet" />
    <style>

        button {
            font-family: "Poppins";
        }

        .contact_details {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Change to center */
            justify-content: space-between;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            .contact_details {
                flex-direction: row;
            }
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .button {
            padding: 10px 20px;
            margin: 10px;
            background-color: #00c0d9;
            color: #423f32;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .button i {
            margin-right: 10px;
        }

        .hidden {
            display: none;
        }

        body { font-family: Arial, sans-serif; line-height: 1.6; }
        .container { width: 80%; margin: auto; overflow: hidden; }
        header { background: #333; color: #fff; padding: 20px; text-align: center; }
        section { margin: 20px 0; }
        .activity, .restaurant { background: #f4f4f4; padding: 10px; margin-bottom: 10px; }

    </style>

</head>
<body data-bs-offset="60" data-bs-spy="scroll" data-bs-target=".navbar">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky-dark" id="navbar-sticky">
        <div class="container">
            <a class="logo text-uppercase" href="/">
                <img alt="" src="https://www.una.edu/brand/images/logo/round/UNA-roundLionPurpleW.png" width="50px"/>
            </a>
            <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
                <i class="mdi mdi-menu"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ms-auto navbar-center" id="mySidenav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/aalluhaybi1/Sturdy-Train-Team7">Repo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
<header>
  <h1>Welcome to UNA Campus Guide</h1>
  <p>Find Restaurants and Activities Near UNA</p>
</header>

<div class="container">
  <section id="restaurants">
    <h2>Restaurants</h2>
    <div class="restaurant">
      <h3>Singin' River Brewing Company</h3>
      <p>Offers a variety of beers and wine slushies with a cool vibe. They also have burgers and a praised view.</p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12831.316431500674!2d-87.68315441029996!3d34.80284081919064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x887d485a27e86241%3A0xfb4e67a7fe2c7915!2sSingin&#39;%20River%20Brewing!5e0!3m2!1sen!2sus!4v1713265380825!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div class="restaurant">
      <h3>Ricatoni's Italian Grill</h3>
      <p>Brick-lined red-sauce Italian kitchen in storied storefront featuring eggplant parmigiana & lasagna. Also has a pizza.</p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13104.871227368578!2d-87.69376650947648!3d34.8004617641812!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x887d485e68519345%3A0x18acecd12070777b!2sRicatoni&#39;s%20Italian%20Grill!5e0!3m2!1sen!2sus!4v1713265515884!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div class="restaurant">
      <h3>Big Bad Breakfast-Florence</h3>
      <p>A breakfast spot that has been voted the best breakfast restaurant in the Shoals for four consecutive years by the local community.</p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6552.282982342583!2d-87.68032282547605!3d34.802381977752255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x887d485df8100001%3A0xabf18ae3b24cdb9e!2sBig%20Bad%20Breakfast-Florence!5e0!3m2!1sen!2sus!4v1713266171357!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
    <div class="restaurant">
      <h3>Cook Out</h3>
      <p>Branch of a fast-food chain known for its drive-thru BBQ, burgers & more than 40 milkshake flavors.</p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3276.4030981972132!2d-87.67634822547647!3d34.795799178106236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x887d492a5ac3cd0f%3A0x4accef076bc99cf5!2sCook%20Out!5e0!3m2!1sen!2sus!4v1713266254390!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
  </section>

  <section id="activities">
    <h2>Activities</h2>
    <div class="activity">
      <h3>Pickwick Lake</h3>
      <p>Pickwick Lake: For outdoor enthusiasts, this lake offers fishing, boating, and more, also 0.3 miles away</p>
    </div>
    <div class="activity">
      <h3>The Escape Room Florence</h3>
      <p>Escape rooms are a live-action experience where players are locked in a room full of puzzles and clues and have to use their wits to uncover the mysteries of the room and escape before the 60-minute clock expires. For more information, <a href="https://theescaperoom.com/florence/">click here.</a></p>
    </div>
    <div class="activity">
       <h3>Outdoor Adventure Center.</h3>
       <p>There are many activities you can do at the UNA website. <a href="https://www.una.edu/recsports/outdoor-adventure-center1/index.html">Check it out</a>.</p>
    </div>
  </section>
</div>
<div class="container">
  <section id="banks">
    <h2>Banks</h2>
    <ul>
      <li>CB&S Bank</li>
      <li>PNC Bank</li>
      <li>Wells Fargo Bank</li>
    </ul>

</body>
</html>
