RubanDurai/index.html

## index.html
<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

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

  <title>Frontend Mentor | Shortly URL shortening API Challenge</title>
</head>

<body>
  <!-- Header Starts -->
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"><h1>Shortly</h1></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0 ml-lg-4">
          <li class="nav-item">
            <a class="nav-link" href="#">Features <span class="sr-only">(current)</span></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>

        <ul id="login-signup" class="navbar-nav mr-0 mt-2 mt-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">Login </a>
          </li>
          <li id="header-signup-li" class="nav-item">
            <a id="header-signup" class="nav-link white-color theme-cyan bold-text" href="#">Sign Up </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Header Ends -->
  <!-- Landing Img Text Starts -->
  <div id="landing-img-text" class="row col-12 no-padding-margin flex-column-reverse flex-md-row">
    <div id="landing-text" class="row justify-content-center aling-items-center align-items-md-center col-12 col-md-6">
      <div class="w-100"></div>
      <div id="landing-text-div" class="col-12 col-md-10 offset-md-2 h-100">
        <h2 id="landing-subheading">More than just shorter links</h2>
        <p id="landing-subtext">Build your brand's recognition and get detailed insights on how your links are performing.</p>
        <button id="get-started-btn" class="theme-cyan no-border white-color">Get Started</button>
      </div>
    </div>
    <div id="landing-img" class="col-12 col-md-6 no-padding-margin">
      <img id="landing-pc-img" class="img-fluid" src="https://svgshare.com/i/JMW.svg" alt="landing img">
    </div>
  </div>
  <!-- Landing Img Text Ends -->
  <!-- Search Bar Starts -->
  <div class="row col-12 no-padding-margin">
  <div id="left-utility-div" class="col-1 col-md-1" >
    <div id="left-utility-top-div">
    </div>

</div>
  <div id="search-bar" class="col-10 col-md-10">
    <div id="search-bar-elements" class="row justify-content-center align-items-center">
      <input type="url" id="search-textbox" class="col-12 col-md-8" placeholder="Shorten a link here..." required>
    <button type="submit" id="shorten-it-btn" class="theme-cyan no-border white-color col-12 col-md-3 col-lg-2">Shorten It!</button>
      <div class="w-100"></div>
      <p id="invalid-link-notification">Please enter a valid link</p>
      </div>
  </div>
     <div id="right-utility-div" class="col-1 col-md-1" >
    <div id="right-utility-top-div">
    </div>

</div>
    </div>
  <!-- Search Bar Ends -->
  <!-- Advanced Statistics Starts -->
  <div id="advanced-statistics" class="col-12">
    <div id="present-links" class="col-12">

    </div>
    <h3 id="advanced-stats-heading" class="text-center">Advanced Statistics</h3>
    <p id="advanced-stats-subheading" class="text-center">Track how your links are performing across the web with our advanced statistics dashboard.</p>
      <div id="advanced-stats-cards" class="row col-12 col-md-10 offset-md-1 justify-content-between align-items-center flex-column flex-md-row flex-nowrap">
        <!-- Card 1 starts-->
         <div id="brand-recognition-card" class="col-12 col-md-4">
          <div id="brand-recognition-img-holder">
<img src="https://svgshare.com/i/JNa.svg" class="img-fluid w-100" alt="brand recognition image">
</div>
          <h4 class="bold-text">Brand Recognition</h4>
           <p>Boost your brand recognition with each click.Genric links don't mean a thing. Branded links help instil the confidence in your content.</p>
        </div>
         <!-- Card 1 ends-->
         <!-- Card 2 starts-->
         <div id="detailed-records-card" class="col-12 col-md-4">
            <div id="detailed-records-img-holder">
<img src="https://svgshare.com/i/JLg.svg" class="img-fluid w-100" alt="detailed records image">
</div>
          <h4 class="bold-text">Detailed Records</h4>
           <p>Gain insights into who is clicking your link Knowing when and where people engage with your content helps inform better decisions.</p>
        </div>
         <!-- Card 2 ends-->
        <!-- Card 3 starts-->
         <div id="fully-customizable-card" class="col-12 col-md-4">
               <div id="fully-customizable-img-holder">
<img src="https://svgshare.com/i/JN1.svg" class="img-fluid w-100" alt="fully customizable image">
</div>
          <h4 class="bold-text">Fully Customizable</h4>
           <p>Improve brand awareness and content discoverability through customizable links, supercharging audience engagement.</p>
        </div>
         <!-- Card 3 ends-->
        <!-- connector starts -->
        <div id="connector" class="theme-cyan">
        </div>
        <!-- connector ends -->
      </div>
    </div>
  <!-- Advanced Statistics Ends -->
  <!-- Boost your link starts-->
    <div id="boost-links" class="row col-12 justify-content-center align-items-center no-padding-margin">
      <h3 id="boost-heading" class="white-color bold-text">Boost your links today</h3>
      <div class="w-100"></div>
       <button id="boost-get-started-btn" class="theme-cyan no-border white-color">Get Started</button>
  </div>
  <!-- Boost your link ends-->
  <!--  footer starts -->
  <footer class="row col-12 white-color">
    <div class="col-12 col-md-3">
      <h3 class="bold-text footer-main-heading">Shortly</h3>
    </div>
    <div class="col-12 col-md-7 row no-padding-margin ">
      <div class="col-md-4">
        <h6 class="bold-text footer-link-heading">Features</h6>
        <div class="w-100"></div>
        <p class="footer-sublinks">Link Shortening</p>
        <p class="footer-sublinks">Branded Links</p>
        <p class="footer-sublinks">Analytics</p>
      </div>
      <div class="col-md-4">
        <h6 class="bold-text footer-link-heading">Resources</h6>
         <div class="w-100"></div>
        <p class="footer-sublinks">Blogs</p>
        <p class="footer-sublinks">Developers</p>
        <p class="footer-sublinks">Support</p>
      </div>
      <div class="col-md-4">
         <h6 class="bold-text footer-link-heading">Company</h6>
         <div class="w-100"></div>
         <p class="footer-sublinks">About</p>
        <p class="footer-sublinks">Our Team</p>
        <p class="footer-sublinks">Careers</p>
        <p class="footer-sublinks">Contact</p>
      </div>
    </div>
    <div class="col-12 col-md-2 row justify-content-center flex-nowrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"  alt="facebook" class="img-fluid social-icons"><path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" alt="twitter" class="img-fluid social-icons"><path fill="#FFF" d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"/></svg>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" alt="pintrest" class="img-fluid social-icons"><path fill="#FFF" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path></svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" alt="instagram" class="img-fluid social-icons"><path fill="#FFF" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>

    </div>
  </footer>
  <!-- footer ends-->
  <!-- Attribution Starts -->
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://yadavanuj1996.github.io/" target="_blank">Anuj Yadav</a>.
  </div>
    <!-- Attribution Ends -->
</body>

</html>

## script.js
async function copyPageUrl(shortenedLink,copyBtnId) {
  try {
    await navigator.clipboard.writeText(shortenedLink);
    document.getElementById(copyBtnId).innerHTML="Copied!";
    document.getElementById(copyBtnId).classList.add("copied-button");
    console.log('Page URL copied to clipboard '+copyBtnId);
    setTimeout(function(){
      document.getElementById(copyBtnId).innerHTML="Copy";
      document.getElementById(copyBtnId).classList.remove("copied-button");

     }, 3000);
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}


let loadCurrentLinks = () => {

  let hashids = localStorage.getItem("hashDetails");
 if(hashids === null)
    return;

  document.getElementById("present-links").innerHTML="";

  let hashidsData = hashids.split(",");
  for (let i = 0; i < hashidsData.length; i++) {
    fetch(`https://rel.ink/api/links/${hashidsData[i]}/`)
      .then(response => response.json())
      .then(data => {
        console.log("Success:", data);
        let copyURL=`https://rel.ink/${data.hashid}`;
        document.getElementById("present-links").insertAdjacentHTML(
          "beforeend",
          ` <div class="link-details col-12 row col-md-10 offset-md-1">
       <div class="col-md-6 no-xs-padding">
        <p class="long-link">${data.url}</p>
        </div>
       <div class="col-md-4 no-xs-padding">
         <p class="short-link">https://rel.ink/${data.hashid}</p>
        </div>
       <div class="col-md-2 no-xs-padding">
          <button id="${data.hashid}" class="theme-cyan copy-btn" onclick="copyPageUrl('${copyURL}','${data.hashid}')">Copy</button>
        </div>
      </div>`
        );
      })
      .catch(error => {
        console.error("Error:", error);
      });
  }

};

if (localStorage.getItem("hashDetails")==="" || localStorage.getItem("hashDetails")=== null) {
  localStorage.setItem("hashDetails", "");
}
else {
  loadCurrentLinks();
}

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("shorten-it-btn").addEventListener("click", () => {

    fetch("https://rel.ink/api/links/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        url: document.getElementById("search-textbox").value
      })
    })
      .then(response => response.json())
      .then(data => {
        console.log("Success:", data.hashid);
        if (data.hashid) {
          document
            .getElementById("search-textbox")
            .classList.remove("invalid-url");
          document
            .getElementById("search-textbox")
            .classList.remove("placeholder-color");
          document
            .getElementById("invalid-link-notification")
            .classList.remove("invlaid-notification");
          document
            .getElementById("search-textbox")
            .classList.remove("reduce-height");
          document
            .getElementById("search-bar-elements")
            .classList.remove("no-bottom-padding");

          let temp = localStorage.getItem("hashDetails");
          console.log('temp is '+temp);
          if(temp===null || temp.indexOf(data.hashid)>-1){
               document.getElementById("search-textbox").value = "";return;

             }
          else if (temp === "") {
            temp = data.hashid;

          }
          else {
            temp = temp + "," + data.hashid;
          }

          localStorage.setItem("hashDetails", temp);
          console.log("flag"+ ' '+localStorage.getItem("hashDetails"));
          loadCurrentLinks();
      }
      else {
          document
            .getElementById("search-textbox")
            .classList.add("invalid-url");
          document
            .getElementById("search-textbox")
            .classList.add("placeholder-color");
          document
            .getElementById("invalid-link-notification")
            .classList.add("invlaid-notification");
          document
            .getElementById("search-textbox")
            .classList.add("reduce-height");
          document
            .getElementById("search-bar-elements")
            .classList.add("no-bottom-padding");
        }

        document.getElementById("search-textbox").value = "";
      })
      .catch(error => {
        console.error("Error:", error);
      });
  });
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

## style.scss
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
html,
body {
  font-family: Poppins;
  cursor: normal;
}
p,
h2,
h3,
h4,
h5,
h6 {
  cursor: default;
}
.theme-cyan {
  background-color: #2acfcf !important;
}
.no-border {
  border: 0 !important;
}
.white-color {
  color: white !important;
}
.bold-text {
  font-weight: 700;
}
.no-padding-margin {
  padding: 0 !important;
  margin: 0 !important;
}
//header
h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
#login-signup{
  border-top: 1px solid white;
}
.bg-light {
  background: white !important;
}
//bootstrap class update
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 1);
}
//bootstrap class update

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .navbar-light .navbar-toggler {
  border: none;
    padding: 0;
}
  .navbar-collapse {
    justify-content: center;
    background: hsl(255, 11%, 22%);
    border-radius: 10px;
    margin-top: 20px;
}
 .navbar-light .navbar-nav .nav-link {
    justify-content: center;
    display: flex;
    color: white;
   font-weight: bold;
   padding-top: 15px;
    padding-bottom: 15px;
  }
  #header-signup-li {
  display: flex;
  justify-content: center;
  align-items: center;
      margin-top: 15px;
    margin-bottom: 30px;
}
  #header-signup{
  border-radius: 25px;
  padding: 3px 20px 3px 20px;
  margin-left: 5px;
  margin-right: 5px;
    width: 80%;

}
}

  .navbar-light .navbar-toggler {
  border: none;
    padding: 0;
}
#header-signup-li {
  display: flex;
  justify-content: center;
  align-items: center;
}
#header-signup{
  border-radius: 25px;
  padding: 3px 20px 3px 20px;
  margin-left: 5px;
  margin-right: 5px;
}
#header-signup:active {
  opacity: 0.5;
}
//lading img text
#landing-img-text {
  overflow: hidden !important;
  margin-top: 40px !important;
}

// Extra small and Small devices
@media only screen and (min-width: 320px) and (max-width: 767px) {
  /*.navbar{
        display: flex;
    position: absolute;
    z-index: 1000;
    width: 100%;
    margin-top: -11%;
  }*/
  #landing-pc-img {
  margin-left: 10%;
}
  #landing-text {
    margin: 0 0 40px 0 !important;
  }
  #landing-text-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #landing-subheading {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-top: 40px;
  }

  #landing-subtext {
    color: hsl(257, 7%, 63%);
    text-align: center;
  }
}
// Medium and Large devices (desktops, 992px and up)
@media only screen and (min-width: 768px) {
  #landing-pc-img {
  margin-left: 20%;
}
  #landing-img-text {
    margin-bottom: 40px !important;
  }
  #landing-text-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 20%;
  }
  #landing-subheading {
    font-size: 60px;
    font-weight: 700;
  }
  #landing-subtext {
    color: hsl(257, 7%, 63%);
  }
}

#get-started-btn {
  font-weight: 700;
  border-radius: 25px;
  padding: 8px 30px 8px 30px;
  cursor: pointer;
}
#get-started-btn:active {
  opacity: 0.5;
  cursor: pointer;
}
#get-started-btn:focus {
  outline: 0;
}
// search bar
// Extra small and Small devices
@media only screen and (min-width: 320px) and (max-width: 767px) {
  #search-bar {
    background: linear-gradient(180deg, white, white, #F1F1F6);
  }
  #search-bar-elements {
    background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JR3.svg");
    height: 100%;
    border-radius: 20px !important;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size: 75% 72%;
    padding: 40px;
    margin-right: -15px;
    margin-left: -15px;
  }
  #shorten-it-btn {
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 30px 8px 30px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 20px;
  }
  #search-textbox {
    width: 70%;
    border-radius: 8px;
    border: none;
    height: 45%;
    padding: 7px;
    margin-right: 5px;
  }
}
// Medium and Large devices (desktops, 992px and up)
@media only screen and (min-width: 768px) {
  #search-bar {
    background: linear-gradient(180deg, white, white, #F1F1F6);
  }
  #search-bar-elements {
    padding: 40px;
    background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JKm.svg");
    background-size: cover;
    height: 100%;
    border-radius: 20px !important;
    margin-right: -15px;
    margin-left: -15px;
  }
  #shorten-it-btn {
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 30px 8px 30px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
  }
  #search-textbox {
    width: 70%;
    border-radius: 8px;
    border: none;
    height: 100%;
    padding: 7px;
    margin-right: 5px;
  }
}

#left-utility-div {
  background-color: #F1F1F6;
  padding: 0;
}
#left-utility-top-div {
  background: white;
  height: 50%;
}

#shorten-it-btn:active {
  opacity: 0.7;
  cursor: pointer;
}
#shorten-it-btn:focus {
  outline: 0;
}
#right-utility-div {
  background-color: #F1F1F6;
  padding: 0;
}
#right-utility-top-div {
  background: white;
  height: 50%;
}
// advanced statistics
//present links section
#present-links {
  margin-bottom: 80px;
}


#advanced-stats-heading {
  font-weight: 700;
}

// Extra small devices
@media only screen and (min-width: 320px) and (max-width: 575px) {
  .link-details {
    background-color: #ffffff;
    padding: 0;
    margin-top:15px;
    border-radius:5px;
    margin: 0 0 15px 0;
  }
  .long-link {
    margin: 0;
    border-bottom: 1px solid hsl(0, 0%, 75%);
    padding: 10px 20px 10px 20px;
    display: inline-block;
    width: calc(100%) !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .short-link {
  color: #2acfcf;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
      padding: 10px 20px 10px 20px;
}
  .copy-btn {
    font-weight: 700;
    border-radius: 7px;
    padding: 6px 30px 6px 30px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: white;
    border: none;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 15px;
    outline: 0;
  }
  .copy-btn:hover{
    outline: 0;
  }
  #advanced-statistics {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #F1F1F6;
  }
  #advanced-stats-cards {
    marign: 0;
  }
  #advanced-stats-subheading {
    color: hsl(255, 11%, 22%) !important;
    width: 80%;
    margin-left: 10%;
  }
  #brand-recognition-card {
    margin-top: 10%;
    margin-left: 5%;
    width: 83%;
    color: hsl(255, 11%, 22%) !important;
    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    position: relative;
    z-index: 3;
    text-align: center;
  }
  #detailed-records-card {
    margin-top: 20%;
    margin-left: 5%;
    width: 83%;
    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
  #fully-customizable-card {
    margin-top: 20%;
    margin-bottom: 20%;
    margin-left: 5%;
    width: 83%;

    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }

  #brand-recognition-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
    top: -9%;
    left: 40%;
  }
  #detailed-records-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
     top: -9%;
    left: 40%;
  }
  #fully-customizable-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
     top: -9%;
    left: 40%;
  }
  #connector {
    position: absolute;
    height: 80%;
    width: 8px;
    left: 51.5%;
    margin-top: 10%;
  }
}
// Small devices
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .link-details {
    background-color: #ffffff;
    padding: 0;
    margin-top:15px;
    border-radius:5px;
    margin: 0 0 15px 0;
  }
  .long-link {
    margin: 0;
    border-bottom: 1px solid hsl(0, 0%, 75%);
    padding: 10px 20px 10px 20px;
    display: inline-block;
    width: calc(100%) !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .short-link {
  color: #2acfcf;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
      padding: 10px 20px 10px 20px;
}
  .copy-btn {
    font-weight: 700;
    border-radius: 7px;
    padding: 6px 30px 6px 30px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: white;
    border: none;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 15px;
    outline: 0;
  }
  .copy-btn:hover{
    outline: 0;
  }
  #advanced-statistics {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #F1F1F6;
  }
  #advanced-stats-cards {
    margin: 0;
  }
  #advanced-stats-subheading {
    color: hsl(255, 11%, 22%) !important;
    width: 80%;
    margin-left: 10%;
  }
  #brand-recognition-card {
    margin-top: 10%;
    margin-left: 5%;
    width: 83%;
    color: hsl(255, 11%, 22%) !important;
    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    position: relative;
    z-index: 3;
    text-align: center;
  }
  #detailed-records-card {
    margin-top: 20%;
    margin-left: 5%;
    width: 83%;
    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
  #fully-customizable-card {
    margin-left: 5%;
    width: 83%;
    margin-top: 20%;
    background-color: #ffffff;
    padding: 12% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }

  #brand-recognition-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
    top: -25%;
    left: 40%;
  }
  #detailed-records-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
    top: -25%;
    left: 40%;
  }
  #fully-customizable-img-holder {
    position: absolute;
    width: 20%;
    background: hsl(255, 11%, 22%);
    padding: 5%;
    border-radius: 50%;
    top: -25%;
    left: 40%;
  }
  #connector {
    position: absolute;
    height: 80%;
    width: 8px;
    left: 51.5%;
    margin-top: 10%;
  }
}
// Medium devices (tablets, 768px and up)
@media only screen and (min-width: 768px) and (max-width: 991px) {
   .link-details {
    background-color: #ffffff;
    padding: 0;
    margin-top:15px;
    border-radius:5px;
  }
  .long-link {
     margin: 3% 0 0 0;
    display: inline-block;
    width: calc(100%) !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .short-link {
  color: #2acfcf;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
}
  .copy-btn {
    font-weight: 700;
    border-radius: 10px;
    padding: 4px 10px 4px 10px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: white;
    border: none;
    margin: 7px;
    outline: 0;
  }
  .copy-btn:hover{
    outline: 0;
  }
  #advanced-statistics {
    padding-top: 20px;
    padding-bottom: 90px;
    background-color: #F1F1F6;
  }
  #advanced-stats-cards {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: center !important;
  }
  #advanced-stats-subheading {
    color: hsl(255, 11%, 22%) !important;
    width: 50%;
    margin-left: 25%;
  }
  #brand-recognition-card {
    color: hsl(255, 11%, 22%) !important;
    background-color: #ffffff;
    padding: 8% 20px 20px 20px;
    border-radius: 5px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    position: relative;
    z-index: 3;
  }
  #detailed-records-card {
    margin-top: 8%;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ffffff;
    padding: 8% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
  #fully-customizable-card {
    margin-top: 23%;
    background-color: #ffffff;
    padding: 8% 20px 20px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }

  #brand-recognition-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -10%;
  }
  #detailed-records-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -10%;
  }
  #fully-customizable-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -10%;
  }
  #connector {
    top: 44%;
    position: absolute;
    height: 8px;
    width: 100%;
  }
}
// Large devices (desktops, 992px and up)
@media only screen and (min-width: 992px) {
  .link-details {
    background-color: #ffffff;
    padding: 0;
    margin-top:15px;
    border-radius:5px;
  }
  .long-link {
    margin: 2% 0 0 0;
    display: inline-block;
    width: calc(100%) !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .short-link {
  color: #2acfcf;
  margin: 0;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: flex-start;
}
  .copy-btn {
    font-weight: 700;
    border-radius: 10px;
    padding: 4px 30px 4px 30px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: white;
    border: none;
    margin: 7px;
    outline: 0;
  }
  .copy-btn:hover{
    outline: 0;
  }
  #advanced-statistics {
    padding-top: 20px;
    padding-bottom: 110px;
    background-color: #F1F1F6;
  }
  #advanced-stats-cards {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: center !important;
  }
  #advanced-stats-subheading {
    color: hsl(255, 11%, 22%) !important;
    width: 50%;
    margin-left: 25%;
  }
  #brand-recognition-card {
    color: hsl(255, 11%, 22%) !important;
    background-color: #ffffff;
    padding: 8% 20px 40px 20px;
    border-radius: 5px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    position: relative;
    z-index: 3;
  }
  #detailed-records-card {
    margin-top: 8%;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #ffffff;
    padding: 8% 20px 40px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
  #fully-customizable-card {
    margin-top: 14%;
    background-color: #ffffff;
    padding: 8% 20px 40px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }

  #brand-recognition-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -19%;
  }
  #detailed-records-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -19%;
  }
  #fully-customizable-img-holder {
    position: absolute;
    width: 30%;
    background: hsl(255, 11%, 22%);
    padding: 8%;
    border-radius: 50%;
    top: -19%;
  }
  #connector {
    position: absolute;
    height: 10px;
    width: 100%;
    top: 53%;
  }
}

// boost links
// Extra small and Small devices
@media only screen and (min-width: 320px) and (max-width: 767px) {
  #boost-links {
    background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JNK.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
// Medium and Large devices (desktops, 992px and up)
@media only screen and (min-width: 768px) {
  #boost-links {
    background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JNV.svg");
    background-position: 74% 60%;
    padding: 60px !important;
    background-size: cover;
  }
}

#boost-heading {
  margin-bottom: 8px;
}
#boost-get-started-btn {
  margin-top: 8px;
  font-weight: 700;
  border-radius: 25px;
  padding: 8px 30px 8px 30px;
  cursor: pointer;
}
#boost-get-started-btn:active {
  cursor: pointer;
  opacity: 0.5;
}
#boost-get-started-btn:hover {
  outline: 0;
}
//footer
// Extra small and Small devices
@media only screen and (min-width: 320px) and (max-width: 767px) {
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(260, 8%, 14%);
    padding: 40px 15px 60px 15px !important;
    margin: 0 !important;
  }
  .footer-main-heading {
    text-align: center;
  }
  .footer-link-heading {
    margin-top: 20px;
    text-align: center;
  }
  .footer-sublinks {
    width: 100%;
    margin: 0;
    cursor: pointer;
    text-align: center;
  }
  .social-icons {
    margin: 5%;
    height: 12%;
  }
}
// Medium and Large devices (desktops, 992px and up)
@media only screen and (min-width: 768px) {
  footer {
    background-color: hsl(260, 8%, 14%);
    padding: 40px 15px 60px 15px !important;
    margin: 0 !important;
  }
  .footer-main-heading {
    cursor: default;
  }
  .footer-link-heading {
    cursor: default;
  }
  .footer-sublinks {
    width: 100%;
    margin: 0;
    cursor: pointer;
  }
  .social-icons {
    margin-left: 10%;
    height: 100%;
    cursor: pointer;
  }
}

.footer-sublinks:active {
  color: #2acfcf !important;
  cursor: pointer;
}

.social-icons path:active {
  fill: #2acfcf !important;

}
//attribution
.attribution {
  font-size: 11px;
  text-align: center;
  background-color: hsl(260, 8%, 14%);
  color: white;
  border-top: 1px solid #000000;
}

.attribution a {
  color: #2acfcf;
}

//
.invalid-url {
  border: 2px solid hsl(0, 87%, 67%) !important;
}
.placeholder-color::-webkit-input-placeholder {
  color: hsl(0, 87%, 67%);
}
.placeholder-color::placeholder {
  color: hsl(0, 87%, 67%);
}
#invalid-link-notification {
  display: none;
}

.no-bottom-padding {
  padding-bottom: 0px !important;
}
// Extra small and Small devices
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .no-xs-padding{
    padding: 0 !important;
  }
  .reduce-height {
    height: 27% !important;
  }
  .invlaid-notification {
    width: 100%;
    display: flex !important;
    margin-right: 20% !important;
    font-size: 80% !important;
    color: hsl(0, 87%, 67%) !important;
  }
}
// Medium and Large devices (desktops, 992px and up)
@media only screen and (min-width: 768px) {
  .reduce-height {
    height: 50% !important;
  }
  .invlaid-notification {
    display: flex !important;
    margin-right: 65% !important;
    font-size: 90% !important;
    color: hsl(0, 87%, 67%) !important;
  }
}

.copied-button{
  background-color: #35323e !important;

}
.copied-button:hover{
  outline: 0;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
	<!-- <!DOCTYPE html> -->
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

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

	<title>Frontend Mentor \| Shortly URL shortening API Challenge</title>
	</head>

	<body>
	<!-- Header Starts -->
	<header>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#"><h1>Shortly</h1></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
	<ul class="navbar-nav mr-auto mt-2 mt-lg-0 ml-lg-4">
	<li class="nav-item">
	<a class="nav-link" href="#">Features <span class="sr-only">(current)</span></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>

	<ul id="login-signup" class="navbar-nav mr-0 mt-2 mt-lg-0">
	<li class="nav-item">
	<a class="nav-link" href="#">Login </a>
	</li>
	<li id="header-signup-li" class="nav-item">
	<a id="header-signup" class="nav-link white-color theme-cyan bold-text" href="#">Sign Up </a>
	</li>
	</ul>
	</div>
	</nav>
	</header>
	<!-- Header Ends -->
	<!-- Landing Img Text Starts -->
	<div id="landing-img-text" class="row col-12 no-padding-margin flex-column-reverse flex-md-row">
	<div id="landing-text" class="row justify-content-center aling-items-center align-items-md-center col-12 col-md-6">
	<div class="w-100"></div>
	<div id="landing-text-div" class="col-12 col-md-10 offset-md-2 h-100">
	<h2 id="landing-subheading">More than just shorter links</h2>
	<p id="landing-subtext">Build your brand's recognition and get detailed insights on how your links are performing.</p>
	<button id="get-started-btn" class="theme-cyan no-border white-color">Get Started</button>
	</div>
	</div>
	<div id="landing-img" class="col-12 col-md-6 no-padding-margin">
	<img id="landing-pc-img" class="img-fluid" src="https://svgshare.com/i/JMW.svg" alt="landing img">
	</div>
	</div>
	<!-- Landing Img Text Ends -->
	<!-- Search Bar Starts -->
	<div class="row col-12 no-padding-margin">
	<div id="left-utility-div" class="col-1 col-md-1" >
	<div id="left-utility-top-div">
	</div>

	</div>
	<div id="search-bar" class="col-10 col-md-10">
	<div id="search-bar-elements" class="row justify-content-center align-items-center">
	<input type="url" id="search-textbox" class="col-12 col-md-8" placeholder="Shorten a link here..." required>
	<button type="submit" id="shorten-it-btn" class="theme-cyan no-border white-color col-12 col-md-3 col-lg-2">Shorten It!</button>
	<div class="w-100"></div>
	<p id="invalid-link-notification">Please enter a valid link</p>
	</div>
	</div>
	<div id="right-utility-div" class="col-1 col-md-1" >
	<div id="right-utility-top-div">
	</div>

	</div>
	</div>
	<!-- Search Bar Ends -->
	<!-- Advanced Statistics Starts -->
	<div id="advanced-statistics" class="col-12">
	<div id="present-links" class="col-12">

	</div>
	<h3 id="advanced-stats-heading" class="text-center">Advanced Statistics</h3>
	<p id="advanced-stats-subheading" class="text-center">Track how your links are performing across the web with our advanced statistics dashboard.</p>
	<div id="advanced-stats-cards" class="row col-12 col-md-10 offset-md-1 justify-content-between align-items-center flex-column flex-md-row flex-nowrap">
	<!-- Card 1 starts-->
	<div id="brand-recognition-card" class="col-12 col-md-4">
	<div id="brand-recognition-img-holder">
	<img src="https://svgshare.com/i/JNa.svg" class="img-fluid w-100" alt="brand recognition image">
	</div>
	<h4 class="bold-text">Brand Recognition</h4>
	<p>Boost your brand recognition with each click.Genric links don't mean a thing. Branded links help instil the confidence in your content.</p>
	</div>
	<!-- Card 1 ends-->
	<!-- Card 2 starts-->
	<div id="detailed-records-card" class="col-12 col-md-4">
	<div id="detailed-records-img-holder">
	<img src="https://svgshare.com/i/JLg.svg" class="img-fluid w-100" alt="detailed records image">
	</div>
	<h4 class="bold-text">Detailed Records</h4>
	<p>Gain insights into who is clicking your link Knowing when and where people engage with your content helps inform better decisions.</p>
	</div>
	<!-- Card 2 ends-->
	<!-- Card 3 starts-->
	<div id="fully-customizable-card" class="col-12 col-md-4">
	<div id="fully-customizable-img-holder">
	<img src="https://svgshare.com/i/JN1.svg" class="img-fluid w-100" alt="fully customizable image">
	</div>
	<h4 class="bold-text">Fully Customizable</h4>
	<p>Improve brand awareness and content discoverability through customizable links, supercharging audience engagement.</p>
	</div>
	<!-- Card 3 ends-->
	<!-- connector starts -->
	<div id="connector" class="theme-cyan">
	</div>
	<!-- connector ends -->
	</div>
	</div>
	<!-- Advanced Statistics Ends -->
	<!-- Boost your link starts-->
	<div id="boost-links" class="row col-12 justify-content-center align-items-center no-padding-margin">
	<h3 id="boost-heading" class="white-color bold-text">Boost your links today</h3>
	<div class="w-100"></div>
	<button id="boost-get-started-btn" class="theme-cyan no-border white-color">Get Started</button>
	</div>
	<!-- Boost your link ends-->
	<!-- footer starts -->
	<footer class="row col-12 white-color">
	<div class="col-12 col-md-3">
	<h3 class="bold-text footer-main-heading">Shortly</h3>
	</div>
	<div class="col-12 col-md-7 row no-padding-margin ">
	<div class="col-md-4">
	<h6 class="bold-text footer-link-heading">Features</h6>
	<div class="w-100"></div>
	<p class="footer-sublinks">Link Shortening</p>
	<p class="footer-sublinks">Branded Links</p>
	<p class="footer-sublinks">Analytics</p>
	</div>
	<div class="col-md-4">
	<h6 class="bold-text footer-link-heading">Resources</h6>
	<div class="w-100"></div>
	<p class="footer-sublinks">Blogs</p>
	<p class="footer-sublinks">Developers</p>
	<p class="footer-sublinks">Support</p>
	</div>
	<div class="col-md-4">
	<h6 class="bold-text footer-link-heading">Company</h6>
	<div class="w-100"></div>
	<p class="footer-sublinks">About</p>
	<p class="footer-sublinks">Our Team</p>
	<p class="footer-sublinks">Careers</p>
	<p class="footer-sublinks">Contact</p>
	</div>
	</div>
	<div class="col-12 col-md-2 row justify-content-center flex-nowrap">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" alt="facebook" class="img-fluid social-icons"><path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" alt="twitter" class="img-fluid social-icons"><path fill="#FFF" d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"/></svg>
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" alt="pintrest" class="img-fluid social-icons"><path fill="#FFF" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path></svg>
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" alt="instagram" class="img-fluid social-icons"><path fill="#FFF" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>

	</div>
	</footer>
	<!-- footer ends-->
	<!-- Attribution Starts -->
	<div class="attribution">
	Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
	Coded by <a href="https://yadavanuj1996.github.io/" target="_blank">Anuj Yadav</a>.
	</div>
	<!-- Attribution Ends -->
	</body>

	</html>
	async function copyPageUrl(shortenedLink,copyBtnId) {
	try {
	await navigator.clipboard.writeText(shortenedLink);
	document.getElementById(copyBtnId).innerHTML="Copied!";
	document.getElementById(copyBtnId).classList.add("copied-button");
	console.log('Page URL copied to clipboard '+copyBtnId);
	setTimeout(function(){
	document.getElementById(copyBtnId).innerHTML="Copy";
	document.getElementById(copyBtnId).classList.remove("copied-button");

	}, 3000);
	} catch (err) {
	console.error('Failed to copy: ', err);
	}
	}


	let loadCurrentLinks = () => {

	let hashids = localStorage.getItem("hashDetails");
	if(hashids === null)
	return;

	document.getElementById("present-links").innerHTML="";

	let hashidsData = hashids.split(",");
	for (let i = 0; i < hashidsData.length; i++) {
	fetch(`https://rel.ink/api/links/${hashidsData[i]}/`)
	.then(response => response.json())
	.then(data => {
	console.log("Success:", data);
	let copyURL=`https://rel.ink/${data.hashid}`;
	document.getElementById("present-links").insertAdjacentHTML(
	"beforeend",
	` <div class="link-details col-12 row col-md-10 offset-md-1">
	<div class="col-md-6 no-xs-padding">
	<p class="long-link">${data.url}</p>
	</div>
	<div class="col-md-4 no-xs-padding">
	<p class="short-link">https://rel.ink/${data.hashid}</p>
	</div>
	<div class="col-md-2 no-xs-padding">
	<button id="${data.hashid}" class="theme-cyan copy-btn" onclick="copyPageUrl('${copyURL}','${data.hashid}')">Copy</button>
	</div>
	</div>`
	);
	})
	.catch(error => {
	console.error("Error:", error);
	});
	}

	};

	if (localStorage.getItem("hashDetails")==="" \|\| localStorage.getItem("hashDetails")=== null) {
	localStorage.setItem("hashDetails", "");
	}
	else {
	loadCurrentLinks();
	}

	document.addEventListener("DOMContentLoaded", () => {
	document.getElementById("shorten-it-btn").addEventListener("click", () => {

	fetch("https://rel.ink/api/links/", {
	method: "POST",
	headers: {
	"Content-Type": "application/json"
	},
	body: JSON.stringify({
	url: document.getElementById("search-textbox").value
	})
	})
	.then(response => response.json())
	.then(data => {
	console.log("Success:", data.hashid);
	if (data.hashid) {
	document
	.getElementById("search-textbox")
	.classList.remove("invalid-url");
	document
	.getElementById("search-textbox")
	.classList.remove("placeholder-color");
	document
	.getElementById("invalid-link-notification")
	.classList.remove("invlaid-notification");
	document
	.getElementById("search-textbox")
	.classList.remove("reduce-height");
	document
	.getElementById("search-bar-elements")
	.classList.remove("no-bottom-padding");

	let temp = localStorage.getItem("hashDetails");
	console.log('temp is '+temp);
	if(temp===null \|\| temp.indexOf(data.hashid)>-1){
	document.getElementById("search-textbox").value = "";return;

	}
	else if (temp === "") {
	temp = data.hashid;

	}
	else {
	temp = temp + "," + data.hashid;
	}

	localStorage.setItem("hashDetails", temp);
	console.log("flag"+ ' '+localStorage.getItem("hashDetails"));
	loadCurrentLinks();
	}
	else {
	document
	.getElementById("search-textbox")
	.classList.add("invalid-url");
	document
	.getElementById("search-textbox")
	.classList.add("placeholder-color");
	document
	.getElementById("invalid-link-notification")
	.classList.add("invlaid-notification");
	document
	.getElementById("search-textbox")
	.classList.add("reduce-height");
	document
	.getElementById("search-bar-elements")
	.classList.add("no-bottom-padding");
	}

	document.getElementById("search-textbox").value = "";
	})
	.catch(error => {
	console.error("Error:", error);
	});
	});
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
	html,
	body {
	font-family: Poppins;
	cursor: normal;
	}
	p,
	h2,
	h3,
	h4,
	h5,
	h6 {
	cursor: default;
	}
	.theme-cyan {
	background-color: #2acfcf !important;
	}
	.no-border {
	border: 0 !important;
	}
	.white-color {
	color: white !important;
	}
	.bold-text {
	font-weight: 700;
	}
	.no-padding-margin {
	padding: 0 !important;
	margin: 0 !important;
	}
	//header
	h1 {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	}
	#login-signup{
	border-top: 1px solid white;
	}
	.bg-light {
	background: white !important;
	}
	//bootstrap class update
	.navbar-light .navbar-nav .nav-link:focus,
	.navbar-light .navbar-nav .nav-link:hover {
	color: rgba(0, 0, 0, 1);
	}
	//bootstrap class update

	@media only screen and (min-width: 320px) and (max-width: 767px) {
	.navbar-light .navbar-toggler {
	border: none;
	padding: 0;
	}
	.navbar-collapse {
	justify-content: center;
	background: hsl(255, 11%, 22%);
	border-radius: 10px;
	margin-top: 20px;
	}
	.navbar-light .navbar-nav .nav-link {
	justify-content: center;
	display: flex;
	color: white;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 15px;
	}
	#header-signup-li {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 30px;
	}
	#header-signup{
	border-radius: 25px;
	padding: 3px 20px 3px 20px;
	margin-left: 5px;
	margin-right: 5px;
	width: 80%;

	}
	}

	.navbar-light .navbar-toggler {
	border: none;
	padding: 0;
	}
	#header-signup-li {
	display: flex;
	justify-content: center;
	align-items: center;
	}
	#header-signup{
	border-radius: 25px;
	padding: 3px 20px 3px 20px;
	margin-left: 5px;
	margin-right: 5px;
	}
	#header-signup:active {
	opacity: 0.5;
	}
	//lading img text
	#landing-img-text {
	overflow: hidden !important;
	margin-top: 40px !important;
	}

	// Extra small and Small devices
	@media only screen and (min-width: 320px) and (max-width: 767px) {
	/*.navbar{
	display: flex;
	position: absolute;
	z-index: 1000;
	width: 100%;
	margin-top: -11%;
	}*/
	#landing-pc-img {
	margin-left: 10%;
	}
	#landing-text {
	margin: 0 0 40px 0 !important;
	}
	#landing-text-div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	#landing-subheading {
	text-align: center;
	font-size: 40px;
	font-weight: 700;
	margin-top: 40px;
	}

	#landing-subtext {
	color: hsl(257, 7%, 63%);
	text-align: center;
	}
	}
	// Medium and Large devices (desktops, 992px and up)
	@media only screen and (min-width: 768px) {
	#landing-pc-img {
	margin-left: 20%;
	}
	#landing-img-text {
	margin-bottom: 40px !important;
	}
	#landing-text-div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin-left: 20%;
	}
	#landing-subheading {
	font-size: 60px;
	font-weight: 700;
	}
	#landing-subtext {
	color: hsl(257, 7%, 63%);
	}
	}

	#get-started-btn {
	font-weight: 700;
	border-radius: 25px;
	padding: 8px 30px 8px 30px;
	cursor: pointer;
	}
	#get-started-btn:active {
	opacity: 0.5;
	cursor: pointer;
	}
	#get-started-btn:focus {
	outline: 0;
	}
	// search bar
	// Extra small and Small devices
	@media only screen and (min-width: 320px) and (max-width: 767px) {
	#search-bar {
	background: linear-gradient(180deg, white, white, #F1F1F6);
	}
	#search-bar-elements {
	background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JR3.svg");
	height: 100%;
	border-radius: 20px !important;
	background-position: 100% 0%;
	background-repeat: no-repeat;
	background-size: 75% 72%;
	padding: 40px;
	margin-right: -15px;
	margin-left: -15px;
	}
	#shorten-it-btn {
	font-weight: 700;
	border-radius: 10px;
	padding: 8px 30px 8px 30px;
	white-space: nowrap;
	overflow: hidden;
	margin-top: 20px;
	}
	#search-textbox {
	width: 70%;
	border-radius: 8px;
	border: none;
	height: 45%;
	padding: 7px;
	margin-right: 5px;
	}
	}
	// Medium and Large devices (desktops, 992px and up)
	@media only screen and (min-width: 768px) {
	#search-bar {
	background: linear-gradient(180deg, white, white, #F1F1F6);
	}
	#search-bar-elements {
	padding: 40px;
	background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JKm.svg");
	background-size: cover;
	height: 100%;
	border-radius: 20px !important;
	margin-right: -15px;
	margin-left: -15px;
	}
	#shorten-it-btn {
	font-weight: 700;
	border-radius: 10px;
	padding: 8px 30px 8px 30px;
	margin-left: 5px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	}
	#search-textbox {
	width: 70%;
	border-radius: 8px;
	border: none;
	height: 100%;
	padding: 7px;
	margin-right: 5px;
	}
	}

	#left-utility-div {
	background-color: #F1F1F6;
	padding: 0;
	}
	#left-utility-top-div {
	background: white;
	height: 50%;
	}

	#shorten-it-btn:active {
	opacity: 0.7;
	cursor: pointer;
	}
	#shorten-it-btn:focus {
	outline: 0;
	}
	#right-utility-div {
	background-color: #F1F1F6;
	padding: 0;
	}
	#right-utility-top-div {
	background: white;
	height: 50%;
	}
	// advanced statistics
	//present links section
	#present-links {
	margin-bottom: 80px;
	}



	#advanced-stats-heading {
	font-weight: 700;
	}

	// Extra small devices
	@media only screen and (min-width: 320px) and (max-width: 575px) {
	.link-details {
	background-color: #ffffff;
	padding: 0;
	margin-top:15px;
	border-radius:5px;
	margin: 0 0 15px 0;
	}
	.long-link {
	margin: 0;
	border-bottom: 1px solid hsl(0, 0%, 75%);
	padding: 10px 20px 10px 20px;
	display: inline-block;
	width: calc(100%) !important;
	text-overflow: ellipsis;
	overflow: hidden;
	}
	.short-link {
	color: #2acfcf;
	margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-start;
	padding: 10px 20px 10px 20px;
	}
	.copy-btn {
	font-weight: 700;
	border-radius: 7px;
	padding: 6px 30px 6px 30px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	color: white;
	border: none;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 15px;
	outline: 0;
	}
	.copy-btn:hover{
	outline: 0;
	}
	#advanced-statistics {
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #F1F1F6;
	}
	#advanced-stats-cards {
	marign: 0;
	}
	#advanced-stats-subheading {
	color: hsl(255, 11%, 22%) !important;
	width: 80%;
	margin-left: 10%;
	}
	#brand-recognition-card {
	margin-top: 10%;
	margin-left: 5%;
	width: 83%;
	color: hsl(255, 11%, 22%) !important;
	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	position: relative;
	z-index: 3;
	text-align: center;
	}
	#detailed-records-card {
	margin-top: 20%;
	margin-left: 5%;
	width: 83%;
	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	#fully-customizable-card {
	margin-top: 20%;
	margin-bottom: 20%;
	margin-left: 5%;
	width: 83%;

	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}

	#brand-recognition-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -9%;
	left: 40%;
	}
	#detailed-records-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -9%;
	left: 40%;
	}
	#fully-customizable-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -9%;
	left: 40%;
	}
	#connector {
	position: absolute;
	height: 80%;
	width: 8px;
	left: 51.5%;
	margin-top: 10%;
	}
	}
	// Small devices
	@media only screen and (min-width: 576px) and (max-width: 767px) {
	.link-details {
	background-color: #ffffff;
	padding: 0;
	margin-top:15px;
	border-radius:5px;
	margin: 0 0 15px 0;
	}
	.long-link {
	margin: 0;
	border-bottom: 1px solid hsl(0, 0%, 75%);
	padding: 10px 20px 10px 20px;
	display: inline-block;
	width: calc(100%) !important;
	text-overflow: ellipsis;
	overflow: hidden;
	}
	.short-link {
	color: #2acfcf;
	margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-start;
	padding: 10px 20px 10px 20px;
	}
	.copy-btn {
	font-weight: 700;
	border-radius: 7px;
	padding: 6px 30px 6px 30px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	color: white;
	border: none;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 15px;
	outline: 0;
	}
	.copy-btn:hover{
	outline: 0;
	}
	#advanced-statistics {
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: #F1F1F6;
	}
	#advanced-stats-cards {
	margin: 0;
	}
	#advanced-stats-subheading {
	color: hsl(255, 11%, 22%) !important;
	width: 80%;
	margin-left: 10%;
	}
	#brand-recognition-card {
	margin-top: 10%;
	margin-left: 5%;
	width: 83%;
	color: hsl(255, 11%, 22%) !important;
	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	position: relative;
	z-index: 3;
	text-align: center;
	}
	#detailed-records-card {
	margin-top: 20%;
	margin-left: 5%;
	width: 83%;
	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	#fully-customizable-card {
	margin-left: 5%;
	width: 83%;
	margin-top: 20%;
	background-color: #ffffff;
	padding: 12% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}

	#brand-recognition-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -25%;
	left: 40%;
	}
	#detailed-records-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -25%;
	left: 40%;
	}
	#fully-customizable-img-holder {
	position: absolute;
	width: 20%;
	background: hsl(255, 11%, 22%);
	padding: 5%;
	border-radius: 50%;
	top: -25%;
	left: 40%;
	}
	#connector {
	position: absolute;
	height: 80%;
	width: 8px;
	left: 51.5%;
	margin-top: 10%;
	}
	}
	// Medium devices (tablets, 768px and up)
	@media only screen and (min-width: 768px) and (max-width: 991px) {
	.link-details {
	background-color: #ffffff;
	padding: 0;
	margin-top:15px;
	border-radius:5px;
	}
	.long-link {
	margin: 3% 0 0 0;
	display: inline-block;
	width: calc(100%) !important;
	text-overflow: ellipsis;
	overflow: hidden;
	}
	.short-link {
	color: #2acfcf;
	margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-start;
	}
	.copy-btn {
	font-weight: 700;
	border-radius: 10px;
	padding: 4px 10px 4px 10px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	color: white;
	border: none;
	margin: 7px;
	outline: 0;
	}
	.copy-btn:hover{
	outline: 0;
	}
	#advanced-statistics {
	padding-top: 20px;
	padding-bottom: 90px;
	background-color: #F1F1F6;
	}
	#advanced-stats-cards {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	display: flex;
	flex-wrap: nowrap !important;
	justify-content: space-around !important;
	align-items: center !important;
	}
	#advanced-stats-subheading {
	color: hsl(255, 11%, 22%) !important;
	width: 50%;
	margin-left: 25%;
	}
	#brand-recognition-card {
	color: hsl(255, 11%, 22%) !important;
	background-color: #ffffff;
	padding: 8% 20px 20px 20px;
	border-radius: 5px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	position: relative;
	z-index: 3;
	}
	#detailed-records-card {
	margin-top: 8%;
	margin-left: 20px;
	margin-right: 20px;
	background-color: #ffffff;
	padding: 8% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	#fully-customizable-card {
	margin-top: 23%;
	background-color: #ffffff;
	padding: 8% 20px 20px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}

	#brand-recognition-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -10%;
	}
	#detailed-records-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -10%;
	}
	#fully-customizable-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -10%;
	}
	#connector {
	top: 44%;
	position: absolute;
	height: 8px;
	width: 100%;
	}
	}
	// Large devices (desktops, 992px and up)
	@media only screen and (min-width: 992px) {
	.link-details {
	background-color: #ffffff;
	padding: 0;
	margin-top:15px;
	border-radius:5px;
	}
	.long-link {
	margin: 2% 0 0 0;
	display: inline-block;
	width: calc(100%) !important;
	text-overflow: ellipsis;
	overflow: hidden;
	}
	.short-link {
	color: #2acfcf;
	margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: flex-start;
	}
	.copy-btn {
	font-weight: 700;
	border-radius: 10px;
	padding: 4px 30px 4px 30px;
	margin-left: 5px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	color: white;
	border: none;
	margin: 7px;
	outline: 0;
	}
	.copy-btn:hover{
	outline: 0;
	}
	#advanced-statistics {
	padding-top: 20px;
	padding-bottom: 110px;
	background-color: #F1F1F6;
	}
	#advanced-stats-cards {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	display: flex;
	flex-wrap: nowrap !important;
	justify-content: space-around !important;
	align-items: center !important;
	}
	#advanced-stats-subheading {
	color: hsl(255, 11%, 22%) !important;
	width: 50%;
	margin-left: 25%;
	}
	#brand-recognition-card {
	color: hsl(255, 11%, 22%) !important;
	background-color: #ffffff;
	padding: 8% 20px 40px 20px;
	border-radius: 5px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	position: relative;
	z-index: 3;
	}
	#detailed-records-card {
	margin-top: 8%;
	margin-left: 20px;
	margin-right: 20px;
	background-color: #ffffff;
	padding: 8% 20px 40px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	#fully-customizable-card {
	margin-top: 14%;
	background-color: #ffffff;
	padding: 8% 20px 40px 20px;
	border-radius: 5px;
	position: relative;
	z-index: 3;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}

	#brand-recognition-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -19%;
	}
	#detailed-records-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -19%;
	}
	#fully-customizable-img-holder {
	position: absolute;
	width: 30%;
	background: hsl(255, 11%, 22%);
	padding: 8%;
	border-radius: 50%;
	top: -19%;
	}
	#connector {
	position: absolute;
	height: 10px;
	width: 100%;
	top: 53%;
	}
	}

	// boost links
	// Extra small and Small devices
	@media only screen and (min-width: 320px) and (max-width: 767px) {
	#boost-links {
	background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JNK.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
	}
	}
	// Medium and Large devices (desktops, 992px and up)
	@media only screen and (min-width: 768px) {
	#boost-links {
	background: hsl(255, 11%, 22%) url("https://svgshare.com/i/JNV.svg");
	background-position: 74% 60%;
	padding: 60px !important;
	background-size: cover;
	}
	}

	#boost-heading {
	margin-bottom: 8px;
	}
	#boost-get-started-btn {
	margin-top: 8px;
	font-weight: 700;
	border-radius: 25px;
	padding: 8px 30px 8px 30px;
	cursor: pointer;
	}
	#boost-get-started-btn:active {
	cursor: pointer;
	opacity: 0.5;
	}
	#boost-get-started-btn:hover {
	outline: 0;
	}
	//footer
	// Extra small and Small devices
	@media only screen and (min-width: 320px) and (max-width: 767px) {
	footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: hsl(260, 8%, 14%);
	padding: 40px 15px 60px 15px !important;
	margin: 0 !important;
	}
	.footer-main-heading {
	text-align: center;
	}
	.footer-link-heading {
	margin-top: 20px;
	text-align: center;
	}
	.footer-sublinks {
	width: 100%;
	margin: 0;
	cursor: pointer;
	text-align: center;
	}
	.social-icons {
	margin: 5%;
	height: 12%;
	}
	}
	// Medium and Large devices (desktops, 992px and up)
	@media only screen and (min-width: 768px) {
	footer {
	background-color: hsl(260, 8%, 14%);
	padding: 40px 15px 60px 15px !important;
	margin: 0 !important;
	}
	.footer-main-heading {
	cursor: default;
	}
	.footer-link-heading {
	cursor: default;
	}
	.footer-sublinks {
	width: 100%;
	margin: 0;
	cursor: pointer;
	}
	.social-icons {
	margin-left: 10%;
	height: 100%;
	cursor: pointer;
	}
	}

	.footer-sublinks:active {
	color: #2acfcf !important;
	cursor: pointer;
	}

	.social-icons path:active {
	fill: #2acfcf !important;

	}
	//attribution
	.attribution {
	font-size: 11px;
	text-align: center;
	background-color: hsl(260, 8%, 14%);
	color: white;
	border-top: 1px solid #000000;
	}

	.attribution a {
	color: #2acfcf;
	}

	//
	.invalid-url {
	border: 2px solid hsl(0, 87%, 67%) !important;
	}
	.placeholder-color::-webkit-input-placeholder {
	color: hsl(0, 87%, 67%);
	}
	.placeholder-color::placeholder {
	color: hsl(0, 87%, 67%);
	}
	#invalid-link-notification {
	display: none;
	}

	.no-bottom-padding {
	padding-bottom: 0px !important;
	}
	// Extra small and Small devices
	@media only screen and (min-width: 320px) and (max-width: 767px) {
	.no-xs-padding{
	padding: 0 !important;
	}
	.reduce-height {
	height: 27% !important;
	}
	.invlaid-notification {
	width: 100%;
	display: flex !important;
	margin-right: 20% !important;
	font-size: 80% !important;
	color: hsl(0, 87%, 67%) !important;
	}
	}
	// Medium and Large devices (desktops, 992px and up)
	@media only screen and (min-width: 768px) {
	.reduce-height {
	height: 50% !important;
	}
	.invlaid-notification {
	display: flex !important;
	margin-right: 65% !important;
	font-size: 90% !important;
	color: hsl(0, 87%, 67%) !important;
	}
	}

	.copied-button{
	background-color: #35323e !important;

	}
	.copied-button:hover{
	outline: 0;
	}