From e002d09d2b6b2317fec6caa8836b20e6709c5da3 Mon Sep 17 00:00:00 2001
From: Jinwei Zhao <clarkzjw@gmail.com>
Date: Mon, 4 Apr 2016 14:00:39 +0800
Subject: jinwei.me

---
 deprecated/Blocks/css/main.css       | 176 +++++++++++++++++++++++++++++++++++
 deprecated/Blocks/img/background.jpg | Bin 0 -> 475073 bytes
 deprecated/Blocks/img/future.png     | Bin 0 -> 3888 bytes
 deprecated/Blocks/img/life.png       | Bin 0 -> 3999 bytes
 deprecated/Blocks/img/love.png       | Bin 0 -> 3006 bytes
 deprecated/Blocks/img/music.mp3      | Bin 0 -> 3225530 bytes
 deprecated/Blocks/img/python.png     | Bin 0 -> 4159 bytes
 deprecated/Blocks/img/time.png       | Bin 0 -> 24881 bytes
 deprecated/Blocks/img/train.png      | Bin 0 -> 13711 bytes
 deprecated/Blocks/img/world.png      | Bin 0 -> 7487 bytes
 deprecated/Blocks/index.html         | 112 ++++++++++++++++++++++
 11 files changed, 288 insertions(+)
 create mode 100644 deprecated/Blocks/css/main.css
 create mode 100644 deprecated/Blocks/img/background.jpg
 create mode 100644 deprecated/Blocks/img/future.png
 create mode 100644 deprecated/Blocks/img/life.png
 create mode 100644 deprecated/Blocks/img/love.png
 create mode 100644 deprecated/Blocks/img/music.mp3
 create mode 100644 deprecated/Blocks/img/python.png
 create mode 100644 deprecated/Blocks/img/time.png
 create mode 100644 deprecated/Blocks/img/train.png
 create mode 100644 deprecated/Blocks/img/world.png
 create mode 100644 deprecated/Blocks/index.html

(limited to 'deprecated/Blocks')

diff --git a/deprecated/Blocks/css/main.css b/deprecated/Blocks/css/main.css
new file mode 100644
index 0000000..4733137
--- /dev/null
+++ b/deprecated/Blocks/css/main.css
@@ -0,0 +1,176 @@
+@-webkit-keyframes fade {
+    0% {
+        opacity: 0;
+        margin-top: 10px;
+    }
+    100% {
+        opacity: 1;
+        margin-top: 0px;
+    }
+}
+
+* {
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    font-family: Penumbra, HiraginoSansGB-W3, sans-serif;
+}
+
+h1 {
+    font-size: 22px;
+    line-height: 40px;
+    -webkit-transition: padding 100ms ease;
+}
+
+p {
+    font-size: 20px;
+    line-height: 40px;
+}
+
+img {
+    width: 80px;
+    height: 80px;
+    padding: 10px;
+    -webkit-transition: margin 1000ms ease;
+}
+
+span#loveu {
+    font-size: 17px;
+    line-height: 40px;
+    font: "Microsoft Ya Hei";
+}
+
+div#card {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    top: 50%;
+    left: 50%;
+    margin-top: -200px;
+    margin-left: -300px;
+    box-shadow: 0px 5px 20px -5px black;
+    background: black;
+    font: "Microsoft Yi Baiti", Roboto, "华文行楷";
+}
+
+div.block {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    float: left;
+    box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    color: white;
+    overflow: hidden;
+    -webkit-transition: opacity 145s ease;
+}
+
+div.block:hover > .divin img {
+    margin-top: -20px;
+}
+
+div.block:hover > .divin h1 {
+    padding-top: 20px;
+}
+
+div.block:hover > .divin {
+    margin-top: -100px;
+}
+
+div.block:hover > .time5 {
+    margin-top: -110px;
+}
+
+div.block:hover > .inbox {
+    -webkit-animation: fade 500ms ease 200ms both;
+}
+
+div.divin {
+    width: 100px;
+    height: 140px;
+    padding: 30px 50px;
+    -webkit-transition: margin 300ms ease;
+}
+
+div.inbox {
+    width: 150px;
+    padding: 0px 25px;
+}
+
+div.time {
+    width: 175px;
+    margin: 0px auto;
+    padding: 0px;
+    height: 100px;
+    padding: 10px 12.5px 0px;
+    background: rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.1);
+}
+
+div.time li.list {
+    list-style: none;
+    position: relative;
+    float: left;
+    width: 25px;
+    height: 50px;
+    margin: 0px 0px 10px 0px;
+    font-size: 12px;
+    -webkit-transition: 200ms ease;
+}
+
+div.time li.list:hover {
+    color: yellow;
+    -webkit-transform: scale(1.1);
+}
+
+div#b1 {
+    background-color: #2CC0E2;
+}
+
+div#b2 {
+    background-color: #59D999;
+}
+
+div#b3 {
+    background-color: #7658F9;
+}
+
+div#b4 {
+    background-color: #E9C24E;
+}
+
+div#b5 {
+    background-color: #E55679;
+}
+
+div#b6 {
+    background-color: grey;
+}
+
+span.last {
+    position: absolute;
+    font-size: 72px;
+    line-height: 200px;
+    width: 200px;
+    height: 200px;
+    left: 0px;
+    top: 0px;
+    -webkit-transition: opacity 200ms ease;
+}
+
+span#u {}
+
+span#real {
+    position: absolute;
+    opacity: 0;
+}
+
+div#b6:hover #u {
+    opacity: 0;
+}
+
+div#b6:hover #real {
+    opacity: 1;
+}
diff --git a/deprecated/Blocks/img/background.jpg b/deprecated/Blocks/img/background.jpg
new file mode 100644
index 0000000..ea44056
Binary files /dev/null and b/deprecated/Blocks/img/background.jpg differ
diff --git a/deprecated/Blocks/img/future.png b/deprecated/Blocks/img/future.png
new file mode 100644
index 0000000..7722341
Binary files /dev/null and b/deprecated/Blocks/img/future.png differ
diff --git a/deprecated/Blocks/img/life.png b/deprecated/Blocks/img/life.png
new file mode 100644
index 0000000..ebfe8d2
Binary files /dev/null and b/deprecated/Blocks/img/life.png differ
diff --git a/deprecated/Blocks/img/love.png b/deprecated/Blocks/img/love.png
new file mode 100644
index 0000000..7e914b8
Binary files /dev/null and b/deprecated/Blocks/img/love.png differ
diff --git a/deprecated/Blocks/img/music.mp3 b/deprecated/Blocks/img/music.mp3
new file mode 100644
index 0000000..365839d
Binary files /dev/null and b/deprecated/Blocks/img/music.mp3 differ
diff --git a/deprecated/Blocks/img/python.png b/deprecated/Blocks/img/python.png
new file mode 100644
index 0000000..1ff51c3
Binary files /dev/null and b/deprecated/Blocks/img/python.png differ
diff --git a/deprecated/Blocks/img/time.png b/deprecated/Blocks/img/time.png
new file mode 100644
index 0000000..b4196cd
Binary files /dev/null and b/deprecated/Blocks/img/time.png differ
diff --git a/deprecated/Blocks/img/train.png b/deprecated/Blocks/img/train.png
new file mode 100644
index 0000000..9a668b9
Binary files /dev/null and b/deprecated/Blocks/img/train.png differ
diff --git a/deprecated/Blocks/img/world.png b/deprecated/Blocks/img/world.png
new file mode 100644
index 0000000..f1e1d5d
Binary files /dev/null and b/deprecated/Blocks/img/world.png differ
diff --git a/deprecated/Blocks/index.html b/deprecated/Blocks/index.html
new file mode 100644
index 0000000..eea48b0
--- /dev/null
+++ b/deprecated/Blocks/index.html
@@ -0,0 +1,112 @@
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>For U</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/main.css">
+    <style type="text/css">
+    body {
+        background-repeat: repeat;
+        background-color: #CEE3F6;
+        background-image: url(img/background.jpg);
+    }
+    </style>
+</head>
+
+<body>
+    <div id="card">
+        <div class="block" id="b1">
+            <div class="divin love">
+                <img src="./img/love.png">
+                <h1>爱情</h1>
+            </div>
+            <div class="inbox">
+                <p>关于你的每件事</p>
+            </div>
+        </div>
+        <div class="block" id="b2">
+            <div class="divin">
+                <img src="./img/life.png">
+                <h1>生命</h1>
+            </div>
+            <div class="inbox">
+                <p>一直在前行</p>
+            </div>
+        </div>
+        <div class="block" id="b3">
+            <div class="divin">
+                <img src="./img/train.png">
+                <h1>未来</h1>
+            </div>
+            <div class="inbox">
+                <p>说好的约定</p>
+            </div>
+        </div>
+        <div class="block" id="b4">
+            <div class="divin">
+                <img src="./img/world.png">
+                <h1>世界</h1>
+            </div>
+            <div class="inbox">
+                <p>将会慢慢老去</p>
+                <p>
+                </p>
+            </div>
+        </div>
+        <div class="block" id="b5">
+            <div class="divin time5">
+                <img src="./img/time.png">
+                <h1>时间</h1>
+            </div>
+            <div class="inbox time">
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    一
+                </li>
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    二
+                </li>
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    三
+                </li>
+                <li class="list">
+                    星<br>
+                    期<br> 
+                    四
+                </li>
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    五
+                </li>
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    六
+                </li>
+                <li class="list">
+                    星<br> 
+                    期<br> 
+                    日
+                </li>
+                <span id="loveu">每一句晚安</span>
+            </div>
+        </div>
+        <div class="block" id="b6">
+            <div class="divin">
+                <img src="./img/python.png">
+                <h1>你</h1>
+            </div>
+            <div class="inbox">
+                <p>我的世界</p>
+            </div>
+        </div>
+    </div>
+    <audio src="img/music.mp3" preload="auto" autoplay="true" loop="true"></audio>
+</body>
+</html>
-- 
cgit v1.2.3