Anh quên mất, đây nhé mn 🙁
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='https://i.imgur.com/01gikK4.png' rel='icon' type='image/x-icon'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700;900&display=swap' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script|Lobster|Pattaya|Srisakdi&display=swap' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css' rel='stylesheet'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://use.fontawesome.com/releases/v5.1.0/css/all.css");loadCSS("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Condensed:300,400,700|Roboto+Slab:400,500,700");loadCSS("//cdn.jsdelivr.net/gh/hung1001/blog@c30405f/smart/lib/font-awesome/css/all.css");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");loadCSS("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");
//]]>
</script>
<title>
Lê Anh Đức | Kỷ yếu
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
/* Chèn CSS vào đây */
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<style>
html,body{cursor:url("https://i.imgur.com/5v5M8gh.png"), auto;}
a:hover{cursor:url("https://i.imgur.com/IXULuQ1.png"), auto;}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:rgba(134,55,123,.5)}::-webkit-scrollbar-thumb{background:rgba(134,55,123,.9);border-radius:100px}::-webkit-scrollbar-thumb:hover{background:rgba(134,55,123,1)}
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
@keyframes move_wave{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{overflow:hidden;position:absolute;left:0;right:0;bottom:0;top:0;margin:auto}
.waveWrapperInner{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0px}
.waveWrapper::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(to top,#272727 20%,#000000 80%);opacity:.5}
.bgTop{z-index:15;opacity:0.35}
.bgMiddle{z-index:10;opacity:0.55}
.bgBottom{z-index:5;opacity:.6}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.waveTop{background-size:50% 100px}
.waveAnimation .waveTop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.waveMiddle{background-size:50% 120px}
.waveAnimation .waveMiddle{animation:move_wave 10s linear infinite}
.waveBottom{background-size:50% 100px}
.waveAnimation .waveBottom{animation:move_wave 15s linear infinite}
.revert-clound, .top-main{position:relative;top:0;left:0;width:100%;height:100vh}
.revert-clound{height:150px}
.revert-clound, .wavewrapperInner{transform:rotate(180deg)}
html,body{height:100%;user-select: none}
body {
font-family: 'Lobster', cursive;
font-size: 16px;
}
.animated-element,.animated,body{visibility:hidden}
body.dom-loaded,.dom-loaded .animated,.animated-element.is-visible{visibility:visible}
.container{max-width:1142px;margin: 0 auto}
.clearfix::after{content:'';display:table;clear:both}
.header-inner{margin:0;overflow:hidden;position:relative;width:100%;height:100vh}
.header-inner .container{position:relative;height:60px;line-height:60px;padding:15px 0;display:flex;flex-wrap:nowrap;justify-content: space-between;transition: padding .25s ease}
#logo-title{display:flex;align-items:center;height:60px;line-height:60px;justify-content:center;text-align:center}
#logo-title h1,#logo-title p{color:#eeeeee;text-shadow:0 1px 1px #000000;margin:0;line-height:1.15}
#logo-title h1{font-size:28px}
#logo-title p{font-size:14px}
#site-header{position:relative;overflow:hidden}
.header-container{position:fixed;top:0;left:0;width:100%;z-index:16;transition: background .25s ease}
.header-container.change{background:rgba(0,0,0,.9);box-shadow:0 10px 20px rgba(0,0,0,.3)}
.header-container.change .container{padding:0}
#navigation{position:relative;display:block;overflow:hidden;text-align:right}
#navigation ul{display:inline-block;list-style:none;padding:0;margin:0}
#navigation ul li{display:inline-block;margin-left:5px;position:relative;overflow:hidden;cursor:pointer;user-select:none;border-radius:50px}
#navigation ul li a{color:#ffffff;display:block;text-decoration:none;text-shadow:none;transition:all .5s ease;padding:0 30px;border-radius:50px;font-weight:500;font-size:15px;text-shadow: 0 2px 2px #000000}
#navigation ul li a:hover{text-shadow:0 2px 5px #000000}
#navigation ul li a.active,#navigation ul li a:hover{background-color:rgba(0,0,0,.6)}
#navigation ul li .material-ink{background-color:rgba(255,255,255,.4)}
.material-ink{position:absolute;background:#bdc3c7;border-radius:50%;transform:scale(0);opacity:0.4}
.material-ink.animate{animation:ripple 0.6s linear}
@keyframes ripple{100%{transform:scale(2.5);opacity:0}}
.change #navigation ul li a,.change #navigation ul li{border-radius:0}
.change #navigation li a.active{background:rgba(255,255,255,.7);color:#333333;text-shadow:none}
.change #navigation ul li .material-ink{background-color:rgba(0,0,0,.4)}
.header-bg{position:relative;height:100%;overflow:hidden;z-index:15}
#custom-bg,.custom-image-bg{position:absolute;top:0;left:0;width:100%;height:100%}
#custom-heading-1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:16;padding:15px;overflow:hidden}
#custom-heading-1 h2,#custom-heading-1 p{margin:0}
#custom-heading-1 h2{color:#ffffff;font-size:35px;text-shadow:1px 1px 10px #000000;border-left:5px solid;padding-left:15px;-webkit-animation-delay:.5s;animation-delay:.5s}
#custom-heading-1 p{color:#cccccc;text-shadow:0 1px 1px #000000;margin-top:15px;font-size:18px;-webkit-animation-delay:1s;animation-delay:1s}
#site-main{position:relative;overflow:hidden;background:#212121}
.heart{position:absolute;top:-50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-m-transform:rotate(-45deg);transform:rotate(-45deg);opacity:.3}
.heart:before{position:absolute;top:-50%;left:0;display:block;content:"";width:100%;height:100%;background:inherit;border-radius:100%}
.heart:after{position:absolute;top:0;right:-50%;display:block;content:"";width:100%;height:100%;background:inherit;border-radius:100%}
@-webkit-keyframes love{0%{top:110%}}
@-moz-keyframes love{0%{top:110%}}
@-ms-keyframes love{0%{top:110%}}
@keyframes love{0%{top:110%}}
#hard_journey{position:relative;height:100%;overflow:hidden;display:flex;align-items:center}
#hard_journey .section-image{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center -50px!important;opacity:1}
#hard_journey .section-image::before,#hard_journey .section-image::after{content:'';position:absolute;bottom:0;height:100%;left:0;background:linear-gradient(to bottom,transparent 20%,#212121 80%);z-index:1;top:0;width:100%}
#hard_journey .section-image::after{background:linear-gradient(to top,transparent,#212121)}
#hard_journey .section-widget{position:relative;z-index:2;box-sizing:border-box;text-shadow:none;color:#ffffff;padding:30px;overflow:hidden;border-radius:20px;max-width:768px}
#hard_journey .section-widget .section-title{margin:0;letter-spacing:1;font-size:40px;padding:15px}
#hard_journey .section-widget .section-desc{margin:15px 0 0;font-size:18px;line-height:1.5;position:relative;padding:0;display:inline}
#hard_journey .section-widget .section-title::before{content:"";margin-right:5px;margin-left:-20px}
#hard_journey .section-widget .section-title::after{content:'';margin-right:-20px;margin-left:5px}
.main-container{
position:relative;
}
.main-section{position:relative;float:left;width:100%;margin:0 0 15px;text-shadow:0 1px 1px #000000;color:#ffffff}
.main-section .container{padding:0 0 15px;margin:0 auto 15px}
.main-section .section-title{text-align:center;font-size:30px;letter-spacing:5px}
.site-timeline{position:relative;margin:30px auto;padding:30px 0;display:block}
.site-timeline::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:5px;border-radius:10px;background-color:rgba(255,255,255,.45)}
.site-timeline .timeline{position:relative;background:#ffffff;color:#333;text-shadow:none;padding:30px;box-sizing:border-box;width:calc(50% - 30px);border-radius:20px;box-shadow:0 0 5px #000000}
.site-timeline .timeline:nth-child(odd){left:0}
.site-timeline .timeline:nth-child(even){left:calc(50% + 30px)}
.site-timeline .timeline::after{content:'';position:absolute;width:10px;height:10px;background-color:rgba(245,153,153,0.9);border:2px solid #27273c;border-radius:50%;right:-40px;top:50%;transform:translate(0,-50%);z-index:1}
.site-timeline .timeline::before{content:'';position:absolute;border-width:10px;border-style:solid;border-color:transparent transparent transparent #ffffff;left:100%;top:50%;transform:translate(0,-50%)}
.site-timeline .timeline:nth-child(even)::before{left:auto;right:100%;border-color:transparent #ffffff transparent transparent}
.site-timeline .timeline:nth-child(even)::after{left:-35px;right:auto}
.site-timeline .timeline .section-image{position:relative;height:0;padding-top:56.25%;border-radius:20px 20px 0 0;margin:-30px -30px 15px}
.main-section .section-desc{line-height:1.5;margin:0;text-align:justify;font-size:16px}
.quote-box{background-color:transparent;border-radius:3px;color:#fff;position:relative;width:100%;height:300px;transition:.4s;text-align:center}
.quote-box:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border-top:20px solid #fff;border-left:20px solid #fff;box-sizing:border-box}
.quote-box:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-bottom:20px solid #fff;border-right:20px solid #fff;box-sizing:border-box}
.quote-box .fas{font-size:25px;height:50px;width:50px;line-height:50px!important;background-color:#fff;color:#2C3A47}
.quote-box .fa2{position:absolute;bottom:0;right:0;z-index:1}
.quote-box .quote-text{position:absolute;top:30px;left:-30px;width:calc(100% + 60px);height:calc(100% - 60px);background-color:#111111;border-radius:3px;transition:.4s}
.quote-box .quote-text .fa1{position:absolute;top:0;left:0}
.quote-box .quote-text div{position:absolute;top:50%;left:0;transform:translateY(-50%);text-align:center;width:100%;padding:30px 60px;line-height:1.5;box-sizing:border-box}
.quote-box .quote-text div h3{font-size:30px;margin-bottom:5px}
.quote-box .quote-text div p{font-size:20px;line-height:2;padding-right:30px}
.yearbook-timeline::after,.yearbook-timeline .timeline::before,.yearbook-timeline .timeline::after{display:none}
.yearbook-timeline .timeline{left:auto!important;right:auto;width:100%;margin:0 0 30px;display:flex}
.yearbook-timeline .timeline .section-image{flex:0 50%;border-radius:20px 0 0 20px;margin:-30px 15px -30px -30px;padding-top:30%}
.yearbook-timeline .timeline .section-widget{flex:0 50%;padding-left:15px;display:flex;align-items:center;flex-wrap:wrap}
.yearbook-timeline .timeline .section-widget *{width:100%}
.yearbook-timeline .timeline:nth-child(even){flex-direction:row-reverse}
.yearbook-timeline .timeline:nth-child(even) .section-image{margin:-30px -30px -30px 15px;border-radius:0 20px 20px 0}
.yearbook-timeline .timeline:nth-child(even) .section-widget{padding-left:0;padding-right:15px}
.container{padding-left:15px!important;padding-right:15px!important}
.main-section .section-title .container{padding-left:0!important;padding-right:0!important}
#toggle-nav{display:none}
.photo-wrapper .item{
float: left;
border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
.bg-audio{position:fixed;bottom:0;left:0;width:100%;z-index:999;background-color:rgba(0,0,0,.3);text-align:center;padding:15px;display:none}
@media screen and (max-width:1024px){
.header-inner{overflow:auto}
#navigation{position:fixed;top:90px;width:320px;right:-100%;text-align:center;background-color:#333333;border-radius:0 0 0 20px;overflow:hidden;transition:all .25s ease}
.change #navigation{top:60px}
.active #navigation{right:0}
#navigation ul li{float:none;width:100%}
#toggle-nav{display:block;background:none;border:none;color:#ffffff;font-size:30px;outline:none}
#custom-heading-1 h2,.main-section .section-title{font-size:25px}
.yearbook-timeline .timeline .section-image{padding-top:40%}
#custom-heading-1{min-width:300px}
}
@media screen and (max-width:900px){
.site-timeline:not(.yearbook-timeline) .timeline .section-image{padding-top:70%}
.yearbook-timeline .timeline{display:block}
.yearbook-timeline .timeline .section-image{margin:-30px -30px 15px!important;border-radius:20px 20px 0 0!important}
.quote-box .quote-text div p{font-size:1rem}
}
@media screen and (max-width:768px){
.main-section .section-title{font-size:20px}
.site-timeline .timeline{width:100%;left:0!important;margin: 0 0 30px!important}
.site-timeline .timeline::before,.site-timeline .timeline::after,.site-timeline::after{display:none}
}
</style>
<section id='site-outer'>
<header id='site-header'>
<section class='header-inner'>
<section class='header-container clearfix'>
<div class='container'>
<div class='section' id='logo-title'><div class='widget Header' data-version='2' id='Header1'>
<div class='header-widget'>
<h1>
A9 Class 2018-2021
</h1>
<p>
</p>
</div>
</div></div>
<div class='section' id='navigation'><div class='section-widget'>
<div class='widget-content'>
<ul>
<li class='material-ripple'>
<a class='animated zoomIn delay-1s' href='#hard_journey'>
Hành trình vất vả
</a>
</li>
<li class='material-ripple'>
<a class='animated zoomIn delay-1s' href='#memories'>
Kỷ niệm đáng nhớ
</a>
</li>
<li class='material-ripple'>
<a class='animated zoomIn delay-1s' href='#yearbook'>
Kỷ yếu
</a>
</li>
<li class='material-ripple'>
<a class='animated zoomIn delay-1s' href='#pictures'>
Hình ảnh
</a>
</li>
</ul>
</div>
</div></div>
<button id='toggle-nav' type='button'><i aria-hidden='true' class='fa fa-bars'/></button>
</div>
</section>
<section class='header-bg'>
<div class='item section' id='custom-heading-1'><div class='header-title'>
<h2 class='animated rotateInUpLeft title'>
Vòng thời gian cứ miệt mài quay. những cơn mưa lất phất cũng đã làm dịu hẳn cái nóng oi bức của mùa hè.
</h2>
</div><div class='header-sub-title'>
<p class='animated slideInLeft custom-desc'>
Ngồi bên khung cửa sổ nhìn những cơn mưa ấy lòng tôi lại thấy bâng khuâng đến lạ lùng.
</p>
</div></div>
<div class='item section' id='custom-bg'><div class='custom-image-bg' data-srcset='//2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s72/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 72w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s128/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 128w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s220/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 220w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s400/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 400w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s640/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 640w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s800/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 800w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s1024/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 1024w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s1280/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 1280w, //2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s1600/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg 1600w' style='background-image:url(//2.bp.blogspot.com/-1v4vJpHkd0I/XpkN-EVieRI/AAAAAAAAAUc/kvtWLRv-7jEueWLKmYKv1FYq6-co6vf2wCK4BGAYYCw/s1600/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B10a9.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center'>
</div></div>
<div class='waveWrapper waveAnimation'>
<section class='waveWrapperInner bgTop'>
<section class='wave waveTop' style='background-image: url('https://1.bp.blogspot.com/-b_lfXKtlhQ8/XosFbsGmKfI/AAAAAAAADmY/mWwyjb8ztLEWdVgZWG-YMCeCAvmZGi7LgCLcBGAsYHQ/s1600/wave-top.png')'/>
</section>
<section class='waveWrapperInner bgMiddle'>
<section class='wave waveMiddle' style='background-image: url('https://1.bp.blogspot.com/-fXTYJbqb3Vg/XosFbQW85EI/AAAAAAAADmU/5L9QRkrpmuEwgCgRkyMI3aemBm2pSCqWQCLcBGAsYHQ/s1600/wave-mid.png')'/>
</section>
<section class='waveWrapperInner bgBottom'>
<section class='wave waveBottom' style='background-image: url('https://1.bp.blogspot.com/-Fok1BtYoiP4/XosFbl0lOOI/AAAAAAAADmc/7Kh_cX3-vxQ8Z9hj0i2xXVqa20faMrtCACLcBGAsYHQ/s1600/wave-bot.png')'/>
</section>
</div>
</section>
</section>
</header>
<main id='site-main'>
<div class='revert-clound waveAnimation'>
<section class='waveWrapperInner bgTop'>
<section class='wave waveTop' style='background-image: url('https://1.bp.blogspot.com/-b_lfXKtlhQ8/XosFbsGmKfI/AAAAAAAADmY/mWwyjb8ztLEWdVgZWG-YMCeCAvmZGi7LgCLcBGAsYHQ/s1600/wave-top.png')'/>
</section>
<section class='waveWrapperInner bgMiddle'>
<section class='wave waveMiddle' style='background-image: url('https://1.bp.blogspot.com/-fXTYJbqb3Vg/XosFbQW85EI/AAAAAAAADmU/5L9QRkrpmuEwgCgRkyMI3aemBm2pSCqWQCLcBGAsYHQ/s1600/wave-mid.png')'/>
</section>
<section class='waveWrapperInner bgBottom'>
<section class='wave waveBottom' style='background-image: url('https://1.bp.blogspot.com/-Fok1BtYoiP4/XosFbl0lOOI/AAAAAAAADmc/7Kh_cX3-vxQ8Z9hj0i2xXVqa20faMrtCACLcBGAsYHQ/s1600/wave-bot.png')'/>
</section>
</div>
<section class='top-main'>
<section class='main-section overlay-style' id='hard_journey'>
<div class='container section' id='journey_container'><div class='section-widget animated-element' data-effect='jackInTheBox'>
<h2 class='section-title'>
<span class='container'>
Hành trình vất vả
</span>
</h2>
<p class='section-desc'><span class='container'>Tuy rằng những mùa ôn thi có thể căng thẳng và vất vả nhưng mà dù có vất vả đến đâu thì cũng không thể ngăn được niềm vui của chúng tôi khi được cùng nhau trải qua cảm giác ấy.</span></p>
</div><div class='widget Image section-image' style='background-image:url(//4.bp.blogspot.com/-neoEj09NJQ4/XouXJ0VjNCI/AAAAAAAADnM/sH2PJ9Ets-0TsOQzsEnmbbT4OuHAdnc3QCK4BGAYYCw/s1600/1.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center'>
</div>
</div>
</section>
</section>
<!-- Section 1 -->
<section class='main-container bg_heart'>
<section class='main-section' id='memories'>
<!-- Memories Timeline -->
<div class='container'>
<h2 class='section-title main-section-title'>Những kỷ niệm đáng nhớ</h2>
<div class='site-timeline'>
<div class='timeline animated-element section' id='timeline-1'><div class='widget Image section-image' style='background-image:url(//2.bp.blogspot.com/-i6ebIfNiCZw/XpkRPU9x2jI/AAAAAAAAAVA/6AqmQchLxwkJIwXvzlaHQdmC6VFE3YD-wCK4BGAYYCw/s1600/t%25E1%25BA%25AFm%2Bsu%25E1%25BB%2591i.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center'>
</div><div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Chuyến đi chơi sau buổi tập văn nghệ căng thẳng
</span>
</h2>
<p class='section-desc'>Năm nào trường tôi cũng có những hoạt động văn nghệ cho các lớp thi với nhau. Nhóm văn nghệ lớp tôi ngày cuối khi tập văn nghệ để lên duyệt cho trường sau khi xong cả nhóm quyết định đi tắm suối cho thoải mái sau những buổi tập căng thẳng</p>
</div></div>
<div class='timeline animated-element section' id='timeline-2'><div class='widget Image section-image' style='background-image:url(//1.bp.blogspot.com/-X0ViSt0YWhk/XpkOkRsk_7I/AAAAAAAAAUo/AUqX24hUoLQbiI3KFdOdZ9nAb4dZz1higCK4BGAYYCw/s1600/sinh%2Bnh%25E1%25BA%25ADt%2Bth%25E1%25BA%25A7y%2BLu%25C3%25A2n.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center'>
</div><div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Buổi tiệc chúc mừng ngày nhà giáo Việt Nam 20-11
</span>
</h2>
<p class='section-desc'>Chúng tôi luôn âm thầm bí mật tổ chức những buổi tiệc thật ý nghĩa cho người cha, người mẹ thứ 2 của chúng tôi, dù có đi đâu hay làm gì đi nữa, chúng em vẫn sẽ mãi được là học trò của thầy.</p>
</div></div>
<div class='timeline animated-element section' id='timeline-3'><div class='widget Image section-image' style='background-image:url(//1.bp.blogspot.com/-rqZZR0OLd9c/XpkPMnv_fcI/AAAAAAAAAU0/x2k-5rGYQr410GokXrRad4t5XoEITIG2wCK4BGAYYCw/s1600/h%25E1%25BB%2599i%2Btr%25E1%25BA%25A1i%2B2%2B10a9.jpg);background-size:cover;background-repeat:no-repeat;background-position:center center'>
</div><div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Hội trại
</span>
</h2>
<p class='section-desc'>Hội trại lớp tôi cũng khá là vui, chúng tôi bán rất nhiều món ăn ngon, các loại nước giải khát và đặc biệt là được thầy Hiệu trưởng mua đồ ở gian hàng của lớp tôi và khen ngon<div id='gtx-trans' style='left: -95px; position: absolute; top: -25px;'><div class='gtx-trans-icon'/></div></p>
</div></div>
</div>
</div>
</section>
<section class='main-section' id='yearbook'>
<div class='container'>
<h2 class='section-title main-section-title'>Buổi kỷ yếu trong cuộc đời học sinh</h2>
<div class='quote-box'><i class='fas fa fa-quote-right fa2'/>
<div class='quote-text'><i class='fas fa fa-quote-left fa1'/>
<div>
<p>Trong suốt một đời người, thông thường bạn gặp rất nhiều người. Một vài trong số đó có thể gắn bó với bạn lâu dài, một số khác chỉ thoảng qua và biến mất mãi mãi. Nhưng qua một thời gian tất cả mọi người sẽ có chỗ đứng nhất định trong trái tim bạn.</p>
</div>
</div>
</div>
<div class='site-timeline yearbook-timeline'>
<div class='timeline animated-element section' id='timeline-4'>
<div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Tốt nghiệp & thành công
</span>
</h2>
<p class='section-desc'>Chúng tôi bắt đầu buổi kỷ yếu với chủ đề tốt nghiệp và với vài bộ trang phục áo vest và váy dài, nói lên ý nghĩa rằng, sau khi tốt nghiệp chúng ta ai cũng sẽ thành công trong cuộc sống và luôn tươi cười.<div id='gtx-trans' style='left: 161px; position: absolute; top: 99px;'><div class='gtx-trans-icon'/></div></p>
</div></div>
<div class='timeline animated-element section' id='timeline-5'>
<div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Chăm chỉ & cần cù
</span>
</h2>
<p class='section-desc'>Trang phục người nông dân, ám chỉ cho chúng ta một điều rằng, muốn thành công, chúng ta phải luôn chăm chỉ, cần cù. Cần cù, chúng ta mới có thể đạt được những gì mình muốn.</p>
</div></div>
<div class='timeline animated-element section' id='timeline-6'>
<div class='section-widget'>
<h2 class='section-title'>
<span class='container'>
Lửa trại & tiệc tùng
</span>
</h2>
<p class='section-desc'>Nói với nhau những lời chúc chân thành và ngồi với nhau đêm cuối trong 3 năm học tại trường, trải qua bao nhiêu khó khăn và vui vẻ cùng nhau, nhưng chắc bây giờ tôi không còn được cảm nhận cảm giác này nữa !</p>
</div></div>
</div>
</div>
</section>
<section class='main-section' id='pictures'>
<h2 class='section-title main-section-title'>Hình ảnh</h2>
<div class='site-photos'>
<div class='section' id='site-photo-carousel'><div class='section-widget'>
<div class='photo-wrapper'>
<div class='item animated-element' data-effect='bounceInUp'>
<a class='photo-carousel-item' data-lightbox='roadtrip' data-title='Gái A9 - học nghề' href='https://lh3.googleusercontent.com/9wzfHR-RyOgbWEyWM2WFLY36lFI62iNnsALLiPdjP5Bq66bpzBAQLr6CVr3i-hHpDmWUoRujD7oZhiXVFUR-Bbjm2e4rF7mOHXPYtZqpgT3aDTlji0YUB3AhLLPS_WqAZu6diCrjDA=w2400'><img alt='Gái A9 - học nghề' class='lazy' src='https://lh3.googleusercontent.com/9wzfHR-RyOgbWEyWM2WFLY36lFI62iNnsALLiPdjP5Bq66bpzBAQLr6CVr3i-hHpDmWUoRujD7oZhiXVFUR-Bbjm2e4rF7mOHXPYtZqpgT3aDTlji0YUB3AhLLPS_WqAZu6diCrjDA=w2400'/></a>
</div>
<div class='item animated-element' data-effect='bounceInUp'>
<a class='photo-carousel-item' data-lightbox='roadtrip' data-title='Tiết thể dục' href='https://lh3.googleusercontent.com/82FWj6inWxhwh4DN7jQwNvj_LOQiejO97W_rMcGAW4Lu8j7kdcSM0y6H-myUTIqQI4OruLGsZh6ik5TwvEZaEZ5PI5R0Ut3_yTjZdlBE6ri01KOdiD5LiWSRo2Znwge3vTdTvcvlbQ=w2400'><img alt='Tiết thể dục' class='lazy' src='https://lh3.googleusercontent.com/82FWj6inWxhwh4DN7jQwNvj_LOQiejO97W_rMcGAW4Lu8j7kdcSM0y6H-myUTIqQI4OruLGsZh6ik5TwvEZaEZ5PI5R0Ut3_yTjZdlBE6ri01KOdiD5LiWSRo2Znwge3vTdTvcvlbQ=w2400'/></a>
</div>
<div class='item animated-element' data-effect='bounceInUp'>
<a class='photo-carousel-item' data-lightbox='roadtrip' data-title='Kỉ niệm giải bóng đá nam khối 11' href='https://lh3.googleusercontent.com/DNP5M_vF-rIDzW98N1bbpzjxWeh6VKq2eo0nbh_V2dfHuEpiHLMY62Cm9g0144HOUuoomubfZasWCsYfiwQdUn6I-HZ7qS8jKfLWkEWBBF2OTA2xIC-Xp3Vfb-97BQCw6UJrVAliTQ=w2400'><img alt='Kỉ niệm giải bóng đá nam khối 11' class='lazy' src='https://lh3.googleusercontent.com/DNP5M_vF-rIDzW98N1bbpzjxWeh6VKq2eo0nbh_V2dfHuEpiHLMY62Cm9g0144HOUuoomubfZasWCsYfiwQdUn6I-HZ7qS8jKfLWkEWBBF2OTA2xIC-Xp3Vfb-97BQCw6UJrVAliTQ=w2400'/></a>
</div>
<div class='item animated-element' data-effect='bounceInUp'>
<a class='photo-carousel-item' data-lightbox='roadtrip' data-title='Kỉ niệm khai giảng năm học 2019-2020 (Gái A9)' href='https://lh3.googleusercontent.com/XHiKQE772z9tfbMdhf4eOhD_oPG9aPPBM36e2FIMFdCKdui2nzHBnwTGILvaev0OQahxvsvfAKweYALZaeu0g_yptnyG5k-3bc2nuCQYOR1m9Tx8vPa3qEO5kGD-PSdSThQvkRGcZA=w2400'><img alt='Kỉ niệm khai giảng năm học 2019-2020 (Gái A9)' class='lazy' src='https://lh3.googleusercontent.com/XHiKQE772z9tfbMdhf4eOhD_oPG9aPPBM36e2FIMFdCKdui2nzHBnwTGILvaev0OQahxvsvfAKweYALZaeu0g_yptnyG5k-3bc2nuCQYOR1m9Tx8vPa3qEO5kGD-PSdSThQvkRGcZA=w2400'/></a>
</div>
</div>
</div></div>
</div>
</section>
</section>
</main>
<footer id='site-footer'>
</footer>
</section>
<script>
//<![CDATA[
jQuery.fn.extend({GridHorizontal:function(t={}){return GridH(this,t),this}});let GridH=function(t,e={}){e.item;let n=e.gutter||20,r=e.minWidth||300,h=e.maxRowHeight||320,o=t.width(),l=t.children(".item"),s=l.find("img"),f=0,u=0,a=0;!1===["absolute","fixed","relative"].includes(t.css("position"))&&t.css("position","relative");let c=function(t){let i=[];for(let e=0;e<t.length;++e)i[e]={naturalWidth:t[e].naturalWidth,naturalHeight:t[e].naturalHeight,src:t[e].src,ratio:t[e].naturalWidth/t[e].naturalHeight};return i}(s);!function(t){let i=0;for(let e=1,l=t.length;e<=l;e++){if(subArray=t.slice(0,e),o<r)m(subArray,o,f),i=b(subArray[0],o);else{if(!((i=g(subArray))<h))continue;d(subArray,i,f)}w(i+n),t=t.slice(e),l=t.length,e=0}t.length>0&&(d(t,h,f),w(h));a=f}(c);function g(t){let e,r=t.length-1,h=o-r*n,l=0;for(i=0,len=t.length;i<len;i++)l+=t[i].ratio;return e=l>0?h/l:0}function d(t,i,e){let r=0;for(let h=0,o=t.length;h<o;h++)item=t[h],item.width=i*item.ratio,item.height=i,item.offsetTop=e,item.offsetLeft=r,r+=item.width+n}function m(t,i,e){let n=t[0];n.width=i,n.height=b(n,i),n.offsetTop=e,n.offsetLeft=0}function w(t){f+=t}function b(t,i){return i/t.ratio}$(t).css("height",a),function(t,i,e){for(let n=0;n<i.length;++n)i[n].src==e[n].src&&($(t[n]).css("position","absolute").width(e[n].width).height(e[n].height).css("top",e[n].offsetTop).css("left",e[n].offsetLeft),$(i[n]).width(e[n].width).height(e[n].height))}(l,s,c),f=0,u=0};
// Cache selectors
function isElementInViewport(el) {
// special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0
&& rect.bottom >= 0)
||
(rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight))
||
(rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
);
}
// Smooth Scroll
// Ripple
$(document).on("click",".material-ripple",function(t){var a=$(this);0==a.find(".material-ink").length&&a.prepend("<div class='material-ink'></div>");var i=a.find(".material-ink");if(i.removeClass("animate"),!i.height()&&!i.width()){var e=Math.max(a.outerWidth(),a.outerHeight());i.css({height:e,width:e})}var r=t.pageX-a.offset().left-i.width()/2,d=t.pageY-a.offset().top-i.height()/2,h=a.data("ripple-color");i.css({top:d+"px",left:r+"px",background:h}).addClass("animate")});
$(document).ready(function(){
var body = $(document.body);
var nav = $('.header-container')
var navItem = $('.header-container').find('a');
var stickyNav = function(){
var scrollTop = $(document).scrollTop();
if(scrollTop > nav.height()){
nav.addClass('change')
}else{
nav.removeClass('change')
}
}
navItem.each(function(index,item){
$(item).on("click touchstart" , function (event) {
event.preventDefault();
var _this = $(this);
navItem.removeClass('active')
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
navItem.removeClass('active');
$('html,body').animate({
scrollTop: dest - (nav.height() + 15)
}, 1000);
});
})
// Scroll Event
stickyNav();
$(window).on('scroll', stickyNav);
// Menu on scroll active
var topMenuHeight=nav.height()+30,menuItems=nav.find("a"),scrollItems=menuItems.map(function(){var t=$($(this).attr("href"));if(t.length)return t});$(window).scroll(function(){var t=$(this).scrollTop()+topMenuHeight,e=scrollItems.map(function(){if($(this).offset().top<t)return this}),n=(e=e[e.length-1])&&e.length?e[0].id:"";menuItems.removeClass("active"),menuItems.filter("[href='#"+n+"']").addClass("active")});
$('#toggle-nav').on('click', function(e){
e.preventDefault();
nav.toggleClass('active');
})
// Scroll Reveal
var scrollReq = window.requestAnimationFrame || function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = $('.animated-element');
$('.site-timeline .timeline').each(function(index,elem){
$(elem).attr('data-effect','zoomIn')
});
$('.yearbook-timeline .timeline').each(function(index,elem){
if(index % 2 !== 0){
$(elem).attr('data-effect', 'bounceInRight')
}else{
$(elem).attr('data-effect','bounceInLeft')
}
});
var loopAnimateElement = function(){
elementsToShow.each(function (index,element) {
var effect = $(element).attr('data-effect');
if (isElementInViewport(element) && !$(element).hasClass('is-visible')) {
$(element).show().addClass('is-visible animated ' + effect);
}
});
scrollReq(loopAnimateElement);
}
loopAnimateElement();
// Freewall
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js");
var resizePhoto = function(){
var photoWrapper = $('.photo-wrapper');
var photoItem = photoWrapper.find('item');
photoWrapper.removeAttr('style');
photoItem.removeAttr('style');
$('.photo-wrapper').GridHorizontal({
minWidth: 400,
maxRowHeight: 600,
gutter: 5,
});
}
resizePhoto();
$(window).resize(resizePhoto)
// End
body.addClass('dom-loaded animated fadeIn');
})
//]]>
</script>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
<script>
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
//]]>
</script>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
