My Portfolio

This code is free to use
Please give credit if used, thank you

HTML code:

<h1>My Portfolio</h1>
    <br>This code is free to use
    <br>Please give credit if used, thank you
    <br><a href="https://www.facebook.com/" class="fa fa-facebook"></a>
<a href="https://twitter.com/" class="fa fa-twitter"></a>
<a href="https://tumblr.com/" class="fa fa-tumblr"></a>
<a href="https://www.instagram.com/" class="fa fa-instagram"></a>
<a href="https://www.youtube.com/" class="fa fa-youtube"></a>
    </div>

</div>
        </div>

</div>

</center>

</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
    baguetteBox.run('.tz-gallery');
</script>

CSS code:

@import url('https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Quicksand|Lalezar');

html {
  box-sizing: border-box;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: #333;
  font-size: 16px;
  margin: 0;

}

img {
  box-shadow: 0 0 5px gray;
  margin:1vw;
}

#head {
  width: 100%;
  overflow: hidden;
  height: 100%;
  background-color:black;
  color:white;
  padding-bottom: 25px;
  box-shadow: 0 0 20px black;
  position: relative;
}

#imageleft {
  float: left;
  width: 30vh;
  height: 30vh;
  margin-right: 6vh;
  margin-bottom: 40px;
  margin-top: 15px;
  padding: 5px;
}

#imageleft img {
  width: 100%;
  height: 100%;
  border: 4px solid white;
  border-radius: 100%;
  object-fit: cover;
}

#description {
 float: left;
  width: auto; 
  max-height: auto;
  font-size: 20px;
}

h1 {
    font-family: 'Lalezar', cursive;
    font-size: 60px;
    margin:20px;
    margin-bottom:0;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.container {
  width: 99%;
  margin: 2rem auto; 
}

.gallery {
  grid-area: auto;
  grid-column-start: auto;
  grid-template-columns: repeat(40px 4fr 2fr;);
  grid-template-rows: repeat(40px 4fr 2fr;);
  grid-gap: 1.5rem; 
}

.gallery__img {
  width: 350px;
  height: 350px;
  object-fit: cover;
}

.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin: 5px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #6a6b6d;
  color: white;
}

.fa-twitter {
  background: #6a6b6d;
  color: white;
}

.fa-tumblr {
  background: #6a6b6d;
  color: white;
}

.fa-instagram {
  background: #6a6b6d;
  color: white;
}

.fa-youtube {
  background: #6a6b6d;
  color: white;
}