A few days ago a "Orion" (can also be said to be a good friend) I did find about a hundred days to commemorate the love of the WEB, but I can somehow also a "noble" (╬¯ dish ¯) = ○ (Wang Xing people ) how can we do to help them dog food? (Sorry, I was lost in the Taihu he would ask me to eat aquatic ei (▔, ▔) ㄏ on), and then he told me the next day Deadline (I o ( '^ `) o do not do!) Shannon really ヾ (◍ ° ∇ ° ◍) Techno ゙ (lost in the hot meal plus)
I will take the time to show this work in detail on the B station (well, in fact, also then three ╮ (─ ▽ ─) ╭) https://www.bilibili.com/video/av62581871
HTML gift more interesting details see my collection station B https://www.bilibili.com/video/av84894004
Students learn the code exchange group: 871 352 155 (whether you C / C ++ or Java, Python or PHP ...... We are interested you are welcome to join, but also please fill out the additive group information)
Learning Exchange or demand Please whisper me or whisper in my station B, the best course is on the B station, because I rarely see CSDN . (If you have a commensurate works we can barter or B station four with a wave of quality "concerns, thumbs up, coin, collection" plus csdn concern then whisper to my mailbox to get)
Ado, directly to the theme, this WEB design I used the last time that a different birthday cake scheme (to be honest, wrote last time that felt a little Low of) friends who are interested can go and see the blog . https://blog.csdn.net/weixin_43341045/article/details/88410475
The second bomb update HTML Valentine's Day gift https://blog.csdn.net/weixin_43341045/article/details/104291776
One Home
Let me show you what specific way home, this is the following picture, the original picture above is my friend to do a variety show earthshaking dog food with dog food images, in order to protect the privacy and "Wang nobility Protection Act" (ed chaos the φ (> ω <*)) I put on my happy home fat map, please do not mind, the picture above ah, ah are you happy text can be modified, in order to protect the privacy of friends and write a variety of love, then I changed some of the foreign words of love poems and the like. Each page also has background music (I use KENSHI YONEZU of "Fireworks marked" Yamashita Tomohisa "Loveless", Joe Hisaishi's "summer") you can according to their needs can be replaced.
Because this is a WEB, then PS I shot them all together in a synthesis so there are some details of what may not be displayed.
Is roughly a few buttons at the top representing the Home top - encounter language (that is, what kind of love, then come straight to the point) - album (which has three nested buttons "love poems" 'Album' 'album plus poems ") - Love Song ( in the picture above where each has a button, record your own songs or record video and save it ok)
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta name="keywords" content="" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!-- color switch -->
<link href="css/blast.min.css" rel="stylesheet" />
<!-- portfolio -->
<link href="css/portfolio.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- //online-fonts -->
</head>
<body>
<!-- blast color scheme -->
<audio autoplay="autoplay" loop="loop" preload="auto"
src="DAOKO (ダヲコ) _ 米津玄師 (よねづ けんし) - 打上花火.mp3">
</audio>
<div class="blast-box">
<div class="blast-frame">
<p>color schemes</p>
<div class="blast-colors d-flex justify-content-center">
<div class="blast-color">#ff4f81</div>
<div class="blast-color">#77ba00</div>
<div class="blast-color">#ffa900</div>
<div class="blast-color">#2ec4b6</div>
<div class="blast-color">#42a5f5</div>
<!-- you can add more colors here -->
</div>
<p class="blast-custom-colors">Choose Custom color</p>
<input type="color" name="blastCustomColor" value="#cf2626">
</div>
<div class="blast-icon"><i class="fa fa-cog" aria-hidden="true"></i></div>
</div>
<!-- //blast color scheme -->
<!-- top header -->
<div class="header-top bg-theme" data-blast="bgColor">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="d-flex header-w3_pvt">
<li>
<span class="fa fa-envelope-open"></span>
<a href="mailto:[email protected]" class="text-white">[email protected]</a>
</li>
<li>
<span class="fa fa-phone"></span>
<p class="d-inline text-white">+XXX XXXX XXX</p>
</li>
</ul>
</div>
<div class="col-md-6 hearder-right-w3_pvt">
<ul class="d-flex header-w3_pvt justify-content-lg-end">
<li><button type="button" class="btn w3ls-btn d-block" data-toggle="modal" aria-pressed="false"
data-target="#exampleModal1">
<span class="fa fa-sign-in"></span>Love Letter
</button>
</li>
<li>
<button type="button" class="btn w3ls-btn btn-2 d-block" data-toggle="modal" aria-pressed="false"
data-target="#exampleModal">
<span class="fa fa-lock"></span> Love Cartoon
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- //top header -->
<!-- banner -->
<div id="home">
<!-- header -->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand text-white" href="index.html">
Trips
</a>
</h1>
<button class="navbar-toggler ml-md-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-auto text-center">
<li class="nav-item active mr-lg-3 mt-lg-0 mt-sm-3">
<a class="nav-link" href="index.html" data-blast="color">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mr-lg-3 mt-lg-0 mt-3">
<a class="nav-link scroll" href="#about">Meet Unexpectedly</a>
</li>
<li class="nav-item dropdown mr-lg-3 mt-lg-0 mt-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Album
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item scroll" href="#services">Poem</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item scroll" href="#portfolio">Photo</a>
<a class="dropdown-item scroll" href="#posts">Picture blog</a>
</div>
</li>
<li class="nav-item mt-lg-0 mt-3">
<a class="nav-link scroll" href="#team">Sing Song</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- //header -->
<div class="callbacks_container">
<ul class="rslides" id="slider3">
<li class="banner banner1">
<div class="container">
<div class="banner-text">
<div class="slider-info">
<span class="line">collect moments..</span>
<h3>a <span data-blast="bgColor">delightful</span> trip awaits!</h3>
<p class="text-white">With the wonder of your love, the sun above always shines.</p>
<a class="btn bg-theme mt-4 w3_pvt-link-bnr scroll text-white" data-blast="bgColor"
href="#about" role="button">View
More</a>
</div>
</div>
</div>
</li>
<li class="banner banner2">
<div class="container">
<div class="banner-text">
<div class="slider-info">
<span class="line">collect moments..</span>
<h3>a <span data-blast="bgColor">delightful</span> trip awaits!</h3>
<p class="text-white">maybe god wants us to meet a few wrong people before meeting the right one, so that when we finally meet the person, we will know how to be grateful. </p>
<a class="btn bg-theme mt-4 w3_pvt-link-bnr scroll text-white" href="#about" role="button"
data-blast="bgColor">View
More</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- //banner -->
<!-- about -->
<div class="about-wthree" id="about">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 about-right-bg"></div>
<div class="col-lg-7 about-left-wthree bg-theme" data-blast="bgColor">
<div class="title-desc text-right pb-sm-3">
<h3 class="main-title-w3pvt text-white text-capitalize">Meet Unexpectedly</h3>
<p class="text-white">The person I love is my lover.
</p>
</div>
<p class="my-3 text-right text-white child_second">For love, you dare or can not.</p>
<p class="my-3 text-right text-white child_second">I like people, he has a body of warmth.</p>
<div class="ml-auto text-right">
<a href="#services" class="text-capitalize text-dark w3_pvt-link-bnr btn bg-light scroll mt-sm-4">view
more</a>
</div>
</div>
</div>
</div>
</div>
<!-- about -->
<!-- services -->
<section class=" services-wthreepvt position-relative" id="services">
<div class="container">
<div class="row">
<div class="col-lg-6 service-sub-grids">
<div class="d-flex services-box">
<span class="icon">
<i class="fa fa-pencil" data-blast="color"></i>
</span>
<div class="service-content">
<span>You make my heart smile.</span>
<h4>我的心因你而笑。</h4>
</div>
</div>
<div class="d-flex services-box">
<span class="icon">
<i class="fa fa-rocket" data-blast="color"></i>
</span>
<div class="service-content">
<span>Love is a fabric that nature wove and fantasy embroidered.</span>
<h4>爱情是一方织巾，用自然编织，用幻想点缀。</h4>
</div>
</div>
<div class="d-flex services-box">
<span class="icon">
<i class="fa fa-laptop" data-blast="color"></i>
</span>
<div class="service-content">
<span>The road to a lover's house is never long.</span>
<h4>通往爱人家里的路总不会漫长</h4>
</div>
</div>
<div class="service-bottom-img">
<img src="images/g1.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
<div class="col-lg-6">
<div class="services-bottom">
<div class="service-txt">
<h5 data-blast="color">、I'll think of you every step of the way. <br>我会想你，在漫漫长路的每一步</h5>
<p class="my-3 text-right">感受到你皮肤的温度
一般幸福的滋味涌上心头</p>
</div>
</div>
<div class="my-auto service-top-img">
<img src="images/p3.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
</div>
</div>
</section>
<!-- //services -->
<!-- about bottom -->
<div class="about-wthree1 bg-theme" data-blast="bgColor">
<div class="container">
<div class="row">
<div class="col-lg-7 about-left-wthree">
<div class="title-desc pb-sm-3">
<h3 class="main-title-w3pvt text-white text-capitalize">520</h3>
<p class="text-white">Love me, you say, how hard it is to put it in your heart.</p>
</div>
<p class="my-3 text-white child_second">Love your life, love you for thousands of years!</p>
<p class="my-3 text-white child_second">Meeting you is the surprise of my life.I love you from the beginning, check in.</p>
<div class="ml-auto">
<a href="#portfolio" class="text-capitalize text-dark w3_pvt-link-bnr btn bg-light scroll mt-sm-4">view
more</a>
</div>
</div>
<div class="col-lg-5">
<img src="images/520.jpg" alt="" class="img-fluid rounded" />
</div>
</div>
</div>
</div>
<!-- about bottom -->
<!-- pricing plans -->
<!-- //pricing plans -->
<!-- portfolio -->
<section class="wthree-row w3-gallery cliptop-portfolio-wthree pt-lg-5" id="portfolio">
<div class="container-fluid">
<div class="title-desc pb-3">
<h3 class="main-title-w3pvt text-capitalize">Photo</h3>
<p>I miss you so much already and I haven't even left yet!</p>
</div>
<ul class="demo row py-lg-5 py-sm-4 pb-4">
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/p4.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/222.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/p5.png" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/666.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-4 col-sm-6">
<div class="gallery-grid1">
<img src="images/p2.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-4 col-sm-6">
<div class="gallery-grid1">
<img src="images/p3.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-4 col-sm-6 mx-auto">
<div class="gallery-grid1">
<img src="images/t4.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/111.png" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/banner1.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/banner2.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
<li class="col-lg-3 col-sm-6">
<div class="gallery-grid1">
<img src="images/p1.jpg" alt=" " class="img-fluid img-thumbnail" />
</div>
</li>
</ul>
</div>
</section>
<!-- //portfolio -->
<!-- blog -->
<section class="blog_w3ls py-lg-5" id="posts">
<div class="container py-sm-5 py-4">
<div class="title-desc text-right pb-sm-3">
<h3 class="main-title-w3pvt text-capitalize">Picture blog</h3>
<p>Every day without you is like a book without pages.</p>
</div>
<div class="row space-sec">
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-sm-0 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#exampleModal2" data-toggle="modal" aria-pressed="false" data-target="#exampleModal2"
role="button">
<img class="card-img-bottom" src="images/033.jpg" alt="Card image cap">
<span class="fa fa-user post-icon bg-theme" data-blast="bgColor" aria-hidden="true"></span>
</a>
</div>
<div class="card-body">
<h5 class="blog-title card-title font-weight-bold">
<a href="#exampleModal2" data-toggle="modal" aria-pressed="false" data-target="#exampleModal2"
role="button">It's better to have met than never to meet.</a>
</h5>
<p>You said you won the world because of me.It's better to have met than never to meet.
</p>
<button type="button" class="btn blog-btn wthree-bnr-btn mt-3" data-blast="color"
data-toggle="modal" aria-pressed="false" data-target="#exampleModal2">
Read more
</button>
</div>
</div>
</div>
<!-- //blog grid -->
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-md-0 mt-sm-5 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#exampleModal3" data-toggle="modal" aria-pressed="false" data-target="#exampleModal3"
role="button">
<img class="card-img-bottom" src="images/t4.jpg" alt="Card image cap">
<span class="fa fa-user post-icon bg-theme" data-blast="bgColor" aria-hidden="true"></span>
</a>
</div>
<div class="card-body">
<h5 class="blog-title card-title font-weight-bold">
<a href="#exampleModal3" data-toggle="modal" aria-pressed="false" data-target="#exampleModal3"
role="button">Flowers in the United States, have you in my mind.</a>
</h5>
<p>The city where you live is the source of my longing.</p>
<button type="button" class="btn blog-btn wthree-bnr-btn mt-3" data-blast="color"
data-toggle="modal" aria-pressed="false" data-target="#exampleModal3">
Read more
</button>
</div>
</div>
</div>
<!-- //blog grid -->
<!-- blog grid -->
<div class="col-lg-4 col-md-6 mt-lg-0 mt-4 mx-auto">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#exampleModal4" data-toggle="modal" aria-pressed="false" data-target="#exampleModal4"
role="button">
<img class="card-img-bottom" src="images/111.png" alt="Card image cap">
<span class="fa fa-user post-icon bg-theme" data-blast="bgColor" aria-hidden="true"></span>
</a>
</div>
<div class="card-body">
<h5 class="blog-title card-title font-weight-bold">
<a href="#exampleModal4" data-toggle="modal" aria-pressed="false" data-target="#exampleModal4"
role="button">It's better to have met than never to meet.</a>
</h5>
<p>The city where you live is the source of my longing.</p>
<button type="button" class="btn blog-btn wthree-bnr-btn mt-3" data-toggle="modal"
aria-pressed="false" data-target="#exampleModal4" data-blast="color">
Read more
</button>
</div>
</div>
</div>
<!-- //blog grid -->
</div>
</div>
</section>
<!-- //blog -->
<!-- team -->
<section class="team-wthree py-3 position-relative bg-theme" data-blast="bgColor" id="team">
<div class="container py-lg-5">
<div class="title-desc text-left pb-3">
<h3 class="main-title-w3pvt text-capitalize text-white">Sing Song</h3>
<p class="text-white">With the wonder of your love, the sun above always shines.It's better to have met than never to meet.</p>
</div>
<div class="row">
<div class="col-lg-8">
<div id="carouselExampleIndicators" class="carousel slide py-lg-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6">
<div class="box5">
<img src="images/011.jpg" alt="" class=" img-fluid" />
<ul class="icon">
<li><a href="images/g4.jpg" class="fa fa-link"></a></li>
</ul>
<div class="box-content">
<h3 class="title">First</h3>
<span class="post">Lucky</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box5">
<img src="images/004.jpg" alt="" class=" img-fluid" />
<ul class="icon">
<li><a href="images/012.jpeg" class="fa fa-search"></a></li>
</ul>
<div class="box-content">
<h3 class="title">Second</h3>
<span class="post">Love</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<div class="box5">
<img src="images/013.jpeg" alt="" class=" img-fluid" />
<ul class="
icon">
<li><a href="images/t1.jpg" class="fa fa-search"></a></li>
<li><a href="images/003.png" class="fa fa-link"></a></li>
</ul>
<div class="box-content">
<h3 class="title">Thired</h3>
<span class="post">Happy</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box5">
<img src="images/2.jpg" alt="" class=" img-fluid" />
<ul class="icon">
<li><a href="images/t3.jpg" class="fa fa-search"></a></li>
<li><a href="images/002.png" class="fa fa-link"></a></li>
</ul>
<div class="box-content">
<h3 class="title">Fourth</h3>
<span class="post">happiness</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 team-right-grid position-absolute p-0 mx-auto">
<img src="images/222.jpg" alt="" class="img-fluid" />
</div>
</div>
</div>
</section>
<!-- //team -->
<!-- contact -->
<DIV>
<a> ♥♡♥♡♥♡♥♡♥♡♥♡ヾ(=･ω･=)o♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥</a>
</DIV>
<!-- footer -->
<footer class="cpy-right bg-theme" data-blast="bgColor">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="wthree-social">
<ul>
<li>
<a href="#">
<span class="fa fa-facebook-f icon_facebook"></span>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-twitter icon_twitter"></span>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-dribbble icon_dribbble"></span>
</a>
</li>
<li>
<a href="#">
<span class="fa fa-google-plus icon_g_plus"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 text-lg-right mt-lg-4 mt-4">
<p>I loved you some time ago; since then I feel that I love you a thousand times better</p>
</div>
</div>
</div>
</footer>
<!-- //footer -->
<!-- login -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" data-blast="bgColor">
<h5 class="modal-title" id="exampleModalLabel">Signin</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post" class="p-3">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Yourname</label>
<input type="text" class="form-control" placeholder="" name=" name" id="recipient-name"
required="">
</div>
<div class="form-group">
<label for="password" class="col-form-label">YourBirthday</label>
<input type="password" class="form-control" placeholder="" name="Password" id="password"
required="">
</div>
<div class="right-w3l">
<input type="button" class="form-control" value="Login" οnclick="myfunction2()"style="background-color: #feeeed">
</div>
<div class="row sub-w3l my-3">
<div class="col sub-w3_pvt">
<input type="checkbox" id="brand1" value="">
<label for="brand1">
<span></span>Remember me?</label>
</div>
<div class="col forgot-w3l text-right">
<a href="#" class="text-secondary">Forgot Password?</a>
</div>
</div>
<p class="text-center dont-do">Don't have an account?
<a href="#" data-toggle="modal" data-target="#exampleModal1" class="text-secondary">
Register Now</a>
</p>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function myfunction()
{
var x=document.getElementById("recipientrname").value;
var y=document.getElementById("password1").value;
if(x==""||y=="")
{alert("You won't forget your name, will you?XX (～￣(OO)￣)ブ")}
else if (x=="LEIMU"&& y=="0202")
{window.location.href="../Letter/letter.html";}
else {alert("You won't forget your birthday, will you? (≧∇≦)ﾉ");}}
function myfunction2()
{
var x=document.getElementById("recipient-name").value;
var y=document.getElementById("password").value;
if(x==""||y=="")
{alert("You won't forget your name, will you?XX (～￣(OO)￣)ブ")}
else if (x=="leimu"&& y=="0202")
{window.location.href="../cartoon/cartoon.html";}
else {alert("You won't forget your birthday, will you? (≧∇≦)ﾉ");}}
</script>
<!-- //login -->
<!-- register -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" data-blast="bgColor">
<h5 class="modal-title" id="exampleModalLabel1">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post" class="p-3">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Yourname</label>
<input type="text" class="form-control" placeholder="" name=" name" id="recipientrname"
required="">
</div>
<div class="form-group">
<label for="password1" class="col-form-label">YourBirthday</label>
<input type="password" class="form-control" placeholder="" name="Password" id="password1"
required="">
</div>
<div class="sub-w3l">
<div class="sub-w3_pvt">
<input type="checkbox" id="brand2" value="">
<label for="brand2" class="mb-3">
<span></span>I Accept to the Terms & Conditions</label>
</div>
</div>
<div class="right-w3l">
<input type="button" class="form-control" value="Register" οnclick="myfunction()" style="background-color: #feeeed">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- // register -->
<!-- blog modal1 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-theme">
<h5 class="modal-title" id="exampleModalLabel2">Precious things are very few in this world. That is the reason there is just one you.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<img src="images/0333.jpg" class="img-fluid" alt="" />
<p class="text-left my-4">
You don't love a woman because she is beautiful, but she is beautiful because you love her.
</p>
</div>
</div>
</div>
</div>
<!-- //blog modal1 -->
<!-- blog modal2 -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-theme">
<h5 class="modal-title" id="exampleModalLabel3">Wherever you go, whatever you do, I will be right here waiting for you.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<img src="images/t2.jpg" class="img-fluid" alt="" />
<p class="text-left my-4">
Life is the flower for which love is the honey.
</p>
</div>
</div>
</div>
</div>
<!-- //blog modal2 -->
<!-- blog modal3 -->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-theme">
<h5 class="modal-title" id="exampleModalLabel4">i love you not because of who you are, but because of who i am when i am with you.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<img src="images/t3.jpg" class="img-fluid" alt="" />
<p class="text-left my-4">
Love is like a butterfly. It goes where it pleases and it pleases where it goes.
</p>
</div>
</div>
</div>
</div>
<!-- //blog modal3-->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<!-- //js -->
<!-- script for password match -->
<script>
</script>
<!-- script for password match -->
<!-- Banner Responsiveslides -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use"$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!-- //Banner Responsiveslides -->
<!-- portfolio -->
<script src="js/jquery.picEyes.js"></script>
<script>
$(function () {
//picturesEyes($('.demo li'));
$('.demo li').picEyes();
});
</script>
<!-- //portfolio -->
<!-- start-smooth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>
<!-- //end-smooth-scrolling -->
<!-- smooth-scrolling-of-move-up -->
<script>
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<script src="js/SmoothScroll.min.js"></script>
<!-- //smooth-scrolling-of-move-up -->
<!-- color switch -->
<script src="js/blast.min.js"></script>
<!-- //color switch -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.js"></script>
</body>
</html>
The very top right, there are two landing ports, one is the gateway to a movie, and the other is the gateway to the most important poems (¯3¯) a
II. Animation
Remember, this is a movie, but the final rendering is like this, then there is a long button to return to the top page again. You can also make yourself a movie and then connect to the login port the beginning of it, after all, I also see this animation of others. ( `· Ω · ')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我想射中你的心</title>
<link rel="stylesheet" href="css/love.css">
<script type="text/javascript">
function delayURL(url,time){
setTimeout("top.location.href = '" + url + "'",time);
}
</script>
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto"
src="久石譲 - Summer (PIANO VER.).mp3">
</audio>
<a href="#" οnclick="delayURL('../Home/index.html',1500)">
<button class="bubbly-button">I would like to come back to Homepage!(o゜▽゜)o☆[GO!]</button> </a>
<script>
var animateButton = function(e) {
e.preventDefault;
//reset animation
e.target.classList.remove('animate');
e.target.classList.add('animate');
setTimeout(function(){
e.target.classList.remove('animate');
},700);
};
var classname = document.getElementsByClassName("bubbly-button");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', animateButton, false);
}
</script>
<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">
<div class="body_left">
<img src="images/biubiubiu.gif" alt="" οndragstart='return false;'>
</div>
<div class="body_center love">
<div class="block">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
<div class="footer">
<div class="border">
<div class="border-top"></div>
<div class="border-bottom"></div>
</div>
<div class="copyright">
<div id="createTime"><span>Time:</span> 2019/7/28</div>
</div>
</div>
<script type="text/javascript" src="js/love.js"></script>
</body>
</html>Three. Poems
Poems page, which love is dynamic, you write this poem Kazakhstan, where in order to protect the privacy of my old friend, I replaced the Pushkin wrote, "I have loved you."
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>一封情书</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
function delayURL(url,time){
setTimeout("top.location.href = '" + url + "'",time);
}
</script>
</head>
<body>
<audio autoplay="autoplay" loop="loop" preload="auto"
src="山下智久 (やました ともひさ) - Loveless (Instrumental).mp3">
</audio>
<a href="#" onclick="delayURL('../Home/index.html',1500)">
<button class="bubbly-button">（づ￣3￣）づ╭❤～</button> </a>
<script>
var animateButton = function(e) {
e.preventDefault;
//reset animation
e.target.classList.remove('animate');
e.target.classList.add('animate');
setTimeout(function(){
e.target.classList.remove('animate');
},700);
};
var classname = document.getElementsByClassName("bubbly-button");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', animateButton, false);
}
</script>
<div>
<canvas id="canvas" width="500" height="500"></canvas>
</div>
<script src='js/easeljs.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
