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

Creation of facebook webpage by Dave (Steven) Li #138

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

Creation of facebook webpage by Dave (Steven) Li #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3001e4
added the very top structure of the html doc
Aug 19, 2017
7f69eb7
made the body fill the browser
Aug 19, 2017
ef623a4
laid out the barebones of the header
Aug 19, 2017
d63b600
created the home page
Aug 22, 2017
99ddcab
reorganized the repo
Aug 22, 2017
e19a45f
created the about page
Aug 23, 2017
028f83f
fixed the profile pic not positioning according to the first nav bar
Aug 23, 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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added about/.DS_Store
View file
Open in desktop
Binary file not shown.
47 changes: 47 additions & 0 deletions about/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
body, html {
margin: 0;
}

* {
box-sizing: border-box;
}

.blue {
background-color: blue;
}

.gray {
background-color: gray;
}

.yellow {
background-color: yellow;
}

/* adding some padding to the left and right units */

.l-box {
padding: 1em;
}

.flex {
display: flex;
flex-wrap: wrap;;
}

table, th, td {
border: none;
}

.border {
border-style: solid;
border-width: 1.5px;
}

.relative {
position: relative;
}

#error {
display: none;
}
109 changes: 109 additions & 0 deletions about/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Page</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="about.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--making the facelook header-->
<header class="blue" style="background-color: #216DEC;">
<div class="pure-g">
<div class="pure-u-1-5"><p style="margin-left: 5.3vw; font-size: 28px; margin-bottom: 0; margin-top: 1.5vh;">Facelook</p></div>
<div class="pure-u-3-5"><p>
<form class="" action="index.html" method="post">
<input type="text" name="" value="Search for users" style="width:55vw;">
</form>
</p></div>
<div class="pure-u-1-5"><p style="margin-left: 11.7vw; margin-top: 2.7vh;">Harry</p></div>
</div>
</header>
<!--making the large image-->
<div style="width:90vw; height:20vw; background-color:white; margin: 0 auto; overflow: hidden;" class="image border">
</div>
<!--making the nav elements-->
<div style="width:90vw; height:7vh; background-color:#d8d8d8; margin: 0 auto;"class="nav-bar">
<div class="pure-g">
<div class="pure-u-5-24 border relative"><img src="http://rebuildingshatteredlives.org/inc/img/defaultavatar.jpg" alt="profile" style="height: 170px; width: 170px; margin: 0 auto; overflow: hidden; position: absolute; top: -18vh; left: 3vw; right: 3vw;"></div> <!-- + harry potter (use relative or absolute positioning) -->
<div class="pure-u-3-24 border" style="border-left: none;"><p style="text-align: center;">Timeline</p></div>
<div class="pure-u-3-24 border" style="border-left: none;"><p style="text-align: center;">About</p></div>
<div class="pure-u-3-24 border" style="border-left: none;"><p style="text-align: center;">Photos</p></div>
<div class="pure-u-4-24 border" style="border-left: none;"><p style="text-align: center;">Friends</p></div>
<div class="pure-u-6-24 border" style="border-left: none;"><p style="text-align:right; margin-right: 2vw;">Edit Profile</p></div>
</div>
</div>
<!--making the about headline-->
<div style="width:90vw; height:10vh; background-color: #d8d8d8; margin: 0 auto; margin-top: 2vh;" class="about">
<div class="pure-g">
<div class="pure-u-20-24"><div style="text-align:center; margin-left: 10vw;"><h1>About</h1></div></div>
<div class="pure-u-4-24"><p style="text-align:right; margin-right: 1vw; margin-top:3vh;"><a class="pure-button" href="#">Edit Your Profile</a></p></div>
</div>
</div>
<!--making the basic information-->
<div style="width:89.6vw; background-color:white; margin: 0 auto; border: solid;"class="about-details">
<div class="pure-g">
<div class="pure-u-11-24"><p>
<div style="margin-left: 2vw;">
<h1 style="display:block;">Basic Information</h1>
<table cellpadding="10">
<tr>
<td style="padding: 10px"><b>Birthday:</b></td>
<td style="padding: 10px">July 31st, 1980</td>
</tr>
<tr>
<td style="padding: 10px"><b>College:</b></td>
<td style="padding: 10px">Hogwarts College</td>
</tr>
<tr>
<td style="padding: 10px"><b>Hometown:</b></td>
<td style="padding: 10px">Godrick's Hollow, England</td>
</tr>
<tr>
<td style="padding: 10px"><b>Currently Lives:</b></td>
<td style="padding: 10px">Godrick's Hollow, England</td>
</tr>
</table>
<h1 style="display:block">Contact Information</h1>
<table cellpadding="10">
<tr>
<td style="padding: 10px"><b>Email:</b></td>
<td style="padding: 10px">[email protected]</td>
</tr>
<tr>
<td style="padding: 10px"><b>Telephone:</b></td>
<td style="padding: 10px">555-123-4567</td>
</tr>
</table>
</p></div>
</div>
<!--making the words to live by-->
<div class="pure-u-13-24"><p>
<h1 style="display:block;">Words to Live By</h1>
<table cellpadding="1">
<tr>
<td style="padding: 10px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</table>
<h1 style="display:block">About Me</h1>
<table cellpadding="1">
<tr>
<td style="padding: 10px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</table>
</p></div>
</p></div>
</div>
</div>
<div id="error">
<h1>error: your browser is too small to display this page correctly please enlarge or browser or use a desktop to view this page</h1>
</div>
</body>
</html>
Binary file added about/images/profile_pic.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 about/images/tree_large.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.
95 changes: 95 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Facebook First Page</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<!--<![endif]-->
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. creating the header on the top-->
<!-- 1.1 adding pure grids to the top-->
<div class="pure-g">
<div class="pure-u-3-5 blue"><p>
<!-- 1.1.1 adding the facelook logo-->
<div style="color:white;"id="facelook">Facelook</div>
</p></div>
<div class="pure-u-2-5 blue"><p>
<!-- 1.1.2 adding pure form-->
<form class="pure-form">
<fieldset>
<input style="width: 35%;" type="email" placeholder="Email">
<input style="width: 35%;" type="password" placeholder="Password">
<button style="background-color:#99C2FE; border: black solid;" type="submit" class="pure-button pure-button-primary"> <a href="about/about.html">Log in</a></button>
</fieldset>
</form>
</p></div>
</div>
<!-- 2. creating the main section on the middle-->
<!-- 2.1 adding a grid -->
<div class="pure-g">
<div class="pure-u-3-5 white "><p>
<!-- 2.1.1 filling a grid -->
<section>
<h1 style="margin-bottom:5%;">Connect with all your friends!</h1>
<ul>
<li>See photos and updates on your news feed.</li>
<li>Post your status for the world to see on your profile</li>
<li>Get in touch with your friends by "friending" them</li>
<li>Like things because your a positive person!</li>
</ul>
</section>
</p></div>
<div class="pure-u-2-5 white "><p>
<!-- 2.1.2 creating the form -->
<p id="signup">Sign Up</p>
<form class="pure-form pure-form-stacked">
<fieldset>

<section style="display:flex; margin-bottom:3%;">
<input style="margin-right:5%; width:32.5%;" id="first-name" placeholder="First Name">
<input style="width:32.5%;" id="last-name" placeholder="Last Name">
</section>

<input style="margin-bottom:5%; width:70%;" id="email" placeholder="Email">

<input style="margin-bottom:5%; width:70%;" id="new-password" placeholder="Your New Password">

<input style="margin-bottom:6%; width:70%;" id="confirm-password" placeholder="Confirm Your Password">

<label style="font-size:20px; margin-bottom:2%;" >Birthday</label>

<section style="display:flex;">
<select style="margin-right:5%;" id="month">
<option>Month</option>
<option>01</option>
</select>
<select style="margin-right:5%;" id="day">
<option>Day</option>
<option>25</option>
</select>
<select style="margin-right:5%;" id="year">
<option>Year</option>
<option>1998</option>
</select>
</section>

<label style="margin-top:3%; margin-bottom:6%;" for="gender" class="pure-checkbox">
<input style="margin-left:0.5%;" id="gender" type="checkbox"> Female &nbsp &nbsp &nbsp &nbsp
<input id="gender" type="checkbox"> Male
</label>

<button style="font-size:20px; width:70%; border: black solid; background-color:#00A600;" type="submit" class="pure-button pure-button-primary">Sign Up!</button>
</fieldset>
</form>
</p></div>
</div>
</body>
</html>
88 changes: 88 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/* making the body flow the whole width */

html, body {
margin: 0;
}


/* so I can see the header and main */


header {
background-color: blue;
height: 100px;
}

main {
background-color: yellow;
height: 650px;
}

body {
background-color: gray;
}


/* so I can see the pure grids */

.gray {
background-color: gray;
}

.blue {
background-color: blue;
}

/* so I can make the main content fill most of the main section */

.full-height {
height: 620px;
}



/* centering the logo */

#facelook {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 40px;
margin-left: 50px;
}

/* centering the good stuff writings */

h1 {
margin-top: 15%;
margin-left: 15%;
margin-right: 25%;
}

ul {
margin-left: 15%;
margin-bottom: 30%;
margin-right: 25%;
}

li {
margin-bottom: 8%;
}

/* creating the sign up writings */

#signup {
font-size: 60px;
margin-top: 5%;
margin-bottom: 4%;
}

/* fixing the colors */

.white {
background-color: white;
}

.blue {
background-color: #216DEC;
}