Skip to content

Commit

Permalink
fb5
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicolealese
nicolealese committed Apr 2, 2017
1 parent 34c1b13 commit b7b0973
Show file tree
Hide file tree
Showing 3 changed files with 223 additions and 2 deletions.
34 changes: 34 additions & 0 deletions css/facebook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,37 @@ body {
.fb-search {
width: 395px !important;
}

/* Style applies to a elements within ul elements with class nav within
an element with class fb-trending */
.fb-trending ul.nav a {
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.fb-trending-title {
line-height: 24px;
}

.fb-trending > .row:first-child {
border-top: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
/* Padding is the whitespace between the content of fb-trending and its
border */
padding-top: 5px;
padding-bottom: 5px;
/* Margin is the whitespace between the border and adjacent elements */
margin-top: 5px;
margin-bottom: 5px;
}

.fb-trending .media {
margin-top: 5px;
}

.fb-trending {
border-bottom: 1px solid lightgrey;
margin-bottom: 5px;
}
191 changes: 189 additions & 2 deletions facebook.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,78 @@
<div class="row">
<!-- Left sidebar: A cell that spans 2 columns -->
<div class="col-md-2">
Left Sidebar

<ul class="nav nav-pills nav-stacked">
<css class="pull-right">
<li role="presentation"><a href="#">John Vilk</a></li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-pencil"></span>
Edit Profile</a>
</li>
<!-- List items that are just text are not indented, and look like the
Facebook section labels. -->
<li role="presentation">FAVORITES</li>
<!-- The class "active" highlights this item in the list -->
<li role="presentation" class="active">
<a href="#"><span class="glyphicon glyphicon-list-alt"></span>
News Feed</a>
</li>
<!-- We can use badges in pills to add numbers beside them. -->
<li role="presentation">
<a href="#">
<span class="glyphicon glyphicon-comment"></span> Messages
<span class="badge">7</span>
</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-calendar"></span>
Events</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-picture"></span>
Photos</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-gift"></span>
Gifts</a>
</li>
<!-- "Saved" also has a number beside it. -->
<li role="presentation">
<a href="#">
<span class="glyphicon glyphicon-bookmark"></span>
Saved
<span class="badge">2</span>
</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-tags"></span>
Sale Groups</a>
</li>
<li role="presentation">PAGES</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-plus"></span>
Create Page</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-signal"></span>
Create Ad</a>
</li>
<li role="presentation">GROUPS</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-plus"></span>
Create Group</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-user"></span>
New Groups</a>
</li>
<li role="presentation"><FRIENDS</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-pushpin"></span>
Amherst, MA</a>
</li>
</ul>
</div>
</div>
<!-- Main feed: A cell that spans 7 columns -->
<div class="col-md-7">
Expand All @@ -123,7 +194,123 @@
</div>
<!-- Right sidebar: A cell that spans 3 columns -->
<div class="col-md-3">
Right Sidebar
<!-- Nested grid! Like the outer grid, it's just a sequence of rows. -->
<!-- Ticker. -->
<div class="row">
<div class="col-md-12">
<a href="#">
<css class="pull-right">
<span class="glyphicon glyphicon-download-alt"></span>
</a>
</div>
</div>
<!-- Birthday -->
<div class="row">
<div class="col-md-12">
<span class="glyphicon glyphicon-gift"></span>
<a href="#">Zak</a> and <a href="#">1 other</a>
</div>
</div>
<!-- Trending -->
<div class="row">

<div class="col-md-12">
<css class="fb-trending">

<div class="row">

<div class="col-md-4">
<css class="fb-trending-title">

TRENDING

</div>

<div class="col-md-8">
<css class="pull-right">
<ul class="nav nav-pills">

<li role="presentation" class="active">
<a href="#"><span class="glyphicon glyphicon-flash"></span></a>
</li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-tower"></span>
</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-sunglasses"></span>
</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-record"></span>
</a></li>
<li role="presentation"><a href="#">
<span class="glyphicon glyphicon-facetime-video"></span>
</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="media-list">
<li class="media">
<div class="media-left media-top">
<span class="glyphicon glyphicon-flash"></span>
</div>
<div class="media-body">
<a href="#">George Lucas</a>: Filmmaker Criticizes New
"Star Wars" Film and Direction of Franchise Under
Disney
</div>
</li>
<li class="media">
<div class="media-left media-top">
<span class="glyphicon glyphicon-flash"></span>
</div>
<div class="media-body">
<a href="#">Super Smash Bros.</a>: Game Glitch Allows
Players to Control 8 Characters With 1 Controller
</div>
</li>
<li class="media">
<div class="media-left media-top">
<span class="glyphicon glyphicon-flash"></span>
</div>
<div class="media-body">
<a href="#">Tuukka Rask</a>: Boston Bruins Player
Debuts Goalie Mask for Winter Classic
</div>
</li>
<li class="media">
<div class="media-left media-top">
<span class="caret"></span>
</div>
<div class="media-body">
<a href="#">See More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Suggested pages -->
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
SUGGESTED PAGES
</div>
<div class="col-md-4">
<a href="#" class="pull-right">See All</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="img/falafel.jpg" width="100%" />
<br><a href="#">Pita Pocket's</a>
<br><button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up">
</span> Like Page</button>
</div>
</div>
</div>
</div>
Expand Down
Binary file added img/falafel.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b7b0973

Please sign in to comment.