ai có template này cho e xin với ạ

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:skin><![CDATA[ /* Chèn CSS vào đây */ ]]></b:skin> </head>  <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 class='main-container bg_heart'> <section class='main-section' id='memories'>  <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>  </html>

Nguyễn Trần Gia Huy hình như template cũ của Lê Anh Đức

Nguyễn Trần Gia Huy temp này của mình nhưng mình không nhớ để đâu nữa. Bạn có link demo không?

Lê Anh Đức https://leanhducf116.blogspot.com/ đây a

Lê Anh Đức ké xin anh ơi :vv

Mọi người chờ vài hôm anh dev lại bản mới nhé!

[không xác định] hóng hihi

Lê Anh Đức làm xong temp chưa a ơi :v

Xin template kỷ yếu

Lê Anh Đức

kimidev thế thì chắc em chưa lưu được rồi 🙁

kimidev

Lê Anh Đức em lưu rùi mà
lưu đc hoàn toàn. mà kì vãi nó hiện dao diện mặc định của blogger. cho em xin bản góc đi anh ơi

Lê Anh Đức

kimidev bản gốc đấy mà em

Lê Anh Đức

kimidev em tạo blogger mới thử xem

kimidev

Lê Anh Đức blogger đó em vừa tạo khi nảy lun anh à

Phan Trung Trực

kimidev này up host đi a kkk
https://anotepad.com/notes/b5qdqkk5

« Trang trước