Move About to Family...
and upgrade about to new 3d phone demo.
diff --git a/css/style.css b/css/style.css
index a866575..86d8cd6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -437,8 +437,8 @@
/* our team section */
#team, #family {
background-color: #0080ff;
- font-weight: 700;
- font-size: 21px;
+ /*font-weight: 700;
+ font-size: 21px; */
}
.hr.invisible_hr {
height: 0;
@@ -468,6 +468,7 @@
.team-name, .family-name {font-size: 21px}
.team-links, .family-links {
padding-top: .75em;
+ color: #07374a;
}
.team-image img, .family-image img {
max-width:150px;
@@ -622,3 +623,210 @@
padding-right: 15px;
}
}
+
+/* --- Mock-up Setting --- */
+/* Paste link to your image 310x550px */
+/* Screen Setting */
+/* --- --- */
+/* --- Animation Setting --- */
+/* --- --- */
+
+h1 {
+ color: #fff;
+ z-index: 10;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+}
+
+h1 span:nth-of-type(1) {
+ font-size: 1em;
+ line-height: 0.5em;
+}
+h1 span:nth-of-type(2) {
+ font-size: .4em;
+ font-weight: 400;
+ line-height: 3.65em;
+ color: #0080ff;
+ background-color: #282828;
+ padding: 3px 10px;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
+}
+h1 span:nth-of-type(3) {
+ font-size: 1.5em;
+ line-height: .85em;
+}
+
+.space {
+ will-change: transform;
+ position: relative;
+ left:50%;
+ -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+ transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+ -webkit-transition: all 600ms;
+ transition: all 600ms;
+}
+
+.space-hover {
+ -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+ transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+}
+
+.phone-container {
+ width: 338px;
+ height: 700px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: translateX(-80%);
+ transform: translateX(-80%);
+ border-radius: 60px;
+}
+
+.phone-front {
+ will-change: transform;
+ width: 336px;
+ height: 700px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background-image: url("https://goo.gl/T50KD8");
+ background-repeat: no-repeat;
+ background-position: -16px 0;
+ background-size: 370px 701px;
+ border-radius: 60px;
+ box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
+ -webkit-transition: -webkit-transform 600ms;
+ transition: -webkit-transform 600ms;
+ transition: transform 600ms;
+ transition: transform 600ms, -webkit-transform 600ms;
+ -webkit-transition: box-shadow 450ms;
+ transition: box-shadow 450ms;
+}
+
+.phone-front-hover {
+ box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
+ -webkit-transition: -webkit-transform 600ms;
+ transition: -webkit-transform 600ms;
+ transition: transform 600ms;
+ transition: transform 600ms, -webkit-transform 600ms;
+ -webkit-transition: box-shadow 450ms;
+ transition: box-shadow 450ms;
+}
+
+.phone-screen {
+ width: 310px;
+ height: 550px;
+ position: relative;
+ left: 0;
+ right: 0;
+ top: 68.5px;
+ margin: auto;
+ background-color: #000;
+ overflow: hidden;
+}
+.phone-screen::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
+ background-image: url("../images/bliss_screens.gif");
+ background-repeat: no-repeat;
+ background-position: 50% 0px;
+ background-size: cover;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+}
+.phone-screen::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(250, 250, 250, 0.1);
+}
+
+.phone-side {
+ will-change: transform;
+ width: 400px;
+ height: 750px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ border-radius: 50px;
+ background-repeat: no-repeat;
+ background-position: 22px 5px;
+ background-size: 400px 742px;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+ transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+ -webkit-transition: all 350ms;
+ transition: all 350ms;
+}
+
+.phone-side-hover {
+ -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+ transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+ -webkit-transition: all 350ms;
+ transition: all 350ms;
+}
+
+@-webkit-keyframes figure-anim {
+ from {
+ border-radius: 50%;
+ -webkit-transform: rotate(0deg) scale(1);
+ transform: rotate(0deg) scale(1);
+ }
+ to {
+ border-radius: 30%;
+ -webkit-transform: rotate(360deg) scale(0.5);
+ transform: rotate(360deg) scale(0.5);
+ }
+}
+
+@keyframes figure-anim {
+ from {
+ border-radius: 50%;
+ -webkit-transform: rotate(0deg) scale(1);
+ transform: rotate(0deg) scale(1);
+ }
+ to {
+ border-radius: 30%;
+ -webkit-transform: rotate(360deg) scale(0.5);
+ transform: rotate(360deg) scale(0.5);
+ }
+}
+@-webkit-keyframes figure-container-anim {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes figure-container-anim {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}