Facebook Paper Theme

Developer
Daniel Grant
Size
4,905 Kb
Views
6,072
  1. Facebook Paper Theme Previews
  2. Facebook Paper Theme HTML Codes
  3. Facebook Paper Theme CSS Codes
  4. Facebook Paper Theme JS Codes

How do I make an facebook paper theme?

What is a facebook paper theme? How do you make a facebook paper theme? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.

Facebook Paper Theme Previews
IQ Test

Facebook Paper Theme - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook Paper Theme</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { height: 100%;
}
* { box-sizing: border-box; position: relative; -webkit-font-smoothing: antialiased;
}
.Nav { position: absolute; width: 100%; z-index: 10; background: rgba(255, 255, 255, 0.005);
}
.Nav ul { padding: 0 24px;
}
.Nav li { display: inline-block; margin-right: 24px;
}
.Nav a { color: #f1f1f1; color: rgba(255, 255, 255, 0.6); text-decoration: none;
}
.Nav a.is-active { color: white;
}
.Sections { height: 100%; overflow: hidden;
}
.Section { position: absolute; width: 100%; height: 100%; background-size: cover; backface-visibility: hidden; transition: 0.7s transform;
}
.Section.is-active { z-index: 2;
}
.Section.was-active { z-index: 1;
}
.Section,
.Section.was-active { transform: translateX(-100%);
}
.Section.is-active ~ .Section,
.Section.is-active ~ .Section.was-active { transform: translateX(100%);
}
.Section.is-active { transform: translateX(0);
}
.Section:nth-child(1):before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("https://31.media.tumblr.com/03e99a662f35e2755ce1ae54c9b32223/tumblr_mufrp1cpsZ1st5lhmo1_1280.jpg"); background-size: cover; -webkit-filter: brightness(87%);
}
.Section:nth-child(2) { background-image: url("https://31.media.tumblr.com/78ce1831f575f06a6ca966ee2c9198f1/tumblr_n10nb0TY4u1st5lhmo1_1280.jpg");
}
.Section:nth-child(3) { background-image: url("https://25.media.tumblr.com/350cbf6444f32fadff401d12c318cdbd/tumblr_n10n2x71Dz1st5lhmo1_1280.jpg");
}
.Section:nth-child(4) { background-image: url("https://24.media.tumblr.com/d6c1cadf4ba6aa88702fb71416f87052/tumblr_mwhdglB25O1st5lhmo1_1280.jpg");
}
.Section-Headings { position: absolute; top: 45%; left: 52px; transform: translateY(-50%);
}
.Section-Headings .Heading { margin-bottom: 6px;
}
.Heading,
.SubHeading { font-family: "Helvetica Neue Thin", "HelveticaNeue-Thin", "helvetica neue", helvetica, arial, "lucida grande", sans-serif; color: #f1f1f1; font-weight: 300;
}
.Heading { font-size: 50px;
}
.SubHeading { font-size: 30px;
}
.Footer { position: absolute; bottom: 18px; left: 24px; right: 24px; font-size: 13px;
}
.Footer, .Footer a { color: white; text-decoration: none;
}
.pulled-left { float: left;
}
.pulled-right { float: right;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="Nav"> <ul> <li><a href="#intro" class="is-active">Intros</a></li> <li><a href="#stories">Stories</a></li> <li><a href="#explore">Explore</a></li> <li><a href="#share">Share</a></li> </ul>
</div>
<div class="Sections"> <div class="Section is-active" id="intro"> <div class="Section-Headings"> <div class="Heading">Introducing...</div> <div class="SubHeading">Explore and share stories from<br> friends and the world around you.</div> </div> <div class="Footer"> <div class="pulled-left"> Facebook Paper theme by <a href="https://twitter.com/danieljohngrant" target="_blank">@danieljohngrant</a> </div> <div class="pulled-right"> <a href="https://codepen.io/djgrant/share/zip/kuBrK">Download ZIP</a> </div> </div> </div> <div class="Section" id="stories"> <div class="Section-Headings"> <div class="Heading">Beautiful storytelling</div> </div> </div> <div class="Section" id="explore"> <div class="Section-Headings"> <div class="Heading">Explore sections</div> </div> </div> <div class="Section" id="share"> <div class="Section-Headings"> <div class="Heading">Share your stories</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook Paper Theme - Script Codes CSS Codes

html,
body { height: 100%;
}
* { box-sizing: border-box; position: relative; -webkit-font-smoothing: antialiased;
}
.Nav { position: absolute; width: 100%; z-index: 10; background: rgba(255, 255, 255, 0.005);
}
.Nav ul { padding: 0 24px;
}
.Nav li { display: inline-block; margin-right: 24px;
}
.Nav a { color: #f1f1f1; color: rgba(255, 255, 255, 0.6); text-decoration: none;
}
.Nav a.is-active { color: white;
}
.Sections { height: 100%; overflow: hidden;
}
.Section { position: absolute; width: 100%; height: 100%; background-size: cover; backface-visibility: hidden; transition: 0.7s transform;
}
.Section.is-active { z-index: 2;
}
.Section.was-active { z-index: 1;
}
.Section,
.Section.was-active { transform: translateX(-100%);
}
.Section.is-active ~ .Section,
.Section.is-active ~ .Section.was-active { transform: translateX(100%);
}
.Section.is-active { transform: translateX(0);
}
.Section:nth-child(1):before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("https://31.media.tumblr.com/03e99a662f35e2755ce1ae54c9b32223/tumblr_mufrp1cpsZ1st5lhmo1_1280.jpg"); background-size: cover; -webkit-filter: brightness(87%);
}
.Section:nth-child(2) { background-image: url("https://31.media.tumblr.com/78ce1831f575f06a6ca966ee2c9198f1/tumblr_n10nb0TY4u1st5lhmo1_1280.jpg");
}
.Section:nth-child(3) { background-image: url("https://25.media.tumblr.com/350cbf6444f32fadff401d12c318cdbd/tumblr_n10n2x71Dz1st5lhmo1_1280.jpg");
}
.Section:nth-child(4) { background-image: url("https://24.media.tumblr.com/d6c1cadf4ba6aa88702fb71416f87052/tumblr_mwhdglB25O1st5lhmo1_1280.jpg");
}
.Section-Headings { position: absolute; top: 45%; left: 52px; transform: translateY(-50%);
}
.Section-Headings .Heading { margin-bottom: 6px;
}
.Heading,
.SubHeading { font-family: "Helvetica Neue Thin", "HelveticaNeue-Thin", "helvetica neue", helvetica, arial, "lucida grande", sans-serif; color: #f1f1f1; font-weight: 300;
}
.Heading { font-size: 50px;
}
.SubHeading { font-size: 30px;
}
.Footer { position: absolute; bottom: 18px; left: 24px; right: 24px; font-size: 13px;
}
.Footer, .Footer a { color: white; text-decoration: none;
}
.pulled-left { float: left;
}
.pulled-right { float: right;
}

Facebook Paper Theme - Script Codes JS Codes

$('.Nav a').on('click', function(e) { e.preventDefault(); var $activeLink = $(this); if($activeLink.is('.is-active')) return; var $previousLink = $('.Nav a.is-active'); var target = $(this).attr('href'); var $section = $('.Section'); var $target = $(target); var $active = $section.filter('.is-active'); var $previous = $section.filter('.was-active'); $target.addClass('is-active'); $active.removeClass('is-active').addClass('was-active'); $previous.removeClass('was-active'); $activeLink.addClass('is-active'); $previousLink.removeClass('is-active');
});
Facebook Paper Theme - Script Codes
Facebook Paper Theme - Script Codes
Home Page Home
Developer Daniel Grant
Username djgrant
Uploaded December 28, 2022
Rating 3.5
Size 4,905 Kb
Views 6,072
Do you need developer help for Facebook Paper Theme?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Grant (djgrant) Script Codes
Name
Touch rem
CSS triangles with border
Grid crosshairs
Wireframe Planet
Zero element inline validation bubble
A Pen by Daniel Grant
Wireframe solar system
Responsive Modal
Loading bar for ajax pages
Transitioning application screens with semantically named classes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!