Skip to content

Instantly share code, notes, and snippets.

@davidshare
Last active March 16, 2022 15:49
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save davidshare/ee1d59fe2ceb3f0928d55a4b6104b490 to your computer and use it in GitHub Desktop.
Edward speak boot camp first task
@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;
}
<!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