Make One Page Link To All Your Webpages

#webdev #html #css

Make your own linktree

Remember when Linktr.ee took the Instagram world by storm back in December of 2016? Everyone was like, "YAS. Now I can link to more than just one thing in my Insta bio!"

All of that FOR FREE. Sounds great, right?

Well, believe it or not, there's a couple drawbacks from their free version.

WHAT YOU SHOULD DO INSTEAD...

Just use below code and make your own landing page for all your social media platforms. Use it everywhere, link to anywhere! Link to Multiple Webpages.

Replace You Details In Side The Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="https://res.cloudinary.com/phonerefer/image/upload/v1575096088/ve0o2n85nfvgdatgqer2.jpg" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#343a40" />
  <meta
          name="description"
          content="Links To My Accounts | Developed By - Your Name"
  />  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <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">
     <title>Links - Your Name</title>
     <style>
       body{
         background-color: #faf8ef;
       }
       h5{
             color: #343a40;
       }
       .name{
           color: #343a40;
       }
       .love{
           color: #343a40 !important;
       }
       /*----------------- Mail-------------------- */
       #email{
           text-decoration: none;
           float: right;
           color:#343a40;
       }
       .footer{
           margin-top: 5% !important;
           margin-bottom: 10px;
       }
       @media (max-width: 479px) {
            .footer{
            margin-top: 35% !important;
            }
       }
     </style>
</head>
<body>
<div class="container">
  <div class="media mt-5">
    <img src="https://res.cloudinary.com/phonerefer/image/upload/v1575096088/ve0o2n85nfvgdatgqer2.jpg" class="m-3" alt="image" width="75px" height="75px">
    <div class="media-body m-2">
      <h5 class="align-items-center mt-2">Your Name</h5>
      <p>Hello!
      I am (Your Name)
      Developer based in (Your City), (Your Country).</p>
    </div>
  </div>
<div class="mt-4">
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fa fa-address-card">&nbsp;</i>Portfolio</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-github">&nbsp;</i>Github</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-codepen">&nbsp;</i>Codepen</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-instagram">&nbsp;</i>Instagram</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fab fa-twitter">&nbsp;</i>Twitter</a>
  <br>
  <a href="#" class="btn btn-outline-dark btn-block" role="button" target="_blank"><i class="fa fa-code">&nbsp;</i>Company Site</a>
</div>
        <!--------------------Footer---------------------------->
  <div class="footer mt-5">
    <hr/>
    <h6>Made With <span class="love">♥</span> in (Your City), (Your Country)</h6>
    <h6>
      Proudly Hosted By
      <a href="/" class="name" target="_blank"> (Your Name) </a>
      <a id="email" href="mailto:Your Mail"> <i class="fa fa-envelope"> </i> </a>
    </h6>
  </div>
</div>

</body>

</html>

Get Code through GitHub: https://github.com/phonerefer/LinkTree
Demo: https://mylinks.netlify.com