<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>


  <!-- CSS Stylesheets -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Bootstrap Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <title>Shortly Url Shortener</title>

</head>

<body>
  <section id="title">
    <div class="container-fluid">
      <nav class="navbar navbar-expand-md navbar-light ">
        <a class="navbar-brand" href="">shortly</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Resources</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
          <li class="nav-item">
            <a class="nav-link" href="">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-item btn" href="">Sign Up</a>
          </li>

        </ul>
      </nav>


      <div class="row">
        <div class="col-lg-6">
          <h1>More than just shorter links</h1>
          <p>
            Build your brand’s recognition and get detailed insights on how your links are performing.
          </p>
          <button type="button" class="btn">Get Started</button>
        </div>
        <div class="col-lg-6">
          <img class="title-image" src="images\illustration-working.svg" alt="working-person">
        </div>
      </div>
    </div>
  </section>

  <section id="middle">

    <div class="container">
      <img src="images\bg-shorten-desktop.svg" class="bg-shorten input-bg">

      <form  action='/shortUrls' class="shorten-input" method = 'POST'>
        <div class="row">
          <div class="col input-box input-group-lg">
            <label for="fullUrl" class='sr-only'>URL</label>
            <input type="url" class="form-control" placeholder="Shorten a link here..." name='fullUrl' id='fullUrl'>
          </div>
          <div class="">
            <button type="submit" class="btn shorten-btn">Shorten</button>
          </div>
        </div>
      </form>

    </div>

  </section>

  <section class="temp container">
    <table class='table table-striped col'>
      <thead>
        <th>Full URL</th>
        <th>Short Url</th>
        <th>Clicks</th>
      </thead>
      <tbody>
        <tr>
          <td><a href='<%= shortURL.longUrl %>'><%= shortURL.longUrl %></a>
          </td>
          <td><a href='<%= shortURL.shortUrl %>'><%= shortURL.shortUrl %></a></td>
          <td><%= shortURL.clicks %> </td>
        </tr>
      </tbody>
    </table>
  </section>
  <!-- Advanced Statistics -->
  <section id="statistics">
    <h2 style="text-align:center">Advanced Statistics</h2>

    <p class="stat-subtext">Track how your links are performing across the web with our advanced statistics dashboard.</p>

    <div class="row">
      <div class="col-lg-4">
        <img class="stat-img" src="images/icon-brand-recognition.svg">
        <div class="card">
          <h5><b>Brand Recognition</b></h5>
          <p class="caption">Boost your brand recognition with each click. Generic links don’t mean a thing. Branded links help instill confidence in your content.</p>
        </div>
      </div>

      <div class="col-lg-4">
        <img class="stat-img stat-img-2" src="images/icon-detailed-records.svg">
        <div class="card card-2">
          <h5><b>Detailed Records</b></h5>
          <p class="caption">Gain insights into who is clicking your links. Knowing when and where people engage with your content helps inform better decisions.</p>
        </div>
      </div>

      <div class="col-lg-4">
        <img class="stat-img stat-img-3" src="images\icon-fully-customizable.svg">
        <div class="card card-3">
          <h5><b>Fully Customizable</b></h5>
          <p class="caption">Improve brand awareness and content discoverability through customizable links, supercharging audience engagement.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Boosting Section -->
  <section id="boost" >
    <img class="boost-img" src="images\bg-boost-desktop.svg" alt="">
    <div class="boost-title">
      <h2  style="text-align:center">Boost your links today</h2>
      <div class="pos"><button class="boost-gsb">Get Started</button></div>
    </div>

  </section>

  <!-- Footer -->
  <section id="footer" style="
    padding-top: 0px;
">
    <div class="row" style="
    margin-top: 0px;
    padding-top: 50px;
    margin-bottom: 0px;
    padding-bottom: 35px;
">
      <h4 class="footer-shortly">Shortly</h4>
      <div class="col">
        <ul>
          <li class="footer-title">Features</li>
          <li>
            <a class="footer-link">Link Shortening</a>
          </li>
          <li>
            <a class="footer-link">Branded Links</a>
          </li>
          <li>
            <a class="footer-link">Analytics</a>
          </li>
        </ul>
      </div>

      <div class="col">
        <ul>
          <li class="footer-title">Resources</li>
          <li>
            <a class="footer-link">Blog</a>
          </li>
          <li>
            <a class="footer-link">Developers</a>
            </li>
            <li>
              <a class="footer-link">Support</a>
            </li>
          </ul>
        </div>

        <div class="col">
          <ul>
            <li class="footer-title">Company</li>
            <li>
              <a class="footer-link">About</a>
            </li>
            <li>
              <a class="footer-link">Our Team</a>
            </li>
            <li>
              <a class="footer-link">Careers</a>
            </li>
            <li>
              <a class="footer-link">Contact</a>
            </li>
          </ul>
        </div>

        <div class="footer-shortly">
          <span><a class="social-button" href=""><i class="fab fa-facebook"></i></a></span>
          <span><a class="social-button" href=""><i class="fab fa-twitter"></i></a></span>
          <span><a class="social-button" href=""><i class="fab fa-instagram"></i></a></span>
        </div>
      </div>

    <!-- <div class="attribution">
      <p><i>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded with love by <a href="https://github.com/ps4449">Priyanka Srinivas</a>.</i></p>
    </div>
  </section>

  <script type="text/javascript" src="index.js"></script>

  Advanced Statistics

  Track how your links are performing across the web with our
  advanced statistics dashboard.

  Brand Recognition

  Boost your brand recognition with each click. Generic links don’t
  mean a thing. Branded links help instil confidence in your content.

  Detailed Records

  Gain insights into who is clicking your links. Knowing when and where
  people engage with your content helps inform better decisions.

  Fully Customizable

  Improve brand awareness and content discoverability through customizable
  links, supercharging audience engagement.

  Boost your links today

  Get Started

  Features

  Link Shortening
  Branded Links
  Analytics

  Resources

  Blog
  Developers
  Support

  Company

  About
  Our Team
  Careers
  Contact
 -->

  <div class="attribution">
    Coded by <a href="https://github.com/abhishek-h1">Abhishek Hindocha</a>.
  </div>

  <script type="text/javascript" src="index.js"></script>
</body>

</html>
