Skip to content

Instantly share code, notes, and snippets.

@tengiao

tengiao/about.html

Created March 19, 2018 22:45
Show Gist options
  • Save tengiao/e102846c2e4d1468d7c0448c382fd46c to your computer and use it in GitHub Desktop.
Save tengiao/e102846c2e4d1468d7c0448c382fd46c to your computer and use it in GitHub Desktop.
Download ZIP
CareerFoundry1_5_StylingFonts&Colors
Raw
about.html
<!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">
<title>About Me</title>
<!-- Normalize.css unused due to use of Bootstrap -->
<link rel="stylesheet" href="css/normalize.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="css/about_styles.css">
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="bg">
<div class="header">
<h1>#About Me</h1>
</div><!-- end header -->
<div class="intro-title">
<h2># Introduction</h2>
</div><!-- end intro-title -->
<div class="intro">
<p>Unfortunately I don't make cat videos.<br>But I do build beautiful websites and have an arsenal of design skills to achieve the vision and feel that you'd like your online presence to convey to your customers, readers or fans.</p>
</div><!-- end intro -->
<div class="skills-title">
<h2># My Skills</h2>
</div><!-- end skills-title -->
<div class="skills">
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Ruby on Rails</li>
<li>Unix/Bash Shell</li>
<li>Perl</li>
</ul>
</div><!-- end skills -->
<div class="nav_container">
<div class="portfolio_nav column">
<a href="index.html" target="_blank">
<h4>#Portfolio</h4>
</a>
</div><!-- end portfolio_nav -->
<div class="about_nav column">
<h4>#About Me</h4>
</div><!-- end about_nav -->
<div class="contact_nav column">
<a href="contact.html" target="_blank">
<h4>#Contact Me</h4>
</a>
</div><!-- end contact_nav -->
</div><!-- end nav_container -->
</div><!-- end bg -->
<div class="main-text">
<h5>My Story</h5>
<p>When I was a kid, I wondered if a person can be many things in one life time: from a pauper to a prince to a monk. It turns out to be an unintended self-fulfilling prophecy. I have gone through several roles, from being an engineer, to a music teacher, a college lecturer, an audiovisual artist. I finally figured out what I enjoy doing best: to be creative and to create stuffs! So here I am, learning web development and hoping to create beautiful web applications every single day!</p>
<p>More needs to be said about myself here in order to demonstrate that I know how to work CSS positioning. The experiment is to have my personal photo follow the readers as they scroll down this About Me page. This is really difficult as I try to add to the length of this paragraph just to achieve enough material to make the readers scroll.</p>
<p>Perhaps the alternative is to increase the size of the font used here but then I realise the same could be achieved if readers would zoom in real close but have to contend with reading filler texts which do not really relay much information about myself. Verbose is probably the correct word here.</p>
<p>All that I can be sure of is how I view my own page on my 15 inch MacBook Pro. By the end of this sentence, I would have sufficient text material to make me having to scroll down a bit to have a glance at the whole of this About Me page.</p>
<p>If you have read through this far, you should know that this is, unfortunately, still insufficient text for me to scroll down far enough such that I could see my photo overlap with the text. But right now, I should reiterate what I wanted to show you, the reader, is that I have learned how to deploy "fixed" positioning for an HTML element.</p>
<p>In this case, the fixed position HTML element would be my photo image element. By this time, you would have noticed that regardless of where you are on this page, my photo image stays exactly at the same spot in relation to the browser window. It is spooky, I know, to have my face following you while you stalk me on my own webpage. I guess it is only a matter of tit-for-tat. Or, you could actually compare my portrait here to the eternal gaze of Leonardo Da Vinci's Mona Lisa. Or, if it helps, just look at the cat in the photo. Her name is Violet, by the way. Isn't she lovely?</p>
<p>How do you like the way it looks? Or rather, the way "I" am looking at you as you try to read the part of the text obscured by part of my legs? Those are my favourite pants, by the way. They are corduray, and I got them during that period of my life when I'm obsessed with wearing green!</p>
<p>Don't try this at home folks! Neither the green pants nor having you profile picture as a fixed position element!</p>
</div><!-- end main-text -->
</body>
</html>
Raw
about_styles.css
/* * { box-sizing: border-box;} */
body,
html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../img/MeAtBeaudry.jpg");
/* Full height */
height: 95%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.header h1 {
font-size: 3em;
color: #000;
text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
/* Green */
background-color: #00A36C;
/* Yellow */
/* background-color: #FFCC33; */
margin: 0;
padding: 10px 15px 10px 10px;
width: 230px;
}
.intro-title h2,
.skills-title h2 {
text-align: center;
/* text-transform: uppercase; */
font-size: 2.5em;
font-weight: 500;
padding: 0 0;
margin: 0 0;
color: #8FBFE0;
}
.intro-title {
background-color: #000;
padding: 7px 15px 9px 15px;
margin-right: 1180px;
margin-top: 40px;
}
.intro {
/* background-color: #000; */
padding: 5px 15px 5px 30px;
margin-right: 1180px;
margin-top: 0px;
}
.intro,
.skills {
/* color: #000; */
background-color: rgba(0, 163, 108, 0.8); /*00A36C*/
-webkit-margin-before: 0;
}
.intro p {
font-size: 1.5em;
}
.skills-title {
background-color: #000;
padding: 7px 15px 9px 15px;
margin-right: 120px;
margin-left: 1280px;
margin-top: 0px;
margin-bottom: 0;
}
.skills {
/* background-color: #000; */
padding:20px 15px 5px 15px;
margin-top: 0;
margin-right: 120px;
margin-left: 1280px;
}
#skill-list {
margin-top: 0;
margin-left: 10px;
font-size: 2.0em;
font-weight: 1000;
color: #000;
}
/* Navigator Texts */
h4 {
font-size: 2em;
font-weight: 100;
color: #000;
/* background-color: #ABC8C0; */
background-color: rgba(171, 200, 192, 0.7);
text-align: center;
margin: 0 0;
}
.nav_container {
margin: 0 auto;
width: 100%;
position: absolute;
top: 880px;
}
.column {
display: inline-block;
float: left;
width: 33.33333333333333%;
}
.main-text {
padding-top: 10px;
margin: 0 10% 5% 10%;
position: relative;
top: 20px;
}
.main-text h5 {
font-size: 2.5em;
-webkit-margin-before: 15px;
-webkit-margin-after: 0;
}
.main-text p {
font-size: 1em;
}
/* Typography */
h1 {
font-family: "Oleo Script", Helvetica, sans-serif;
}
h2,
h3,
h5,
#skill-list {
font-family: "Oswald", sans-serif;
}
h4 {
font-family: "Monofett", cursive;
}
p {
font-family: "Roboto", sans-serif;
}
Raw
contact.html
<!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">
<title>Contact Me</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9] -->
<!-- <script src="dist/html5shiv.js"></script> -->
<!-- [endif] -->
</head>
<body>
<div class="bg">
<div class="header">
<h1>#Contact Me</h1>
</div><!-- end header -->
<div class="blurb">
<h2>Thank you for visiting my page.<br>
For further information or enquiries, please feel free to drop me a line or phone during business hours.<br>
I am happy to entertain enquiries from outside New Zealand and Australia.<br>
Such enquiries are best conducted via email and I shall try my very best to reply within one business day.<br>
</h2>
</div><!-- end blurb-->
<div class="contact_info">
<h3>
<p>Email: ernest_webdev@gmail.com<br>
Phone: +64 204 4848 1628
</p>
</h3>
</div><!-- end contact_info-->
<div class="nav_container">
<div class="portfolio_nav column">
<a href="index.html" target="_blank">
<h4>#Portfolio</h4>
</a>
</div><!-- end portfolio_nav -->
<div class="about_nav column">
<a href="about.html" target="_blank">
<h4>#About Me</h4>
</a>
</div><!-- end about_nav -->
<div class="contact_nav column">
<h4>#Contact Me</h4>
</div><!-- end contact_nav -->
</div><!-- end nav_container -->
</div><!-- end bg -->
</body>
</html>
Raw
contact_styles.css
body,
html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../img/OttawaMuseum.jpg");
/* Full height */
height: 95%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
font-family: "Oleo Script", Helvetica, sans-serif;
font-size: 3em;
color: #000;
text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
background-color: #F45B69;
margin: 0;
padding: 10px 15px 10px 10px;
width: 250px;
}
h2 {
font-family: "Oswald", sans-serif;
font-size: 1.7em;
font-weight: 200;
color: #8FBFE0;
background-color: #000;
padding: 15px 15px 30px 15px;
margin-left: 600px;
}
h3 {
font-family: "Zilla Slab Highlight", cursive;
font-size: 3em;
font-weight: 100;
/* background-color: #5AD4C2; */
color: #000;
margin-top: 15px;
padding: 0 15px 15px 15px;
position: relative;
left: 20px;
}
h4 {
font-family: "Monofett", cursive;
font-size: 2em;
font-weight: 100;
color: #000;
/* background-color: #ABC8C0; */
background-color: rgba(171, 200, 192, 0.4);
text-align: center;
margin: 0 0;
}
.contact_info p {
line-height: 1.3;
margin: 0;
}
.column {
display: inline-block;
float: left;
width: 33.33333333333333%;
}
.nav_container {
margin: 0 auto;
width: 100%;
position: absolute;
top: 880px;
}
Raw
index.html
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Ernest's Portfolio</title>
<!-- Bootstrap core CSS -->
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="bg">
<div class="header">
<h1>#Ernest's Portfolio</h1>
</div><!-- end header -->
<div class="blurb">
<h2>This is the professional portfolio page for Ernest. <br> This is the space to watch as Ernest goes through the process of training to be a full-fledged web developer within 6 months beginning on Feb 26, 2018! </h2>
</div><!-- blurb -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<div class="title-container">
<h3># Portfolio Concept</h3>
</div><!-- end title-container -->
<div class="col-body">
<p>I envision my portfolio to highlight my skills and abilities as a full stack developer who is able to deliver commercial websites that cater for an ever-expanding customer base and robust business transactions.</p>
<p>Ideas currently brewing in my mind include a website for New Zealand's used and valuable book trade (which is also a place for book collectors and readers who are interested in buying and selling books), a subscription-based music theory education platform, and an air ticket swapping platform.</p>
<p>My professional experience is wide and varied. I have worked in the semiconductor design industry, done brief research work on Software Defined Networking, lectured in electronic engineering and maths, and also composed acoustic/electronic experimental music and audiovisual works.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end col-body -->
</div><!-- /col -->
<div class="col-md-4">
<div class="title-container">
<h3># Project Goals</h3>
</div><!-- end title-container -->
<div class="col-body">
<p>My goal is to complete all CareerFoundry Web Development course projects within 4 months. That amounts to approximately 7 to 8 Achievements in total, 2 Achievements per month, 22 Exercises per month, which comes to 1 exercise completion per day. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end col-body -->
</div><!-- /col -->
<div class="col-md-4">
<div class="title-container">
<h3># Course Goals</h3>
</div><!-- end title-container -->
<div class="col-body">
<p>Even though my previous work experience has equipped me with plenty of transferrable professional skills, taking this course would be my first step to breaking into a new career as a software developer. </p>
<p>It would be highly valuable to gain experience as an entry level developer and then move on to becoming a freelancer.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end col-body -->
</div><!-- /col -->
</div><!-- /row -->
<!-- <hr> -->
</div> <!-- /container -->
<div class="nav_container">
<div class="portfolio_nav column">
<h4>#Portfolio</h4>
</div><!-- end portfolio_nav -->
<div class="about_nav column">
<a href="about.html" target="_blank">
<h4>#About Me</h4>
</a>
</div><!-- end about_nav -->
<div class="contact_nav column">
<a href="contact.html" target="_blank">
<h4>#Contact Me</h4>
</a>
</div><!-- end contact_nav -->
</div><!-- end nav_container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- Bootstrap core JS -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
/* * { box-sizing: border-box;} */
body,
html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../img/AntiqueToySwing.jpg");
/* Full height */
height: 95%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.header h1 {
font-size: 3.5em;
font-weight: 800;
color: #000;
text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
/* Blue */
/* background-color: #0075F2; */
/* Green-Blue */
background-color: #0FA4B0;
margin: 0;
padding: 10px 15px 15px 10px;
width: 380px;
}
h2 {
font-size: 2em;
font-weight: 200;
color: #8FBFE0;
background-color: #000;
padding: 15px 15px 30px 15px;
margin-left: 700px;
margin-bottom: 20px;
}
.title-container {
background-color: #000;
}
h3 {
font-size: 2em;
color: #8FBFE0;
text-align: center;
padding: 5px 0 7px 0;
margin-bottom: 0;
}
.col-body {
background-color: rgba(129, 174, 157, 0.5); /*81AE9D*/
}
.col-body p {
color: #000;
padding: 15px 15px 0 15px;
}
/* Navigator Texts */
h4 {
font-size: 2.3em;
font-weight: 100;
color: #000;
/* background-color: #ABC8C0; */
background-color: rgba(171, 200, 192, 0.7);
text-align: center;
margin: 0 0;
}
.nav_container {
margin: 0 auto;
width: 100%;
position: absolute;
top: 880px;
}
.column {
display: inline-block;
float: left;
width: 33.33333333333333%;
}
/* Typography */
h1 {
font-family: "Oleo Script", Helvetica, sans-serif;
}
h2,
h3 {
font-family: "Oswald", sans-serif;
}
h4 {
font-family: "Monofett", cursive;
}
p {
font-family: "Roboto", sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment