Webmastertoolbag Tryit Editor

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/w3css/4/w3.css">
<link rel="stylesheet" href="/lib/w3-theme-pink.css">    
<title>Links website</title>

.container {
  width: 100%;
  height: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.links-container {
  display: flex;
  flex-direction: column;
  jusify-content: center;
  align-items: center;
}

.links-container a {
  width: 80%;
}

.w3-theme-l1:hover {
  background-color: #f279a1 !important;
}

.margin-top-2 {
  margin-top: 32px;
}

.bottom {
  width: 100%;
  text-align: center;
  width: auto;
  font-weight: bolder;
}

.bottom span {
  color: #ed4d82;
}

.bottom svg {
  stroke: #ed4d82;
  fill: #ed4d82;
}

@media (min-width: 768px) {
  .link {
    width: 100%;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
</style>
  </head>
  <body>
    
    <div class="container">

<div style="text-align: center">
        
        <p>Hi, I'm Jane!</p>
        <p style="font-weight: bolder;">Check out my links!</p>
      </div>

<h4 class="margin-top-2" style="text-align: center;">MY SOCIAL NETWORKS</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Facebook</a>
        <br>
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Instagram</a>
        <br>
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Twitter</a>
        <br>
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Github</a>
      </div>

<h4 class="margin-top-2" style="text-align: center;">MY CV</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Curriculum Vitae</a>
      </div>

<h4 class="margin-top-2" style="text-align: center;">MY BLOG</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Hashnode</a>
      </div>

<h4 class="margin-top-2" style="text-align: center;">MY BUSINESS</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Business</a>
      </div>

<div class="bottom margin-top-2 w3-padding w3-round">
        
         2021 - Jane Doe
        
      </div>

</div>
    
  <script src="https://www.comfortsoftwaregroup.com/web/webmastertoolbag/edibu.js"></script>
<script src="https://www.comfortsoftwaregroup.com/web/webmastertoolbag/tongji.js"></script></body>  
</html>