/hack-school-session-1.markdown

## hack-school-session-1.markdown

      
    Raw
  

              hack-school-session-1.markdown
            
          
    Hack School Session 1

A Pen by Ky-Cuong Huynh on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hack School Website</title>
    <link rel="stylesheet" type="text/css" href="week2.css"/>
  </head>
  <body>
    <div id="navbar">
      <nav>
        <a href="week2.html">Home</a>
        <a href="corgi.html">Corgi</a>
        <a href="#about">About</a>
        <a href="#interests">Interests</a>
      </nav>
    </div>
    <div id="header">
      <h1>Brandon Liu</h1>
      <img id="prof-pic" src="http://dailybruin.com/images/2014/12/DSCN4316-640x480.jpg">
      <p>Student. Programmer. Taco Enthusiast</p>
      <input type="text" placeholder="Your Email">
      <button>Contact</button>
    </div>
    <div class="container">
      <div class="column" id="about">
        <h2>About Me</h2>
        <p>Hi, my name is Brandon Liu. I'm a 3rd year Computer Science major</p>
        <p>My favorite foods are tacos, burritos, ramen.</p>
        <p>The classes I'm taking this quarter are <span class="cs">CS 180</span>, <span class="cs">CS 143</span>, and JAPAN 50</p>
      </div>
      <div class="column" id="interests">
        <h2>Interests</h2>
        <p>These are some of my hobbies:</p>
        <ul>
          <li>Rock Climbing</li>
          <li>Cooking</li>
          <li>ACM and Chill</li>
        </ul>
        <p>These are some topics in school I enjoy.</p>
        <ol>
          <li>Computer Science</li>
          <li>Math</li>
          <li>Not Physics</li>
        </ol>
      </div>
    </div>
    <div id="footer">
      <a href="https://github.com/bliu23"><img class="logo-img" src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"></a>
    </div>
  </body>
</html>


## style.css
body {
    margin: 0px;
}

#navbar {
    background-color: black;
    text-align: right;
    padding: 10px;
}

#navbar a {
    color: white;
}

h1 {
    font-size: 80px;
    margin: 0px;
}

#header {
    text-align: center;
    background-color: black;
    color: white;
    padding-bottom: 10px;
}

#prof-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.column {
    width: 40%;
    text-align: left;
    border-bottom: 1px solid black;
    margin: 0 auto;
}

#interests p {
    font-weight: bold;
}

.cs {
    color: red;
}

#footer {
    text-align: center;
    margin: 5px;
}

.logo-img {
    width: 40px;
    height: 40px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hack School Website</title>
	<link rel="stylesheet" type="text/css" href="week2.css"/>
	</head>
	<body>
	<div id="navbar">
	<nav>
	<a href="week2.html">Home</a>
	<a href="corgi.html">Corgi</a>
	<a href="#about">About</a>
	<a href="#interests">Interests</a>
	</nav>
	</div>
	<div id="header">
	<h1>Brandon Liu</h1>
	<img id="prof-pic" src="http://dailybruin.com/images/2014/12/DSCN4316-640x480.jpg">
	<p>Student. Programmer. Taco Enthusiast</p>
	<input type="text" placeholder="Your Email">
	<button>Contact</button>
	</div>
	<div class="container">
	<div class="column" id="about">
	<h2>About Me</h2>
	<p>Hi, my name is Brandon Liu. I'm a 3rd year Computer Science major</p>
	<p>My favorite foods are tacos, burritos, ramen.</p>
	<p>The classes I'm taking this quarter are <span class="cs">CS 180</span>, <span class="cs">CS 143</span>, and JAPAN 50</p>
	</div>
	<div class="column" id="interests">
	<h2>Interests</h2>
	<p>These are some of my hobbies:</p>
	<ul>
	<li>Rock Climbing</li>
	<li>Cooking</li>
	<li>ACM and Chill</li>
	</ul>
	<p>These are some topics in school I enjoy.</p>
	<ol>
	<li>Computer Science</li>
	<li>Math</li>
	<li>Not Physics</li>
	</ol>
	</div>
	</div>
	<div id="footer">
	<a href="https://github.com/bliu23"><img class="logo-img" src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"></a>
	</div>
	</body>
	</html>
	body {
	margin: 0px;
	}

	#navbar {
	background-color: black;
	text-align: right;
	padding: 10px;
	}

	#navbar a {
	color: white;
	}

	h1 {
	font-size: 80px;
	margin: 0px;
	}

	#header {
	text-align: center;
	background-color: black;
	color: white;
	padding-bottom: 10px;
	}

	#prof-pic {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	}

	.column {
	width: 40%;
	text-align: left;
	border-bottom: 1px solid black;
	margin: 0 auto;
	}

	#interests p {
	font-weight: bold;
	}

	.cs {
	color: red;
	}

	#footer {
	text-align: center;
	margin: 5px;
	}

	.logo-img {
	width: 40px;
	height: 40px;
	}