Make One Page Link To All Your Webpages
Tags: webdev, html, css
Published: 2019-11-30 07:39:07

# 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!"

<b>All of that FOR FREE. Sounds great, right?</b>

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

<b> WHAT YOU SHOULD DO INSTEAD...</b>

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.

# <b>Replace You Details In Side The Code</b>


```
<!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>

```

<b>Get Code through GitHub:</b> https://github.com/phonerefer/LinkTree
<b>Demo:</b> https://mylinks.netlify.com
## Change To Do!

<b>Change Photos</b>

Line No: 5 This is favicon
Line No: 48 This will be your photo

<b>Social Links</b>

Line No: 58 to 67 replace # with your desire link

<b>Names</b>

Replace (Your Name) with Your Name 
Replace (Your City) with Your City
Replace (Your Country) with Your Country Name

<b>Gmail</b>

Line No: 74 replace (Your Mail) with your gmail without brackets 

<b>Thanks For Reading....</b>