Skip to content

Instantly share code, notes, and snippets.

@eunicekokor
Created February 2, 2014 22:59
  • 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 eunicekokor/8776282 to your computer and use it in GitHub Desktop.
body {
background: url("http://imgur.com/lJhb8ek.png");
text-align: center;
margin:0;
padding: 0;
}
div {
padding: 10px;
}
#section1 {
background: rgba(114, 121, 216, 1);
}
#section2 {
background: rgba(92, 181, 136, 1);
}
#section3 {
background: rgba(255, 192, 115, 1);
}
ul {
font-family: 'Roboto Slab', serif;
background: rgba(255,255,255, 0.5);
padding: 3;
margin: auto;
}
li {
padding: 10px 10px 0px 15px;
display: inline-block;
border-radius: 20px;
text-align: center;
}
header {
text-align: center;
background-size: cover;
border-radius: 20px;
}
@media (max-width: 500px) {
h1 {
font-size: 36px;
}
li {
display: block;
padding: 5px;
}
}
.profile {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 5px;
width: 180px;
height: 180px;
line-height: 12px;
border-radius: 90px;
border: 4px solid;
border-color: rgba(255,255,255,0.75);
}
.socialmedia {
display: inline;
max-height: 30px;
}
.work {
display: block;
width: 150px;
height: 150px;
border-radius: 20px;
}
h1 {
font-size: 60px;
font-family: 'Pacifico', cursive;
color: black;
margin-top: -20px;
}
h2 {
font-family: 'Roboto Slab', serif;
font-size: 20px;
padding: 0;
color: gray;
margin-top: -30px;
}
h3 {
font-family: 'Roboto Slab', serif;
font-size: 30px;
margin: 0;
padding: 0;
}
h4 {
font-family: 'Roboto Slab', serif;
font-size: 25px;
}
a:link {
color: #174764;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #5EC4CD;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #174764;
}
p {
font-size: 15px;
margin: 0 auto;
line-height: 28px;
text-align: justify;
font-family: 'Roboto Slab', serif;
max-width: 860px;
}
input {
border: 0;
padding: 10px;
border-radius: 15px;
font-family: 'Roboto Slab', serif;
}
input[id=email]:focus {
background: rgba(255,255,255,1);
font-size: 12.5px;
}
input[id=button] {
background: pink;
color: black;
font-size: 12.5px;
font-family: 'Roboto Slab', serif;
}
input:hover {
background: rgba(255,255,255,0.75);
color: black;
font-style: bold;
}
span {
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<title>eunice kokor</title>
<link rel="shortcut icon" href="favicon.ico"/>
<link href="cool.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<header>
<img class="profile" src="http://sheplusplus.stanford.edu/images/eunicekokor.jpg">
<h1>eunice kokor</h1>
<h2>innovator * aspiring developer * tech lover</h2>
<!--subtle patterns .com -->
<ul>
<li><a href="https://twitter.com/eunicorngal" id-"twitter">
<img class="socialmedia" src="https://g.twimg.com/Twitter_logo_blue.png"></a></li>
<li><a href="http://www.linkedin.com/profile/view?id=260030843" id-"linkedin">
<img class="socialmedia" src="http://jonbennallick.co.uk/wp-content/uploads/2012/11/LinkedIn-Logo-02.png"></a></li>
<li><a href="https://github.com/eunicekokor" id-"github">
<img class="socialmedia" src="https://github.global.ssl.fastly.net/images/modules/logos_page/Octocat.png"></a></li>
<li><h3><a href="#section1">About Me</a></h3></li> <!--Larger/aslargeasimages-->
<li><h3><a href="#section2">Work</a></h3></li>
<li><h3><a href="#section3">Contact</a></h3></li>
</ul>
</header>
<div id="section1"><h4 id="section1">a little about me</h4>
<p>
Eunice plans to major in Computer Science and minor in Earth and Environmental Engineering at Columbia University Fu Foundation School of Engineering and Applied Sciences.
She was born in Akosombo, Ghana and immigrated to America when she was 3 years old.
She's a tech enthusiast and plans to create something awesome this year.
In her spare time, she likes to do yoga, strum her guitar, and get to know peoples' stories.
After her undergraduate studies, she wants to purse an MPA in Development Practice, go on to a doctoral program in Engineering, or do something awesome in the world. Stay tuned.
</p>
</div>
<div id="section2">
<h4 id="section2">some things i've worked on</h4>
<p>
In construction! Click the github icon above to see projects I've worked on/forked!
</p>
<p>
<a href="http://community.planetptc.com/photos/2258"> <strong>Winter 2012 FIRST Robotics Creo CAD</strong> <img class="work" src="http://i.imgur.com/2hJGxjq.jpg"/></a>
</p>
</div>
<div id="section3">
<h4 id="section3">contact me!</h4>
<p>
I created this site from scratch to learn HTML/CSS/Javascript/JQuery using <a href="dash.generalassemb.ly">Dash by General Assembly</a> and <a href="codeacademy.com">Codeacadmy!</a>
</p>
<p>If you have any suggestions, feel free to contact me!</p>
<p>Form In construction!</p>
<br>
<span>
<input type="myemail" id="email" placeholder="Type in your email here!" />
<input type="button" id="button" value="Submit" /> </span>
</div>
<br>
<br>
<p> © Eunice Kokor 2014 </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment