Skip to content

Instantly share code, notes, and snippets.

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(';400;500;600&display=swap');
*::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;
display: flex;
justify-content: center;
font-size: 2rem;
nav a{
padding: 0 1rem;
<!DOCTYPE html>
<html lang="en">
<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="">
<title>David Essien</title>
<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 class="profile-image">
<span class="outer-ring">
<span class="inner-ring">
<!-- <img src="./images/david-essien.png" alt="Profile picture"/> -->
<div class="skills">
<nav class="nav">
<a href=""><i class="uil uil-github"></i></a>
<a href=""><i class="uil uil-facebook"></i></a>
<a href=""><i class="uil uil-linkedin"></i></a>
<a href=""><i class="uil uil-twitter"></i></a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment