Last active
March 16, 2022 15:49
-
-
Save davidshare/ee1d59fe2ceb3f0928d55a4b6104b490 to your computer and use it in GitHub Desktop.
Edward speak boot camp first task
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); | |
*, | |
*::before, | |
*::after { | |
margin: 0; | |
padding: 0; | |
outline: 0; | |
box-sizing: border-box; | |
text-decoration: none; | |
list-style: none; | |
border: none; | |
} | |
a { | |
color: #fff; | |
} | |
body { | |
font-family: "Poppins", sans-serif; | |
color: #fff; | |
background: hsl(252, 30%, 10%);; | |
overflow-x: hidden; | |
} | |
.main { | |
height: 85vh; | |
width: 100vw; | |
overflow: hidden; | |
display: grid; | |
grid-template-columns: 30vw auto 30vw; | |
} | |
.main .profile-image { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.main .profile-image .outer-ring { | |
width: 40rem; | |
height: 40rem; | |
border: 1px solid #fff; | |
border-radius: 50%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin: auto 1rem; | |
} | |
.main .profile-image .outer-ring .inner-ring { | |
width: 30rem; | |
height: 30rem; | |
border: 2px solid #fff; | |
border-radius: 50%; | |
overflow: hidden; | |
background: url('./images/david-essien.png'); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-color: #fff; | |
} | |
.main .intro, | |
.main .skills { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.main .intro { | |
text-align: right; | |
padding-left: 5rem; | |
} | |
.main .intro h1 { | |
font-size: 6rem; | |
} | |
.main h2 { | |
font-size: 2rem; | |
margin-bottom: 1rem; | |
} | |
nav{ | |
display: flex; | |
justify-content: center; | |
font-size: 2rem; | |
} | |
nav a{ | |
padding: 0 1rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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="./index.css"> | |
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css"> | |
<title>David Essien</title> | |
</head> | |
<body> | |
<main class="main"> | |
<div class="intro"> | |
<h1 class="greeting">Hello</h1> | |
<h2><span>I am</span> David Essien</h2> | |
<p class="short-intro">A Christian, Husband, Father, DevOps Engineer, Lover of music, and advocate for entrepreneural philantrophy.</p> | |
</div> | |
<div class="profile-image"> | |
<span class="outer-ring"> | |
<span class="inner-ring"> | |
<!-- <img src="./images/david-essien.png" alt="Profile picture"/> --> | |
</span> | |
</span> | |
</div> | |
<div class="skills"> | |
<h2>Skills</h2> | |
<ul> | |
<li>HTML</li> | |
<li>CSS</li> | |
<li>Kubernetes</li> | |
<li>Terraform</li> | |
<li>AWS</li> | |
<li>GCP</li> | |
<li>Digitalocean</li> | |
</ul> | |
</div> | |
</main> | |
<nav class="nav"> | |
<a href="https://github.com/davidshare"><i class="uil uil-github"></i></a> | |
<a href="https://facebook.com/davidshare2"><i class="uil uil-facebook"></i></a> | |
<a href="https://www.linkedin.com/in/david-essien-share/"><i class="uil uil-linkedin"></i></a> | |
<a href="https://twitter.com/davidshare_"><i class="uil uil-twitter"></i></a> | |
</nav> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment