Switch to 3d blissify preview
diff --git a/css/animations.css b/css/animations.css
index 2979a9b..9346351 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -717,3 +717,72 @@
}
}
+.device {
+ transform: rotateX(25deg) rotateZ(-25deg) translateX(0) scale(.93);
+ margin: auto;
+ position: relative;
+ display: inline-block;
+ background: #333333;
+ box-shadow:
+ 0 1px 4px 0 rgba(0,0,0,0.20),
+ 0 8px 24px 0 rgba(0,0,0,0.20),
+ 0 0 0 1px rgba(0, 0, 0, 0.53),
+ inset 0 -2px 2px 2px rgba(0,0,0,0.55);
+ box-shadow: -1px 1px 4px 0 rgba(0, 0, 0, 0.20), -8px 8px 24px 0 rgba(0, 0, 0, 0.20), inset 5px -5px 5px 5px rgba(0, 0, 0, 0.24);
+ border-radius: 40px;
+ position: relative;
+ box-sizing: content-box;
+ padding: 50px 10px;
+ padding: 45px 10px 55px 20px;
+ width: 200px;
+ height: 360px;
+}
+.device-screen {
+ width: 98%;
+ height: 98%;
+ background: #111111;
+ overflow: hidden;
+ border-radius: 4px;
+ box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
+ position: relative;
+}
+.device-screen:before {
+ content: "";
+ top: 0;
+ bottom: 0;
+ width: 98%;
+ height: 98%;
+ box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
+ position: absolute;
+ border-radius: 8px;
+ overflow: hidden;
+}
+.device video {
+ border-radius: 0px;
+ width: 100%;
+ height: 105%;
+ object-fit: cover;
+}
+
+.device-screen img {
+ height: 100%;
+ width: 105%;
+ object-fit: cover;
+}
+
+@media (max-width: 850px) {
+ .device {
+ border-radius: 4.6vw;
+ padding: 6vw 1.2vw;
+ width: 33vw;
+ height: 59vw;
+ }
+ .device video,
+ .device-screen {
+ border-radius: .33vw;
+ }
+}
+
+
+
+
diff --git a/index.html b/index.html
index b9e7b90..d7d2b3e 100644
--- a/index.html
+++ b/index.html
@@ -99,18 +99,28 @@
<!-- Article style section -->
<div class="py-5">
<div class="container">
- <div class="row py-5" style="" id="about">
- <div class="col-md-5 order-2 order-md-1 animate-in-left">
- <div>
- <img src="images/phone_front.svg" style="max-height: 65%;max-width: 50%; box-shadow: 0 0px 12px 10px rgba(0, 155, 255, 0.2), 0 0px 15px 10px rgba(0, 155, 255, 0.19);" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto glow ">
+ <div class="row" style="" id="about">
+ <div class="col-md-6 order-2 order-md-1 animate-in-left d-flex flex-grow-1 align-items-center justify-content-center">
+ <div class="flex-grow-1 justify-content-center align-items-center">
+ <div class="device iphone animate-in-left d-flex flex-grow-1 align-items-center justify-content-center">
+ <div class="device-screen">
+ <img src="" alt="">
+ </div>
+ <video muted="" playsinline="" autoplay="" loop="" preload="metadata">
+ <source src="videos/bliss-phone-demo.webm" type="video/webm">
+ <source src="videos/bliss-phone-demo.mp4" type="video/mp4">
+ </video>
+ </div>
+ <!--
+ <img src="images/phone_front.svg" style="max-height: 65%;max-width: 50%; box-shadow: 0 0px 12px 10px rgba(0, 155, 255, 0.2), 0 0px 15px 10px rgba(0, 155, 255, 0.19);" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto glow ">
<div>
<video style="max-width: 45%;vertical-align: middle;display: inline-flex;float: none;margin-top: -90%;z-index: 999" preload="" muted="" autoplay="autoplay" oncanplay="this.muted=true" loop="loop" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto" width="90%" height="39%">
<source src="videos/bliss-phone-demo.webm" type="video/webm">
<source src="videos/bliss-phone-demo.mp4" type="video/mp4"> Your browser does not support VP9 or H.264 video content. </video>
- </div>
+ -->
</div>
</div>
- <div class="col-md-7 align-self-center order-1 order-md-2 my-3 text-md-left text-center">
+ <div class="col-md-6 align-self-center order-1 order-md-2 my-3 text-md-left text-center">
<h3 class="display-3">About Bliss</h3>
<p class="my-4 text-light">We are a volunteer based non-profit organization that works to maintain various development projects. We provide the training and mentorship to help our team members dreams become reality. <br>Our main focus is to provide a quality OS that can run on all your devices, preserving customizations and options by syncing across all platforms. With all the bells and whistles, you can imagine. We believe you'll soon learn why we call it Bliss.</p>
<a class="btn btn-outline-primary" href="#features">Learn more</a>
@@ -703,7 +713,7 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Script: Smooth scrolling between anchors in the same page -->
<script src="js/smooth-scroll.js"></script>
-
+
</body>
</html>
\ No newline at end of file