Ad Code

Create Your Own Link Page Using Simple HTML | Web Development.

Anonymous June 02, 2022
Welcome To Codingfizz,

In this article, Generate a simple and good-looking link page for your social profiles.


What is the link page?

So, a link page is just an HTML page that host with the help of Github, and you can add your social media profiles on this page with an icon.

When you need to share your social media profile and accounts with others for contact. So, You can share only one link of all your profiles like Instagram, Snapchat, Facebook, Twitter, etc.

Firstly, In this code uses CDN of fontawesome for social media icons such as Instagram, Facebook, Twitter, etc., and paste it inside of <head></head> tag.

In body make a first <div></div> tag for name of organization or owner, then create next <div></div> for adding social links and icons and create last <div></div> for adding description.

We will provide the code of this link page and you can simply copy that and use it on your page.

CDN of Fontawesome:
   <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">

Below you can see the example of the link page.

Source - https://ashishalf.github.io/

Code:


 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
  <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
  <link rel="icon" type="image/png" href="./ashishalf.jpg" />
  <title>Example</title>
  </head>
  <body
 style="background-image: url(); height: 100%; background-position: 100%; font-family: 'Courier New', Courier, monospace;">

    <center><img src="./example.jpg" alt=""  ></center>

      <div style="margin: 10px 30px 30px 30px; text-align: center">
        <h1 style="font-size: xx-large">Example</h1>
        <p style="font-size: large">@example</p>
      </div>
      <div style="text-align: center; margin-top: 10px; ">
        <p></p>
      </div>
      <div style="text-align: center; margin-top: 0px">
        <p>"</p>
      </div>
      <div style="text-align: center; margin-top: 50px">
        <p><b>My Social Icons</b></p>
      </div>
      
      <div class="social" style="text-align:center; margin: 20px 0px;">
        <div>
        <a href="https://www.facebook.com/profile" target="_blank"><i class="fa-brands fa-facebook-  f"></i></a>
        <a href="https://twitter.com/ashishalf" target="_blank"><i class="fa-brands fa-twitter"></i></a>
        <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a href="https://www.linkedin.com/in/" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
        <a href="https://github.com/" target="_blank"><i class="fa-brands fa-github"></i></a>
      </div>
      <div style="margin-top:5px;">
        <a href="https://www.quora.com/profile/" target="_blank"><i class="fa-brands fa-  quora"></i></a>
        <a href="https://www.codingfizz.in/" target="_blank"><i class="fa-solid fa-globe"></i></a>
        <a href="https://in.pinterest.com" target="_blank"><i class="fa-brands fa-pinterest-p"></i></a>
      </div>
    </div>
      <footer style="margin-top: 50px; text-align: center;">
        <hr style="height: 0.5px; border-width: 0; background-color: black" />
        <p><a href=# style="text-decoration:none; color:black;">Example | @example</a> © 2022</p>
      </footer>
  </body>
 <style>
  .social i{
    font-size: 30px;
    background-color: black;
    color: white;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    margin: 5px;
  }
  .social i:hover{
    background-color: transparent;
    color: black;
  }
    img{
        width: 10%;
        border-radius: 50%;
        margin: 80px 30px 0px 30px;
        border: 2px solid;
    }
    @media  screen and (max-width: 700px) {
        img{
            width: 25%;
        }
      }
 </style>
 </html>

This code is responsive for mobiles and tablets you can check it out.

Supported Browsers:

  • Chrome
  • Safari
  • Firefox
  • Microsoft Edge
  • Opera

Post a Comment

1 Comments

Ad Code