Skip to content

Instantly share code, notes, and snippets.

@johnotu
Created August 19, 2017 02:46
Show Gist options
  • Save johnotu/91aef10186efafa9a525a9aaa8e85292 to your computer and use it in GitHub Desktop.
Save johnotu/91aef10186efafa9a525a9aaa8e85292 to your computer and use it in GitHub Desktop.
Simple template for HNG Internship Stage-2 personal page task
.container {
text-align: center;
padding: 1.5em 0;
}
img {
width: 40%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
.links {
padding: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>HNG Internship Profile - [Your name]</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-12 col-sm-8 col-lg-8 offset-sm-2 offset-md-2">
<img class="img-fluid rounded-circle" src="[Your image link]" alt="">
<h1 class="display-4">[Your name]</h1>
<hr>
<p class="lead">[Your bio paragraph]</p>
<p class="lead">[Another bio paragraph (if any)]</p>
<hr>
<div>
<a class="links" href="https://hnginterns.slack.com"><i class="fa fa-slack"></i> [Your Slack name]</a>
<a class="links" href="[Your link to Stage-1]"><i class="fa fa-github"></i> #Stage-1</a>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment