Skip to content

Instantly share code, notes, and snippets.

@marsikeda

marsikeda/Mgtei's Portfolio.markdown

Created July 6, 2016 00:20
Show Gist options
  • Save marsikeda/bf877cb09a500c2db4eb37047c83cad1 to your computer and use it in GitHub Desktop.
Save marsikeda/bf877cb09a500c2db4eb37047c83cad1 to your computer and use it in GitHub Desktop.
Download ZIP
Mgtei's Portfolio
Raw
index.html
<head>
<script src="https://use.fontawesome.com/9b2ee2985c.js"></script>
</head>
<body>
<a NAME="home"></a>
<!-- This is the header -->
<h1>Margaret E. Ikeda <small>Illustrator & Web Developer</small></h1>
<h2>@Mgtei <small>pronounced "MEHG-tay"</small></h2>
<!-- End of header -->
<!-- About section, with link to Facebook Profile Pic -->
<a NAME="about"></a>
<div class="w3-row">
<div class="w3-col m4 l3">
<img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/13466494_10210196838225401_6057970544978985308_n.jpg?oh=8bac3c8977a4b7524f7b393a3c0fe4a0&oe=58314C36" class="header-img" alt="Half-Japanese woman's face smiling. She is wearing green glasses and a silver necklace.">
</div>
<div class="w3-col m8 l9">
<p class="topPara">Trained in illustration and self-taught in web design and development, Mgtei approaches her projects with an artistic and open mind. There's always more to learn and another perspective to consider...</p>
<p><small>...except when it comes to the number of spaces after a period: it's just the one, y'all.</small></p>
<a id="sm-btn-1" href="https://www.linkedin.com/in/mgtei" target="_blank"><i class="fa fa-linkedin"></i></a>
<a id="sm-btn-2" href="https://www.github.com/Mgtei"><i class="fa fa-github"></i></a>
<a id="sm-btn-3" href="https://www.Twitter.com/Mgtei"><i class="fa fa-twitter"></i></a>
<a id="sm-btn-4" href="https://www.instagram.com/Mgtei"><i class="fa fa-instagram"></i></a>
</div>
</div>
<!-- End of About section -->
<hr class="style2"></hr>
<!-- Start of Portfolio section -->
<A NAME="portfolio"></a>
<section class="bg-dark">
<!-- Gotham Book Mart site -->
<a id="ptf1" href="https://codepen.io/Mgtei/pen/vKmooA/"><img src="http://hmp.me/vmg" class="ptf-image"></a>
<!-- Works in Progress -->
<a id="ptf3" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
<a id="ptf4" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
<a id="ptf5" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
<a id="ptf6" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
<a id="ptf7" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
<a id="ptf8" href="#"><img src="http://hmp.me/vmh" class="ptf-image"></a>
</section>
<hr class="style2"></hr>
<!-- End of portfolio section -->
<A NAME="colophon"></a>
<footer class="footer">
<h3>Colophon</h3>
<p>This site is typeset in <a href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a> (headers) and <a href="https://fonts.google.com/specimen/Raleway">Raleway</a> (body), both courtesy of <a href="https://fonts.google.com/">Google Fonts</a>. It was built using HTML and CSS as an exercise for <a href="https://www.freecodecamp.com/">FreeCodeCamp.</a></p>
</footer>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#colophon">Colophon</a></li>
</ul>
</body>
Raw
style.css
body {
background: lightgray; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(lightgray, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(lightgray, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(lightgray, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(lightgray, white); /* Standard syntax */
}
h1 {
font-family: Comfortaa, "Times New Roman", Times, serif;
margin: 75px 25px 0px 25px;
border-left: 6px solid green;
background: lightblue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, lightgray, lightblue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, lightgray, lightblue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, lightgray, lightblue); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, lightgray, lightblue); /* Standard syntax */ padding: 10px 5px 5px 15px;
}
h2 {
font-family: Comfortaa, "Times New Roman", Times, serif;
font-size: 28px;
margin: 0px 25px 10px 25px;
border-left: 6px solid orange;
background: lightblue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, lightgray, lightblue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, lightgray, lightblue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, lightgray, lightblue); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, lightgray, lightblue); /* Standard syntax */
padding: 0px 5px 10px 15px;
display: block;
color: black;
}
h3{
font-family: Comfortaa, "Times New Roman", Times, serif;
margin: 25px 0px 0px 25px;
}
p {
font-family: Raleway, "Times New Roman", Times, serif;
font-size: 22px;
margin: 25px 25px 25px 25px;
}
.topPara {
margin: 50px 50px 25px 25px;
}
img {
}
.header-img {
width: 250px;
border-radius: 50%;
float: left;
margin: 25px;
}
#sm-btn-1{ /*Social media buttons 1-4*/
background-color: white;
color: black;
border: 5px solid lightblue;
border-radius: 50%;
padding: 0px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
}
#sm-btn-1:hover {/*Shadow on hover for social media link buttons*/
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#sm-btn-2{
background-color: white;
color: black;
border: 5px solid lightblue;
border-radius: 50%;
padding: 0px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
}
#sm-btn-2:hover {/*Shadow on hover for social media link buttons*/
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#sm-btn-3{
background-color: white;
color: black;
border: 5px solid lightblue;
border-radius: 50%;
padding: 0px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
}
#sm-btn-3:hover {/*Shadow on hover for social media link buttons*/
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#sm-btn-4{
background-color: white;
color: black;
border: 5px solid lightblue;
border-radius: 50%;
padding: 0px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
}
#sm-btn-4:hover {/*Shadow on hover for social media link buttons*/
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
a:link, a:visited {
color: green;
text-decoration: none;
}
a:hover, a:active {
background-color: green;
color: white;
}
hr.style2 { /*horizontal rule double line*/
border-top: 3px double orange;
clear: both;
margin: 0px;
}
.green-text { /*for test on dark background*/
color: green;
}
.bg-dark {
background-image: url("http://hmp.me/vlx")
}
#ptf1, pft2, pft3, pft4, pft5, pft6, pft7 {
margin: 25px;
}
.ptf-image {
width: 400px;
margin: 50px;
}
.footer {
clear: both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightgray;
color: black;
position: fixed;
top: 0;
width: 100%;
font-family: Raleway, "Times New Roman", Times, serif;
font-size: 18px;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
li a:hover {
background-color: green;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<link href="https://use.fontawesome.com/9b2ee2985c.js" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment