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

alfasf-Completing Prep facebook pages #145

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

alfasf-Completing Prep facebook pages #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3be621e
creating home html
alfasf Sep 5, 2017
7730f56
initializing home html content
alfasf Sep 12, 2017
8c01379
sectioning elements in html
alfasf Sep 14, 2017
fad46ee
finishing html div block divisions
alfasf Sep 15, 2017
452d17e
starting initial styling
alfasf Sep 15, 2017
3ccf2fc
label input in each line in header form
alfasf Sep 15, 2017
9fdaee5
continuing styling
alfasf Sep 15, 2017
440665a
more styling
alfasf Sep 15, 2017
3e99249
fixed form same line in header, list opacity and other styling
alfasf Sep 16, 2017
383ac6f
minor changes
alfasf Sep 16, 2017
b925087
prefinishing final styles
alfasf Sep 16, 2017
076689b
starting about page and style
alfasf Sep 21, 2017
35b5914
config header
alfasf Sep 21, 2017
8ba6596
fixing placeholder in header
alfasf Sep 21, 2017
ba00e5c
fixing search form alignment to left
alfasf Sep 21, 2017
b31a491
modifying body content and tranform img in about page
alfasf Sep 22, 2017
4dcbd72
continuing body content and styling
alfasf Sep 22, 2017
cec0097
finishing header and nav in body cont
alfasf Sep 23, 2017
68192c8
finishing about page with content and styles
alfasf Sep 23, 2017
fd63271
minor fixing border color
alfasf Sep 24, 2017
4ddd9d0
creating new Friends page
alfasf Sep 24, 2017
b20976d
initiating content for Friends page
alfasf Sep 24, 2017
a2e2007
finishing friends page with styling
alfasf Sep 24, 2017
8ea0ec2
comment on readme file
alfasf Sep 24, 2017
0c06a10
comment on readme file
alfasf Sep 24, 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
115 changes: 115 additions & 0 deletions Friends.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!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.0">
<title>Welcome to Facelook</title>


<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Dekko" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="stylesheet" type="text/css" href="assets/about.css">
<link rel="stylesheet" type="text/css" href="assets/friends.css">
</head>
<body>
<header>
<div class="headercontainer">
<div class="brand">
<img class="logo" src="Images/placeholder.png">
<h1>Facelook</h1>
</div>

<form id="searchform">
<input id="search" type="text" name="search" placeholder="Search for Users">
</form>
<span class="nameIdentity">Harry</span>
</div>

</header>

<div class="bodycontainer">
<section>
<img id="coverpic" src="Images/placeholder.png">
<img id="profilepic" src="Images/placeholder.png">
<span class="profilename">Harry Potter</span>
<nav>
<ul class="nav-list">
<li><a href="#">Timeline</a></li>
<li class="selected"><a href="#">About</a></li>
<li><a href="#">Photos</a> <span><a href="#">(123)</a></span> </li>
<li><a href="#">Friends</a> <span><a href="#">(542)</a></span> </li>
<li><a href="#">Edit Profile</a></li>
</ul>
</nav>
</section>
<section>
<header class="selected">
<p>About</p>
<button>Edit your Profile</button>
</header>
<div class="subcontainer">
<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

<section class="friendsblock">
<img class="small-profilepic" src="Images/placeholder.png">
<div class="blockname">
<p><a href="#">Hermione Granger</a></p>
<p>432 Friends</p>
</div><!--end of div blockname-->
<button>Unfriend Me</button>
</section>

</div><!--end of div subcontainer-->
</section>



</div><!--end of bodycontainer-->

</body>
</html>
Binary file added Images/placeholder.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.
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ 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).
My Facebook prep pages look better screen 1,024 px wide.
111 changes: 111 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!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.0">
<title>Welcome to Facelook</title>


<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Dekko" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="stylesheet" type="text/css" href="assets/about.css">
</head>
<body>
<header>
<div class="headercontainer">
<div class="brand">
<img class="logo" src="Images/placeholder.png">
<h1>Facelook</h1>
</div>

<form id="searchform">
<input id="search" type="text" name="search" placeholder="Search for Users">
</form>
<span class="nameIdentity">Harry</span>
</div>

</header>

<div class="bodycontainer">
<section>
<img id="coverpic" src="Images/placeholder.png">
<img id="profilepic" src="Images/placeholder.png">
<span class="profilename">Harry Potter</span>
<nav>
<ul class="nav-list">
<li><a href="#">Timeline</a></li>
<li class="selected"><a href="#">About</a></li>
<li><a href="#">Photos</a> <span><a href="#">(123)</a></span> </li>
<li><a href="#">Friends</a> <span><a href="#">(542)</a></span> </li>
<li><a href="#">Edit Profile</a></li>
</ul>
</nav>
</section>
<section>
<header class="selected">
<p>About</p>
<button>Edit your Profile</button>
</header>
<div class="subcontainer">
<aside>
<section class="noborder">
<table>
<thead>
<tr><td colspan="2">Basic Information</td></tr>
</thead>
<tbody>
<tr>
<td>Birthday:</td>
<td>July 31, 1990</td>
</tr>
<tr>
<td>College:</td>
<td>Hogwarts College</td>
</tr>
<tr>
<td>Hometown:</td>
<td>Godrick's Hollow, England</td>
</tr>
<tr>
<td>Currently Lives:</td>
<td>Godrick's Hollow, England</td>
</tr>

</tbody>
</table>
</section>
<section class="noborder">
<table>
<thead>
<tr><td colspan="2">Contact Information</td></tr>
</thead>
<tbody>
<tr>
<td>Email:</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Telephone:</td>
<td>555-555-5555</td>
</tr>
</tbody>
</table>
</section>
</aside>
<section class="halfsection">
<h4>Words To Live By</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et purus arcu. Pellentesque a convallis massa, quis aliquam nibh. Mauris viverra velit in nunc pretium mattis. Cras purus elit, lobortis ac mollis id, maximus non sem. </p>
<h4>About Me</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et purus arcu. Pellentesque a convallis massa, quis aliquam nibh. Mauris viverra velit in nunc pretium mattis. Cras purus elit, lobortis ac mollis id, maximus non sem. Sed nec scelerisque lacus, id facilisis neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque scelerisque cursus bibendum. Integer lacinia eleifend risus a vestibulum. Donec sed purus at metus gravida malesuada ac ut augue. Etiam placerat id lorem eget egestas. Suspendisse lectus est, placerat vel dignissim a, aliquet varius dolor. Sed consequat, massa in molestie porta, odio elit cursus nisl, lacinia suscipit quam purus id nisi.</p>
</section>
</div><!--end of div subcontainer-->
</section>



</div><!--end of bodycontainer-->

</body>
</html>
Loading