Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home & about pages complete #140

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Home & about pages complete #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ea051a2
basic index.html & beginning styles.css
stevenvz Aug 26, 2017
df93521
everything but the nav form
stevenvz Aug 26, 2017
be00fc2
homepage finished
stevenvz Aug 26, 2017
ef25921
added full responsiveness to homepage
stevenvz Aug 26, 2017
4df0f64
further homepage responsiveness enhancements & creation of about page
stevenvz Aug 26, 2017
a95ff63
finished about page nav bar
stevenvz Aug 27, 2017
b9896ed
about page header with images & responsiveness complete
stevenvz Aug 27, 2017
12403a7
about page header navbar complete
stevenvz Aug 27, 2017
379de77
finished about page about section header bar
stevenvz Aug 27, 2017
d4836c8
home & about pages finished
stevenvz Aug 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@ prep_facebook_pages
===================

[This is an HTML and CSS project from the Viking Code School Prep Work](http://www.vikingcodeschool.com/web-markup-and-coding/let-s-build-facebook).


Steven Zarrella
132 changes: 132 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="/styles.css">

<title>Facelook</title>

</head>

<body class="body-defaults">

<nav id="about-nav">
<div id="logo-name">
<img id="nav-logo" src="/images/f.png" alt="logo">
<h1>Facelook</h1>
</div>
<input id="search-box" type="text" placeholder="Search for Users">
<p id="nav-name">Harry</p>
</nav>

<header class="profile-header">
<img id="profile-background" src="/images/japaneselandscape.jpg" alt="Profile Background">

<div class="profile-image-box">
<img id="profile-image" src="/images/ninja.jpg" alt="Profile Image">
<h1 id="profile-name">Harry Potter</h1>
</div>



</header>

<div class="header-navbar">
<div id="empty-header-box"></div>
<div class="header-link">
<a class="header-text" href="">Timeline</a>
</div>
<div class="header-link">
<a class="header-text" href="">About</a>
</div>
<div class="header-link">
<a class="header-text" href="">Photos</a>
</div>
<div class="header-link">
<a class="header-text" href="">Friends</a>
</div>
<div class="header-edit">
<a class="edit-text" href="">Edit Profile</a>
</div>
</div>


<main class="profile-content">

<div id="about-header">
<div class="about-header-box">
<div> </div>
</div>
<div class="about-header-box">
<h2>About</h2>
</div>
<div class="about-header-box-button">
<input id="edit-button" type="button" value="Edit your Profile">
</div>
</div>

<div class="about-box">
<div class="about-box-half-1">
<section class="content-section">
<h2>Basic Information</h2>
<table id="basic-info-table">
<tr>
<th>Birthday:</th>
<td>13/13/2000</td>
</tr>
<tr>
<th>College:</th>
<td>Hogwart's U</td>
</tr>
<tr>
<th>Hometown:</th>
<td>Godrick's Hollow, England</td>
</tr>
<tr>
<th>Currently Lives:</th>
<td>The Ether</td>
</tr>
</table>

</section>

<section class="content-section">
<h2>Contact Information</h2>
<table id="contact-info-table">
<tr>
<th>Email:</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555-123-4567</td>
</tr>
</table>
</section>
</div>

<div class="about-box-half-2">
<section class="content-section">
<h2>Words to Live By</h2>
<p>Copper mug tumeric shaman wolf. Health goth taxidermy narwhal cray pork belly snackwave.</p>

</section>

<section class="content-section">
<h2>About Me</h2>
<p>Try-hard single-origin coffee cray godard vaporware cornhole hashtag poutine twee mumblecore. Heirloom vaporware chicharrones 8-bit waistcoat. Actually dreamcatcher vegan scenester hot chicken mixtape photo booth. Tumblr mixtape quinoa, tbh ramps shoreditch vice hell of. Jean shorts deep v live-edge, vexillologist church-key offal helvetica celiac franzen. Pop-up man bun jianbing mlkshk, forage 3 wolf moon paleo meh green juice pickled.</p>

</section>
</div>
</div>

</main>



</body>

</html>
57 changes: 57 additions & 0 deletions images/bassClef.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/f.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/japaneselandscape.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ninja.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 192 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="/styles.css">

<title>Facelook</title>

</head>

<body class="body-defaults">

<nav id="home-nav">
<h1>Facelook</h1>
<div class="nav-form">
<form id="login-form">
<table id="login-table">
<tr>
<td>Email</td>
<td>Password</td>
</tr>
<tr>
<td><input class="login-field" type="text" name="loginEmail"></td>
<td><input class="login-field" type="text" name="loginPassword"></td>
<td><input class="login-button" type="button" value="Log In"></td>
</tr>
</table>

</form>
</div>

</nav>

<main class="main-container">

<section class="main-info">
<h2 class="sub-heading">Connect with all your friends!</h2>
<ul>
<li>See photos and updates in your news feed</li>
<li>Post your status for the world to see from your profile</li>
<li>Wubba lubba dubb dubb</li>
<li>Like things because you're a positive person!</li>
</ul>

</section>

<section class="signup-section">
<h2 class="sub-heading">Sign Up</h2>
<form id="signup-form" name="signupInfo">
<div class="text-fields">
<input class="signup-text-field-name" type="text" name="firstName" placeholder="First Name">
<input class="signup-text-field-name" type="text" name="lastName" placeholder="Last Name"><br>
<input class="signup-text-field" type="email" name="emailAddress" placeholder="Your Email"><br>
<input class="signup-text-field" type="password" name="password" placeholder="Your New Password"><br>
<input class="signup-text-field" type="password" name="confirmPassword" placeholder="Confirm Your Password"><br>
</div>

<h3 class="sub-heading">Birthday</h3>
<div class="birthday-selects">
<select name="birthdayMonth">
<option> - Month - </option>
<option value=1>January</option>
<option value=2>February</option>
<option value=3>March</option>
<option value=4>April</option>
<option value=5>May</option>
<option value=6>June</option>
<option value=7>July</option>
<option value=8>August</option>
<option value=9>Snortag</option>
<option value=10>October</option>
<option value=11>November</option>
<option value=12>December</option>
</select>

<select name="birthdayDay">
<option> - Day - </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

<select name="DOBYear">
<option> - Year - </option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="2063">2063</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>

</select>
</div>

<br>
<div class="gender-radios">
<div>
<input type="radio" name="gender" value="male" checked> Male
</div>
<div>
<input type="radio" name="gender" value="female"> Female
</div>
<div>
<input type="radio" name="gender" value="other"> Other/No Answer
</div>
<br><br>
</div>

<input class="submit-button" type="button" value="Sign Up!">

</form>

</section>

</main>


</body>

</html>
Loading