Uploaded the project

css/animations.css

@@ -0,0 +1,9 @@
+@keyframes avatar-picture-fadein {
+  from { margin-top: 0%; opacity: 0;}
+  to { margin-top: 1%; opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from { opacity: 0;}
+  to { opacity: 1;}
+}

css/style.css

@@ -0,0 +1,127 @@
+/* Global Secion */
+body {
+  background: #233142;
+}
+
+a {
+  text-decoration: none;
+}
+
+.align-center {
+  text-align: center;
+  align: center;
+}
+/* Avatar Secion */
+.avatar {
+  text-align: center;
+  margin-top: 5%;
+}
+
+.avatar-img {
+  width: 200px;
+  height: auto;
+  border-radius: 50%;
+  margin-top: 1%;
+  animation-name: avatar-picture-fadein;
+  animation-duration: 1.5s;
+}
+
+.avatar-text {
+  color: #7996b9;
+  font-family: 'Trebuchet MS', sans-serif;
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+}
+
+.avatar-subtext {
+  color: #7996b9;
+  font-family: 'Trebuchet MS', sans-serif;
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+}
+
+/* links Secion */
+.links {
+  text-align: center;
+  margin-top: -2%;
+}
+
+.block {
+  display: inline-block;
+  vertical-align: top;
+  padding: 5%;
+  font-size: 38px;
+  color: #bfbfbf;
+  max-width: 14%;
+  opacity: 0;
+}
+
+ @media only screen and (max-width: 967px) {
+   .block {
+     display: block;
+     text-align: center;
+     transform: translate(50%, 3%);
+     max-width: 40%;
+   }
+ }
+
+.block-subtext {
+  font-size: 0.5em;
+  color: #7996b9;
+  font-family: 'Trebuchet MS', sans-serif;
+}
+
+.block-1{
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+  animation-delay: 0.2s;
+  animation-fill-mode:forwards;
+}
+
+.block-2{
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+  animation-delay: 0.5s;
+  animation-fill-mode:forwards;
+}
+
+.block-3 {
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+  animation-delay: 0.8s;
+  animation-fill-mode:forwards;
+}
+
+.button {
+  border: 0;
+  background: #354a64;
+  color: #bfbfbf;
+  width: 110px;
+  height: 40px;
+  margin: 20px auto;
+  border-radius: 5px;
+  display: block;
+  text-decoration: none;
+  text-align: center;
+  font-family: 'Trebuchet MS', sans-serif;
+  font-size: 0.6em;
+  transition-duration: 0.4s;
+}
+
+.button:hover {
+  background-color: #006080;
+}
+
+/* Footer section */
+.footer {
+  text-align: center;
+  margin-top: -2%;
+  color: #7996b9;
+  font-family: 'Trebuchet MS', sans-serif;
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+}
+
+.footer-heart {
+  color: red;
+}