前几天一位“好丽友”（也可以说是好朋友）找我做一个有关于百日恋爱纪念的WEB，可是我可好歹也是一名“贵族”(╬￣皿￣)=○（汪星人）岂能帮他们做狗粮？（不好意思，我还是败在了他要请我吃太湖水产上ㄟ( ▔, ▔ )ㄏ），然后他告诉我截稿日是第二天（我 o(´^｀)o不做了！）真香ヾ(◍°∇°◍)ﾉﾞ（败在了加一顿火锅上）
我会抽时间把本作品详细展示放在B站上（好吧，其实也就那么三页 ╮(─▽─)╭ ）https://www.bilibili.com/video/av62581871
更多有趣的HTML礼物详情请看我的B站合集https://www.bilibili.com/video/av84894004
大学生代码学习群交流：871352155（无论你会C/C++还是Java，Python还是PHP......有兴趣我们都欢迎你的加入，不过还请各位认真填写加群信息）
学习交流或需求代码请私聊我或者在我的B站上私聊，当然最好是在B站上，因为我很少看CSDN。（如果你有与之相称的作品我们可以以物易物或者B站来一波素质四连“关注，点赞，投币，收藏”加上csdn关注然后私聊给我邮箱即可获得）
废话不多说，直接进入主题，这次的WEB设计我采用的是上次那个生日蛋糕不同的方案（说实话，上次写的那个觉得有点Low了）有兴趣的朋友可以去看看那个博客。https://blog.csdn.net/weixin_43341045/article/details/88410475
更新第二弹情人节HTML礼物https://blog.csdn.net/weixin_43341045/article/details/104291776
壹.首页
我先展示一下首页的具体样子，就是下面这一张图片，本来上面的图片是我朋友各种秀翻天用狗粮来做狗粮的图片，为了隐私保护和“汪贵族保护法”（乱编的φ(>ω<*) ）我就换上了我的肥宅快乐图，请不要介意，上面图片啊，文字啊都是你快乐就可以修改的，为了保护朋友的写的各种隐私和情话我就换了一些国外的情话诗句之类的。每一页也有背景音乐（我用的是米津玄师的“打上花火”，山下智久的“Loveless“，久石让的”summer“）各位可以根据自己需要是可以更换的。
因为这是个WEB，我用截图然后PS把它们都合成在了一起所以有一些细节方面的东西可能没展示出来。
大致就是顶部的几个按钮分别代表了，首页顶-邂逅语（就是用什么样的情话来开门见山）-相册（其中有三个嵌套按钮“情诗”'相册"“相册加情诗”）-情歌（在这里每一个图片上面都有一个按钮，你自己录歌或者录视频然后保存就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>最顶部靠右，有两个登陆口，一个是通往一个动画，另一个是通往最主要的情诗(￣３￣)a
贰.动画
请记住，这是一个动画，只不过最后呈现是这个样子，然后上面有个长按钮可以再次回到主页。各位也可以自己做一个动画然后连接到最开始的那个登录口就可以了，毕竟我这个动画也是看的别人的。(｀・ω・´)
<!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>叁.情诗
情诗页面，里面的爱心是动态的，这个诗是你自己写哈，在这里为了保护我老友的隐私，我换成了普希金写的《我曾经爱过你》
<!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>