Merge pull request #1 from BlissRoms/master
Merge from upstream
diff --git a/css/animations.css b/css/animations.css
index 2979a9b..4abca20 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -280,14 +280,18 @@
}
}
+.layout {
+ margin: 0 auto;
+ max-width: 1170px;
+ width: 100%;
+ padding: 0 15px;
+}
+
/********Grid Widht *******/
.grid-3 { width: 25%; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px;
position: relative;}
/********Grid Widht *******/
-
-
-
/***Section Css******/
.counting {
/* background: #34495e none repeat scroll 0 0; */
@@ -330,9 +334,7 @@
@media (max-width:640px) {
.layout { width: 300px; }
.grid-3 { width: 100%; }
-
-
- }
+}
@-webkit-keyframes drip2 {
0% {
@@ -419,14 +421,14 @@
.animation {
display: inline-block;
position: relative;
- width: 46em;
- height: 30em;
+ width: 26em;
+ height: 16em;
margin: -2vh auto 0 auto;
vertical-align: middle;
}
-@media (max-width:720px) {
+/*@media (max-width:720px) {
.animation {margin-left:-30rem;margin-right:-30rem;}
-}
+}
@media (max-width:450px) {
.animation {width:58rem;height:38rem;}
}
@@ -444,7 +446,7 @@
}
@media (max-width:320px) {
.animation {width:42rem;height:28rem;}
-}
+}*/
@media (max-height:650px) {
.animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
}
@@ -559,8 +561,8 @@
width: 100%;
left: 0;
top: 50%;
- margin-top: -14px;
- font-size: 20px;
+ margin-top: -24px;
+ font-size: 18px;
text-align: center;
/* color: #0080ff;*/
}
@@ -717,3 +719,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 756f76e..5d589f8 100644
--- a/index.html
+++ b/index.html
@@ -64,10 +64,10 @@
<p class="lead mb-4">An Open Source OS, based on Android, that incorporates many customizations options and added security features. <br><br>And it is available for...</p>
</div>
</div>
- <div class="col-md-8 d-flex justify-content-center align-items-center flex-grow-1" align="center" style="max-height: 100%;max-width: 100%;vertical-align: middle;display: inline-flex;float: none; margin-top: -8%;">
- <div class=" d-inline-flex justify-content-center align-items-center mx-auto">
- <div class="animation mx-auto d-inline-flex justify-content-center align-items-center" data-animation-step="1">
- <div class="device mx-auto mt-5">
+ <div class="d-flex justify-content-center align-items-center flex-grow-1" align="center" style="max-height: 100%;max-width: 100%;vertical-align: middle;display: inline-flex;float: none; margin-top: -8%;">
+ <div class="d-inline-flex justify-content-center align-items-center">
+ <div class="animation d-inline-flex justify-content-center align-items-center" data-animation-step="3">
+ <div class="device mt-5">
<div class="screen-stand"></div>
<div class="display">
<div class="slide1">
@@ -81,7 +81,7 @@
</div>
</div>
<div class="slide3">
- <div>Most Android <br>
+ <div>Most<br>Android<br>
<em>phones</em>
</div>
</div>
@@ -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>
@@ -216,7 +226,7 @@
<li>Tons of Customization Options</li>
<li>Device Support not Guaranteed</li>
</ul> <a class="btn btn-primary mt-3 text-white" data-target="#popup-modal1" data-toggle="modal" style="">Download Now</a>
- <div id="popup-modal1" class="modal fade">
+ <div id="popup-modal1" class="modal fade flex-grow-1 align-items-center justify-content-center">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body px-3 bg-dark">
@@ -224,17 +234,17 @@
<p class="text-center">Please consider a small donation as a way to help keep our project moving forward. </p>
<div class="modal-social text-right">
<div class="row">
- <div class="col-sm-6">
+ <div class="flex-grow-1">
<a class="btn btn-primary btn-block" target="”_blank”" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MKDDQGLYDKGV6&source=url">Donate $5</a>
</div>
- <div class="col-sm-6">
+ <div class="flex-grow-1">
<a class="btn btn-info btn-block" target="”_blank”" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=99GBH7ZW77P54&source=url">Donate $10</a>
</div>
</div>
</div>
<div class="modal-social text-right pt-2">
<div class="row">
- <div class="col-sm-6 col-md-12">
+ <div class="d-flex flex-grow-1 justify-content-center align-items-center">
<a class="btn btn-block text-white btn-outline-secondary" href="https://www.paypal.me/TeamBliss" target="_blank">Donate Other Amount</a>
</div>
</div>
@@ -262,15 +272,37 @@
</div>
</div>
<p class="text-right">Or Donation</p>
- <p class="my-3">This is the free version of Bliss OS for PCs</p>
+ <p class="my-3">This is the free version of Bliss OS for PCs.. These builds are compatible with PCs, MacBooks and Chromebooks equipped with x86/x86_64 compatible CPUs. Supports both BIOS/CSM and UEFI boot.</p>
<ul class="pl-3">
<li>Limited Online Support</li>
<li>Limited Device Compatibility</li>
<li>Generic Kernel - One Size Fits All</li>
</ul>
- <a class="btn btn-primary mt-3 text-white" href="https://forum.xda-developers.com/bliss-roms/bliss-roms-development/bliss-os-pie-beta-preview-t3855917" target="_blank">Learn More </a>
+ <a class="btn btn-primary mt-3 text-white" href="" target="_blank" data-target="#popup-modal4" data-toggle="modal">Learn More </a>
<a class="btn btn-primary mt-3 text-white" href="" data-target="#popup-modal2" data-toggle="modal">Download Now</a>
- <div id="popup-modal2" class="modal fade">
+ <div id="popup-modal4" class="modal fade flex-grow-1 align-items-center justify-content-center">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-body px-3 bg-light">
+ <h1 class="text-center"> What is Bliss OS? </h1>
+ <p class="text-center lead"><b>This is Bliss for your x86-based devices, including desktops, laptops, tablets, maker boards and a lot more.</b></p>
+ <p class="text-center"><b>These builds are compatible with PCs, MacBooks and Chromebooks equipped with x86/x86_64 compatible CPUs from Intel, AMD & others. It also supports GPUs from Intel, AMD, or Nvidia.</b></p>
+ <p class="text-center"><b>Bootable Installer supports BIOS/CSM and UEFI boot. We recommend using Rufus to flash the ISO to a USB drive, and boot into that to test by running in Live mode. If that works, use the USB drive and boot into the installer to install/upgrade</b></p>
+ <div class="modal-social text-right">
+ <div class="row">
+ <div style="" class="d-flex justify-content-center align-items-center flex-grow-1">
+ <a class="btn btn-primary btn-block" target="”_blank”" href="https://forum.xda-developers.com/bliss-roms/bliss-roms-development/bliss-os-pie-beta-preview-t3855917">Bliss OS XDA Thread</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer text-center bg-light">
+ <a class="btn btn-primary mt-0" href="" data-target="#popup-modal2" data-toggle="modal">Go To Downloads</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="popup-modal2" class="modal fade align-items-center justify-content-center flex-grow-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body px-3 bg-dark">
@@ -278,15 +310,15 @@
<p class="text-center">Please consider a small donation as a way to help keep our project moving forward. </p>
<div class="modal-social text-right">
<div class="row">
- <div class="col-sm-6">
+ <div class="flex-grow-1">
<a class="btn btn-primary btn-block" target="”_blank”" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MKDDQGLYDKGV6&source=url">Donate $5</a>
</div>
- <div class="col-sm-6">
+ <div class="flex-grow-1">
<a class="btn btn-info btn-block" target="”_blank”" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=99GBH7ZW77P54&source=url">Donate $10</a>
</div>
</div>
<div class="row">
- <div class="col-sm-6 col-md-12 pt-2">
+ <div class="pt-2 flex-grow-1 d-flex align-items-center justify-content-center">
<a class="btn btn-block text-white btn-outline-secondary" href="https://www.paypal.me/TeamBliss" target="_blank">Donate Other Amount</a>
</div>
</div>
@@ -337,7 +369,7 @@
</ul>
<p class="my-3" style=""><b>*</b> Custom kernel and device development is available at hourly rates</p>
<a class="btn btn-primary mt-3 text-white" href="" data-target="#popup-modal3" data-toggle="modal">Contact Us</a>
- <div id="popup-modal3" class="modal fade">
+ <div id="popup-modal3" class="modal fade justify-content-center align-items-center flex-grow-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body px-3 bg-dark">
@@ -444,7 +476,7 @@
<div class="container">
<div class="row">
<div class="col-md-12">
- <h1 class="pb-3 text-center">Designers & Developers</h1>
+ <h1 class="pb-3 text-center">Designers, Developers & Maintainers</h1>
</div>
</div>
</div>
@@ -524,6 +556,39 @@
</div>
</div>
</div>
+ <div class="" style="">
+ <div class="container">
+ <div class="row">
+ <div class="col-lg-4 px-4 px-md-0">
+ <div class="row mb-4">
+ <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mATNi0sLmL4Wtcroe0d3jSnAGFoiGq2FxmgJnfrHg=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
+ <div class="col-9">
+ <h4> <b>Deepak Sharma</b> </h4>
+ <p class="mb-0">Developer <br>Server Admin</p>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-4 px-4 px-md-0">
+ <div class="row mb-4">
+ <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" width="100" alt="Card image cap" src="https://lh3.googleusercontent.com/a-/AAuE7mBy9Mi7RUgATZdEBaQ1M3_LL5y8zg9W0PMbJqcv=s1920-p-rw-no-il"> </div>
+ <div class="col-9">
+ <h4> <b>Paul Tropea (wrongway213)</b> </h4>
+ <p class="mb-0">Device Maintainer</p>
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-4 px-4 px-md-0">
+ <div class="row mb-4">
+ <div class="col-3"> <img class="img-fluid d-block mx-auto rounded-circle" src="https://lh3.googleusercontent.com/a-/AAuE7mADSA43bIiPv21LCSv4i-E5pivvGxK0czyq1RgO=s1920-p-rw-no-il" width="100" alt="Card image cap"> </div>
+ <div class="col-9">
+ <h4> <b>SuperDroidBond</b> </h4>
+ <p class="mb-0">Device Maintainer</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="py-4 text-center">
<div class="container">
<div class="row">