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);
+ }
+}
diff --git a/images/bliss_screens.gif b/images/bliss_screens.gif
new file mode 100644
index 0000000..987cac2
--- /dev/null
+++ b/images/bliss_screens.gif
Binary files differ
diff --git a/images/phone_front.svg b/images/phone_front.svg
new file mode 100644
index 0000000..eeadb13
--- /dev/null
+++ b/images/phone_front.svg
@@ -0,0 +1,43 @@
+<svg id="Группа_1" data-name="Группа 1" xmlns="http://www.w3.org/2000/svg" width="862" height="1764.03" viewBox="0 0 862 1764.03">
+ <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <rdf:Description rdf:about=""/>
+ </rdf:RDF>
+</x:xmpmeta>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<?xpacket end="w"?></metadata>
+<defs>
+ <style>
+ .cls-1 {
+ fill: #3a3a3a;
+ }
+
+ .cls-2 {
+ fill-rule: evenodd;
+ }
+ </style>
+ </defs>
+ <rect id="Прямоугольник_скругл._углы_1" data-name="Прямоугольник, скругл. углы 1" class="cls-1" x="191.5" y="28.5" width="496" height="1716" rx="10" ry="10"/>
+ <path id="iphone_black" data-name="iphone black" class="cls-2" d="M1344.5,4869.5h-5.03V5986.4a141.06,141.06,0,0,1-127.07,140.44,1.993,1.993,0,0,0-1.84-1.21h-8.81a2,2,0,0,0-1.99,1.87c-0.4.01-.81,0.02-1.21,0.02h-14.81a1.989,1.989,0,0,0-1.99-1.89h-8.81a1.983,1.983,0,0,0-1.99,1.89h-16.09a1.983,1.983,0,0,0-1.99-1.89h-8.81a1.989,1.989,0,0,0-1.99,1.89h-16.02a1.983,1.983,0,0,0-1.99-1.89h-8.87a1.983,1.983,0,0,0-1.99,1.89h-16.02a1.989,1.989,0,0,0-1.99-1.89h-8.82a1.98,1.98,0,0,0-1.98,1.89h-16.03a1.983,1.983,0,0,0-1.99-1.89h-8.87a1.989,1.989,0,0,0-1.99,1.89H1005.5v-0.02a2.006,2.006,0,0,0-2-2h-16a2,2,0,0,0-2,2v0.02h-24V6126a2.5,2.5,0,0,0-2.5-2.5H868a2.5,2.5,0,0,0-2.5,2.5v1.52h-22v-0.02a2,2,0,0,0-2-2h-16a2,2,0,0,0-2,2v0.02H773.489a1.987,1.987,0,0,0-1.989-1.89h-8.875a1.987,1.987,0,0,0-1.989,1.89H744.614a1.987,1.987,0,0,0-1.989-1.89h-8.812a1.987,1.987,0,0,0-1.99,1.89H715.8a1.987,1.987,0,0,0-1.989-1.89h-8.876a1.987,1.987,0,0,0-1.989,1.89H686.927a1.987,1.987,0,0,0-1.99-1.89h-8.812a1.987,1.987,0,0,0-1.989,1.89H658.052a1.987,1.987,0,0,0-1.99-1.89H647.25a1.987,1.987,0,0,0-1.989,1.89H629.239a1.987,1.987,0,0,0-1.989-1.89h-8.813a1.99,1.99,0,0,0-1.894,1.38A141.041,141.041,0,0,1,487.53,5986.4V5029.5H484.5a1,1,0,0,1-1-1v-126a1,1,0,0,1,1-1h3.03v-32H484.5a1,1,0,0,1-1-1v-126a1,1,0,0,1,1-1h3.03v-82H484.5a1,1,0,0,1-1-1v-70a1,1,0,0,1,1-1h3.03v-82.87c0-77.94,63.094-141.13,140.923-141.13h570.1c77.83,0,140.92,63.19,140.92,141.13V4741.5h5.03a1,1,0,0,1,1,1v126A1,1,0,0,1,1344.5,4869.5Zm-567-404a14,14,0,1,0,14,14A14,14,0,0,0,777.5,4465.5Zm136,1618a68,68,0,1,0-68-68A68,68,0,0,0,913.5,6083.5Zm-0.022-1669.13a10,10,0,1,0,9.994,10A10,10,0,0,0,913.478,4414.37ZM987.5,4477.5a4,4,0,0,0-4-4h-140a4,4,0,0,0-4,4v4a4,4,0,0,0,4,4h140a4,4,0,0,0,4-4v-4Zm-74,1477c33.137,0,60,27.31,60,61s-26.863,61-60,61-60-27.31-60-61S880.363,5954.5,913.5,5954.5Z" transform="translate(-483.5 -4363.5)"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5f19f48..4f41e85 100644
--- a/index.html
+++ b/index.html
@@ -65,59 +65,34 @@
</div>
</div>
<div id="about" class="row cover">
- <h2 class="text-center">About Bliss</h2>
- <div class="row">
- <div class="col-md-6 text-center about-info">
- <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
- <p class="text-center">We are a team of designers, developers, maintainers, and business professionals who work together to help achieve the dreams of our teammates and the Android Community. Our goal is to help provide a unique learning environment, using the FOSS
- mentality, and not only train people how to make and monetize what they aspire, but also help provide unique business opportunities for already existing projects too. </p>
- <p class="text-center">If you are interested in joining our team, please fill out the form found here:
- <a href="https://goo.gl/forms/PdiaAj1PojosmehK2"></a>
- </p>
- <a href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
- <p></p>
- <p class="text-center">Or if you represent an already existing project and would like to join the <a href="#family">Bliss Family</a>, please fill out the form found here:
- <a href="https://goo.gl/kAb7ti"></a>
- </p>
- <a href="https://goo.gl/kAb7ti">Join Bliss Family</a>
- <p></p>
- </div>
- <div class="col-md-6 about-tools">
- <p class="text-center">The nature of our business is to train and develop. So we have quite the diverse list of things we have experience with, and the list is growing constantly
- <br>
- <br>Here's a few of the types of projects we work on</p>
- <div class="col-xs-6">
- <ul>
- <li>Android Development</li>
- <li>Graphic Design</li>
- <li>Web Development</li>
- <li>IOT Software Development</li>
- <li>Server Admin</li>
- <li>Prototype Design</li>
- <li>Animation</li>
- <li>Brand Imaging</li>
- </ul>
- </div>
- <div class="col-xs-6">
- <ul>
- <li>Development Training</li>
- <li>Design Training</li>
- <li>Team Management</li>
- <li>Marketing</li>
- <li>Product Technology Strategy</li>
- <li>New Product Development</li>
- <li>Product Testing</li>
- <li>OEM Software Resources</li>
- </ul>
- </div>
- </div>
- <div class="row break">
- <div class="centered col-md-6 about-last">
- <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
- </div>
- </div>
- </div>
+ <div class="container">
+ <div class="family-header text-center">
+ <h2 class="text-center">About Bliss OS</h2></div>
+ <div class="row">
+ <div class="col-md-6 text-center about-info">
+ <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
+ <p class="text-center">Bliss OS is a lightweight OS with tons of options, based on Android that works across a multitude of devices. Even PC’s</p>
+ <p class="text-center">Our focus is to bring the Open Source community a quality OS that can run ad a daily driver, syncing your apps, settings and customizations across all platforms you run Bliss on.</p>
+ </div>
+ <div class="col-md-6 about-tools">
+ <div class="space">
+ <div class="phone-container">
+ <div class="phone-side"></div>
+ <div class="phone-front">
+ <div class="phone-screen"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row break">
+ <div class="centered col-md-6 about-last">
+ <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
+
<!-- End #About -->
<div id="portfolio" class="row cover">
<h2 class="text-center">Downloads</h2>
@@ -214,8 +189,8 @@
<div id="team" class="row cover bottom text-center section">
<h2 class="highlight_secondary team-header">Our Team</h2>
<div class="container">
- <p> It takes alot of talent to make a team run this smoothly.
- <br>Here are the people that help make it Bliss </p>
+ <h3> It takes alot of talent to make a team run this smoothly.
+ <br>Here are the people that help make it Bliss </h3>
<div class="hr big_size_hr invisible_hr"> <i class="fa fa-"></i> </div>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6">
@@ -575,6 +550,57 @@
<div class="container">
<div class="family-header text-center">
<h2 class="text-center">About Bliss Family</h2></div>
+ <div class="row">
+ <div class="col-md-6 text-center about-info">
+ <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
+ <p class="text-center">We are a team of designers, developers, maintainers, and business professionals who work together to help achieve the dreams of our teammates and the Android Community. Our goal is to help provide a unique learning environment, using the FOSS
+ mentality, and not only train people how to make and monetize what they aspire, but also help provide unique business opportunities for already existing projects too. </p>
+ <p class="text-center">If you are interested in joining our team, please fill out the form found here:
+ <a href="https://goo.gl/forms/PdiaAj1PojosmehK2"></a>
+ </p>
+ <a href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
+ <p></p>
+ <p class="text-center">Or if you represent an already existing project and would like to join the <a href="#family">Bliss Family</a>, please fill out the form found here:
+ <a href="https://goo.gl/kAb7ti"></a>
+ </p>
+ <a href="https://goo.gl/kAb7ti">Join Bliss Family</a>
+ <p></p>
+ </div>
+ <div class="col-md-6 about-tools">
+ <p class="text-center">The nature of our business is to train and develop. So we have quite the diverse list of things we have experience with, and the list is growing constantly
+ <br>
+ <br>Here's a few of the types of projects we work on</p>
+ <div class="col-xs-6">
+ <ul>
+ <li>Android Development</li>
+ <li>Graphic Design</li>
+ <li>Web Development</li>
+ <li>IOT Software Development</li>
+ <li>Server Admin</li>
+ <li>Prototype Design</li>
+ <li>Animation</li>
+ <li>Brand Imaging</li>
+ </ul>
+ </div>
+ <div class="col-xs-6">
+ <ul>
+ <li>Development Training</li>
+ <li>Design Training</li>
+ <li>Team Management</li>
+ <li>Marketing</li>
+ <li>Product Technology Strategy</li>
+ <li>New Product Development</li>
+ <li>Product Testing</li>
+ <li>OEM Software Resources</li>
+ </ul>
+ </div>
+ </div>
+ <div class="row break">
+ <div class="centered col-md-6 about-last">
+ <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
+ </div>
+ </div>
+ </div>
<div class="row">
<div class="text-center">
<img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
diff --git a/js/script.js b/js/script.js
index 50719bd..fc46cbf 100644
--- a/js/script.js
+++ b/js/script.js
@@ -12,7 +12,22 @@
}
});
+
+ $('.phone-container').hover(function() {
+ $('.space').toggleClass('space-hover');
+ $('.phone-side').toggleClass('phone-side-hover');
+ $('.phone-front').toggleClass('phone-front-hover');
+ });
+ $("[class^='figure-']")
+ .within({
+ distance: 1000,
+ cord: 'center'
+ },
+ function(distance, ele, event) {
+ ele.style.transform = 'scale(' + (7000 - distance) / 7000 + ')';
+ }
+ )
// Scrolling effect for Arrow icons
$("#scrollIcon").click(function(e) {