Chèn Code Dưới vào sau /header:
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
<div class="profile"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinn_EnWTpufO36pr7-laR1VVctwODQlFVHFEzE9lv-f7wv0Ra1fMY7hOcUstiIuixoDdOqki9MDrC8ve5QCSYjuhkJMhsKn7yOB2mockqJ5H27e3btj1yB0J9g_OFzi1wXm77qNsNWn5I/s1600/123213.png" alt="Bẽo Hòa Vinh"/><span>Bẽo Hòa Vinh</span></div>
<div class="icon-list">
<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
</div>
</nav>
<nav class="menu-side">
<a href="#">Recent Stories</a>
<a href="#">Reading List</a>
<a href="#">My Stories</a>
<a href="#">Categories</a>
</nav>
</div>
<button class="menu-button" id="open-button"></button>
<div class="content-wrap">
<div class="content">
<header class="codrops-header">
<h1>Chia Sẻ 78 <span>TÁC GIẢ ẨN HIỆN</span></h1>
<p>
ĐI ĐỂ TRỞ VỀ <br/>
Sáng tác: Tiên Cookie <br/>
<br/>
Verse: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố <br/>
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
Pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp vẫn cứ ở đó<br/> đang chờ tôi <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ <br/>
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Verse II: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố<br/>
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp còn đang<br/> trông mong tôi ghé qua <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ<br/>
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Brigde:
<br/>
Cuộc đời thật đẹp khi được đi muôn nơi<br/> xa xôi rộng lớn <br/>
Nhưng ta vẫn có nơi để trở về sau mỗi<br/> chuyến đi <br/>
Điều kì diệu là con người ta đi xa hơn<br/> để trưởng thành hơn <br/>
Không quên mang theo bên cạnh hành<br/> trang nỗi nhớ gia đình<br/>
</p>
</header>
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="http://demo.htmleaf.com/1410/201410182336/js/main.js"></script>
Chèn CSS dưới vào:
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.content {
position: relative;
background: #b4bad2;
}
/* Overlay */
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
position: absolute;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.menu-top {
line-height: 58px;
}
.menu-top .profile {
display: inline-block;
padding: 8px 10px;
line-height: 42px;
}
.menu-top .profile,
.menu-side {
width: 300px;
}
.menu-top .profile img {
float: left;
margin-right: 1em;
width: 43px;
}
.icon-list {
display: inline-block;
font-size: 1.25em;
}
.icon-list a {
margin: 0 1em 0 0;
padding: 0;
}
@media screen and (max-width: 32em) {
.icon-list {
padding-left: 1em;
}
}
.menu-side a {
display: block;
padding: 1.2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.menu-side a:first-child {
border-top: 1px solid rgba(0,0,0,0.1);
}
/* Shown menu */
.show-menu .menu-wrap {
opacity: 1;
}
.show-menu .content-wrap,
.show-menu .menu-button {
-webkit-transform: translate3d(300px,60px,0);
transform: translate3d(300px,60px,0);
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Header */
.codrops-header {
margin: 0 auto;
padding: 3em 2em;
text-align: center;
height: 100%;
}
.codrops-header h1 {
margin: 0 auto;
font-weight: 800;
font-size: 3.75em;
line-height: 1;
}
.codrops-header h1 span {
display: block;
font-size: 50%;
font-weight: 400;
padding-top: 0.325em;
}
.codrops-links {
text-transform: uppercase;
font-weight: 700;
font-size: 0.69em;
line-height: 2.2;
padding: 1.61em 5em;
}
.codrops-links a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 1px;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
font-size: 1em;
max-width: 1200px;
margin: 3em auto 5em;
padding: 2em 10em 0;
}
.codrops-demos > a {
display: inline-block;
margin: 0.75em;
padding: 1.35em 1.1em;
width: 15em;
background: #fffce1;
outline: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 800;
border-radius: 20px/50px;
}
.codrops-demos > a.current-demo {
background: #c94e50;
color: #fffce1;
}
/* Related demos */
.related {
margin-top: 5em;
padding: 0 3em 5em;
}
.related p {
font-size: 1.5em;
font-weight: 700;
}
.related > a {
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
border-radius: 35px/200px;
background: #fffce1;
max-width: 100%;
}
.related a img {
max-width: 100%;
opacity: 0.8;
border-radius: 20px/100px;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related a h3 {
margin: 0;
padding: 0.5em 0.75em 0.3em;
max-width: 300px;
text-align: left;
}
body #cdawrap {
top: auto;
bottom: 35px;
right: 35px;
background: #b4bad2;
border: 1px solid rgba(131,135,151,0.6);
}
.demo-wave body #cdawrap {
top: 35px;
right: 35px;
bottom: auto;
}
@media screen and (max-width: 40em) {
body {
font-size: 80%;
}
.codrops-header h1 {
font-size: 2.5em;
}
.codrops-demos {
max-width: 900px;
padding: 2em 2em 0;
}
.related > a {
margin: 20px 0;
}
}
@media screen and (max-width: 25em) {
.codrops-icon {
font-size: 250%;
}
.codrops-icon span {
display: none;
}
}
Cuối là chèn JS:
<script type="text/javascript">
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
</script>
<script type="text/javascript">
/**
* main.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();
</script>
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh
lam hong moi
Trả lờiXóalàm hồng nhũ hoa
lam hong nhu hoa
cách làm hồng môi
cach lam hong moi
trị thâm mông
tri tham mong
cách trị thâm mông