Rework download section
preview of the scaling ( should be okay all the way down to 270px of screen width or maybe even less ) : https://youtu.be/iO79U48FmSY
For those who will review this code, check for typos
diff --git a/index.html b/index.html
index 42711b2..9110cee 100644
--- a/index.html
+++ b/index.html
@@ -192,107 +192,52 @@
</div>
</div>
</div>
- <!-- Call to action -->
- <div class="py-5 bg-primary" id="download">
- <div class="container-fluid">
- <div class="row">
- <div class="text-center col-md-12">
- <h3 class="display-3 d-flex justify-content-center align-items-center w-100">Download Options</h3>
- <div class="row">
- <div class="col-md-8">
- <h1 class="text-center">Free</h1>
- <hr style="border: 2px solid;">
- </div>
- <div class="col-md-4">
- <h1 class="text-center">Paid</h1>
- <hr style="border: 2px solid;">
- </div>
+
+
+<!-- Download section -->
+ <div class="download-section">
+ <h3 class="display-3 d-flex justify-content-center align-items-center w-100 download-title">Download Options</h3>
+ <div class="download-grid">
+ <div class="download-card-common download-card-white download-card-one">
+ <div class="card-header-rows">
+ <div class="card-header-column-one">
+ <h3 class="card-header-title"><b>Bliss ROM</b></h3>
+ <img src="https://img.shields.io/sourceforge/dm/blissroms.svg?style=for-the-badge&logo=appveyor&colorB=blue" max-width="160px" width="100%">
+ </div>
+ <div class="card-header-column-two">
+ <h2 class="mb-0 card-or-donation"><b>$0</b></h2>
+ <p class="card-or-donation">Or Donation</p>
+ </div>
+ </div>
+ <div class="card-main-area">
+ <div class="text">
+ <p class="my-3">This is Bliss for your typical Android devices.<br>GSI/Treble options are also available</p>
+ <ul class="pl-3">
+ <li>Multiple Devices Supported</li>
+ <li>Tons of Customization Options</li>
+ <li>GSI/Treble builds support multiple devices</li>
+ <li>Device Support not Guaranteed</li>
+ </ul>
+ </div>
+ <div class="buttons">
+ <a class="btn btn-primary mt-3 text-white" href="" target="_blank" data-target="#popup-modal6" data-toggle="modal">Learn More </a>
+ <a class="btn btn-primary mt-3 text-white" data-target="#popup-modal1" data-toggle="modal">Download Now</a>
</div>
</div>
</div>
- <div class="row">
- <div class="col-lg-4 col-md-6 p-3">
- <div class="card bg-light">
- <div class="card-body p-4">
- <div class="row">
- <div class="col-8">
- <h3 class="mb-0"><b>Bliss ROM</b></h3><img class="img-fluid d-block flex-grow-1 justify-content-center align-items-center d-flex float-left" src="https://img.shields.io/sourceforge/dm/blissroms.svg?style=for-the-badge&logo=appveyor&colorB=blue" width="85%">
- </div>
- <div class="col-4 text-right">
- <h2 class="mb-0"> <b>$0</b> </h2>
- </div>
- </div>
- <p class="text-right">Or Donation</p>
- <p class="my-3">This is Bliss for your typical Android devices.<br>GSI/Treble options are also available</p>
- <ul class="pl-3">
- <li>Multiple Devices Supported</li>
- <li>Tons of Customization Options</li>
- <li>GSI/Treble builds support multiple devices</li>
- <li>Device Support not Guaranteed</li>
- </ul> <a class="btn btn-primary mt-3 text-white" href="" target="_blank" data-target="#popup-modal6" data-toggle="modal">Learn More </a>
- <a class="btn btn-primary mt-3 text-white" data-target="#popup-modal1" data-toggle="modal" style="">Download Now</a>
- <div id="popup-modal6" 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 ROM? </h1>
- <p class="text-center lead"><b>This is Bliss for your typical Android devices.<br>GSI/Treble options are also available</b></p>
- <p class="text-center"><b>These builds are maintained by our device maintainers, and updated on a regular basis. So please make sure you check for the latest updates. </b></p>
- <p class="text-center"><b>Our most popular devices are </b>santoni, berkeley, shamu, taimen, cheeseburger, helium, & hydrogen.<br>Other "Unofficial" devices can be found online, but Team Bliss does not offer support for these builds.<br>For support, please check XDA Developers Forum for your device and see if there's a Bliss build for you.</p>
- </div>
- <div class="modal-footer text-center bg-light">
- <a class="btn btn-primary mt-0" href="" data-target="#popup-modal1" data-toggle="modal">Go To Downloads</a>
- </div>
- </div>
- </div>
- </div>
- <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">
- <h1 class="text-center"> Thanks for your interest in Bliss </h1>
- <p class="text-center">Please consider a small donation as a way to help keep our project moving forward.<br></p>
- <div class="modal-social text-right">
- <div class="row">
- <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="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="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>
- <p class="text-center"><br>As a reminder, all donations are converted to USD. Some regions may want to make sure the currency conversion is greater than $1 USD, Otherwise PayPal is the only one that benefits</p>
- </div>
- </div>
- <div class="modal-footer text-center bg-dark">
- <a href="https://sourceforge.net/projects/blissroms/files/" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-chevron-right"></span>
- </a><a class="btn btn-primary mt-0" href="https://sourceforge.net/projects/blissroms/files/">Go To Downloads</a>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="download-card-common download-card-white download-card-two">
+ <div class="card-header-rows">
+ <div class="card-header-column-one">
+ <h3 class="card-header-title"><b>Bliss OS (x86)</b></h3>
+ <img src="https://img.shields.io/sourceforge/dm/blissos-x86.svg?style=for-the-badge&logo=appveyor&colorB=blue" max-width="160px" width="100%">
</div>
- </div>
- <div class="col-lg-4 col-md-6 p-3">
- <div class="card bg-light">
- <div class="card-body p-4">
- <div class="row">
- <div class="col-8">
- <h3 class="mb-0"><b>Bliss OS (x86)</b></h3><img class="img-fluid d-block flex-grow-1 justify-content-center align-items-center d-flex float-left" src="https://img.shields.io/sourceforge/dm/blissos-x86.svg?style=for-the-badge&logo=appveyor&colorB=blue" width="85%">
- </div>
- <div class="col-4 text-right">
- <h2 class="mb-0"> <b>$0</b></h2>
- </div>
- </div>
- <p class="text-right">Or Donation</p>
+ <div class="card-header-column-two">
+ <h2 class="mb-0 card-or-donation"><b>$0</b></h2>
+ <p class="card-or-donation">Or Donation</p>
+ </div>
+ </div>
+ <div class="card-main-area">
+ <div class="text">
<p class="my-3">This is Bliss, running as a native or emulated* 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.<br><br>*Only KVM/QEMU emulation is currently supported</p>
<ul class="pl-3">
<li>Limited Online Support (<a href="https://forum.xda-developers.com/bliss-roms/bliss-roms-development/bliss-os-pie-beta-preview-t3855917">visit XDA thread</a>)<br></li>
@@ -300,124 +245,179 @@
<li>Multiple Kernel & Mesa options </li>
<li>Generic Kernel - One Size Fits All</li>
</ul>
- <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-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/x86_64-based devices, including desktops, laptops, tablets, maker boards and 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 class="buttons">
+ <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>
+ </div>
+ </div>
+ <div class="download-card-common download-card-blue download-card-three">
+ <div class="card-header-rows">
+ <div class="card-header-column-one">
+ <h3 class="card-header-title"><b>ROM & OS (x86)</b></h3>
+ <h3 class="card-header-title"><b>Development</b></h3>
+ </div>
+ <div class="card-header-column-two">
+ <p class="card-or-donation">Starting at</p>
+ <h2 class="mb-0 card-or-donation"><b>100,000</b></h2>
+ <p class="card-or-donation">units or more</p>
+ </div>
+ </div>
+ <div class="card-main-area">
+ <div class="text">
+ <p class="my-3">This is for businesses and educational institutions, that wish to use Bliss ROM or OS on specific Android or x86 hardware. This service includes hourly fees for development as well as per device pricing options*. </p>
+ <ul class="pl-3">
+ <li>Tech Support Contract Included</li>
+ <li>Extra Kernel & device options **</li>
+ <li>Full Source Code Available</li>
+ <li>Extra Tools and Options Available</li>
+ </ul>
+ <p class="d-inline-flex text-left justify-content-start align-items-start" style=" transform: scale(.8);">* Per device rates starting with orders targeting 100,000 devices or more<br><br>** Custom kernel and device development is available at hourly rates</p>
+ </div>
+ <div class="buttons">
+ <a class="btn btn-primary mt-3 text-white" href="" data-target="#popup-modal3" data-toggle="modal">Contact Us</a>
+ </div>
+ </div>
+ </div>
+ <h1 class="inf-header-free inf-header-common">Free</h1>
+ <h1 class="inf-header-paid inf-header-common">Paid</h1>
+ </div>
+ </div>
+
+ <!-- popups for download section -->
+ <div id="popup-modal6" 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 ROM? </h1>
+ <p class="text-center lead"><b>This is Bliss for your typical Android devices.<br>GSI/Treble options are also available</b></p>
+ <p class="text-center"><b>These builds are maintained by our device maintainers, and updated on a regular basis. So please make sure you check for the latest updates. </b></p>
+ <p class="text-center"><b>Our most popular devices are </b>santoni, berkeley, shamu, taimen, cheeseburger, helium, & hydrogen.<br>Other "Unofficial" devices can be found online, but Team Bliss does not offer support for these builds.<br>For support, please check XDA Developers Forum for your device and see if there's a Bliss build for you.</p>
+ </div>
+ <div class="modal-footer text-center bg-light">
+ <a class="btn btn-primary mt-0" href="" data-target="#popup-modal1" data-toggle="modal">Go To Downloads</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <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">
+ <h1 class="text-center"> Thanks for your interest in Bliss </h1>
+ <p class="text-center">Please consider a small donation as a way to help keep our project moving forward.<br></p>
+ <div class="modal-social text-right">
+ <div class="row">
+ <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="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="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>
+ <p class="text-center"><br>As a reminder, all donations are converted to USD. Some regions may want to make sure the currency conversion is greater than $1 USD, Otherwise PayPal is the only one that benefits</p>
+ </div>
+ </div>
+ <div class="modal-footer text-center bg-dark">
+ <a href="https://sourceforge.net/projects/blissroms/files/" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-chevron-right"></span>
+ </a><a class="btn btn-primary mt-0" href="https://sourceforge.net/projects/blissroms/files/">Go To Downloads</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <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/x86_64-based devices, including desktops, laptops, tablets, maker boards and 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 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">
- <h1 class="text-center" contenteditable="true"> Thanks for your interest in Bliss OS</h1>
- <p class="text-center">Please consider a small donation as a way to help keep our project moving forward.<br></p>
- <div class="modal-social text-right">
- <div class="row">
- <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="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="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>
- <p class="text-center"><br>As a reminder, all donations are converted to USD. Some regions may want to make sure the currency conversion is greater than $1 USD, Otherwise PayPal is the only one that benefits</p>
- </div>
- </div>
- <div class="modal-footer text-center bg-dark">
- <a href="https://sourceforge.net/projects/blissos-x86/files/" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-chevron-right"></span>
- </a>
- <div class="btn-group pi-draggable">
- <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Go To Downloads</button>
- <div class="dropdown-menu" x-placement="top-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, -2px, 0px);">
- <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/archived">Nougat (7.x)</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/archived">Oreo (10.x)</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/">Pie (11.x)</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="btn-group">
- </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 class="col-lg-4 p-3">
- <div class="card bg-light">
- <div class="card-body p-4 bg-secondary rounded border">
- <div class="row">
- <div class="col-7">
- <h3 class="mb-0"><b>ROM & OS (x86) Development</b></h3>
- <p class="text-left"> </p>
- </div>
- <div class="text-right mx-0 mr-0 ml-0 col-5">
- <p class="text-right mb-0">Starting at</p>
- <h2 class="mb-0"> <b>100,000</b></h2>
- <p class="text-right">units or more</p>
- </div>
- </div>
- <p class="" style="">This is for businesses and educational institutions, that wish to use Bliss ROM or OS on specific Android or x86 hardware. This service includes hourly fees for development as well as per device pricing options*. </p>
- <ul class="pl-3">
- <li>Tech Support Contract Included</li>
- <li>Extra Kernel & device options **</li>
- <li>Full Source Code Available</li>
- <li>Extra Tools and Options Available</li>
- </ul>
- <p class="d-inline-flex text-left justify-content-start align-items-start" style=" transform: scale(.8);">* Per device rates starting with orders targeting 100,000 devices or more<br><br>** 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 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">
- <h1 class="text-center" style=""> Thanks for your interest in Bliss ROM/OS Development</h1>
- <p class="text-center">Please Fill out the form below, leaving as much detail as possible about your target device* and or opportunity and we will be in touch shortly.<br></p>
- <p class="text-center" style="font-size:.75em;">* Inquiries requesting us to work on a single device, already on the consumer market will be ignored. This opportunity is for manufacturers and OEM's only. </p>
- <form action="mailto:blissfamilyroms@gmail.com" method="GET" data-form-title="CONTACT US">
- <div class="form-group"> <input type="email" class="form-control" id="form33" placeholder="Your Email" name="email"> </div>
- <div class="form-group"> <input type="text" class="form-control" id="form34" placeholder="Subject" name="name"> </div>
- <div class="form-group"> <textarea class="form-control" id="form35" rows="3" placeholder="Your message" name="message"></textarea> </div> <button type="submit" class="btn btn-outline-primary btn-block">Send</button>
- </form>
- <div class="modal-social text-right">
- <div class="row">
- </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">
+ <h1 class="text-center" contenteditable="true"> Thanks for your interest in Bliss OS</h1>
+ <p class="text-center">Please consider a small donation as a way to help keep our project moving forward.<br></p>
+ <div class="modal-social text-right">
+ <div class="row">
+ <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="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="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>
+ <p class="text-center"><br>As a reminder, all donations are converted to USD. Some regions may want to make sure the currency conversion is greater than $1 USD, Otherwise PayPal is the only one that benefits</p>
+ </div>
+ </div>
+ <div class="modal-footer text-center bg-dark">
+ <a href="https://sourceforge.net/projects/blissos-x86/files/" class="btn btn-link" data-dismiss="modal"><span class="glyphicon glyphicon-chevron-right"></span>
+ </a>
+ <div class="btn-group pi-draggable">
+ <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Go To Downloads</button>
+ <div class="dropdown-menu" x-placement="top-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, -2px, 0px);">
+ <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/archived">Nougat (7.x)</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/archived">Oreo (10.x)</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="https://sourceforge.net/projects/blissos-x86/files/Official/bleeding_edge/">Pie (11.x)</a>
</div>
</div>
</div>
</div>
</div>
</div>
- </div>
- </div>
+
+ <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">
+ <h1 class="text-center" style=""> Thanks for your interest in Bliss ROM/OS Development</h1>
+ <p class="text-center">Please Fill out the form below, leaving as much detail as possible about your target device* and or opportunity and we will be in touch shortly.<br></p>
+ <p class="text-center" style="font-size:.75em;">* Inquiries requesting us to work on a single device, already on the consumer market will be ignored. This opportunity is for manufacturers and OEM's only. </p>
+ <form action="mailto:blissfamilyroms@gmail.com" method="GET" data-form-title="CONTACT US">
+ <div class="form-group"> <input type="email" class="form-control" id="form33" placeholder="Your Email" name="email"> </div>
+ <div class="form-group"> <input type="text" class="form-control" id="form34" placeholder="Subject" name="name"> </div>
+ <div class="form-group"> <textarea class="form-control" id="form35" rows="3" placeholder="Your message" name="message"></textarea> </div> <button type="submit" class="btn btn-outline-primary btn-block">Send</button>
+ </form>
+ <div class="modal-social text-right">
+ <div class="row">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
<div class="py-5" id="team" style="">
<div class="container">
<div class="row">
diff --git a/neon.css b/neon.css
index dd19c91..8e89964 100644
--- a/neon.css
+++ b/neon.css
@@ -6595,3 +6595,186 @@
.no-wrap {
white-space: nowrap;
}
+
+.download-section {
+ background: #0080ff;
+ margin: 50px 0;
+ padding: 60px 0;
+}
+
+.download-title {
+ text-align: center;
+ padding: 0 20px;
+}
+
+.download-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: auto 1fr;
+ grid-gap: 40px;
+ max-width: 1600px;
+ margin: 0 auto;
+ padding: 50px;
+}
+@media (max-width: 1118px) {
+ .download-grid {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto 1fr auto 1fr;
+ }
+}
+@media (max-width: 872px) {
+ .download-grid {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto auto auto;
+ padding: 20px;
+ }
+}
+
+.inf-header-common {
+ text-align: center;
+ padding: 0 0 10px 0;
+ border-bottom: 5px solid #fff;
+}
+
+.inf-header-free {
+ grid-column: 1/3;
+ grid-row: 1/2;
+}
+@media (max-width: 872px) {
+ .inf-header-free {
+ grid-column: 1/2;
+ grid-row: 1/2;
+ }
+}
+
+.inf-header-paid {
+ grid-column: 3/4;
+ grid-row: 1/2;
+}
+@media (max-width: 1118px) {
+ .inf-header-paid {
+ grid-column: 1/3;
+ grid-row: 3/4;
+ }
+}
+@media (max-width: 872px) {
+ .inf-header-paid {
+ grid-column: 1/2;
+ grid-row: 4/5;
+ }
+}
+
+.download-card-common {
+ padding: 30px 30px 70px 30px;
+ border-radius: 10px;
+ width: 100%;
+ min-height: 200px;
+ color: #000;
+ position: relative;
+}
+@media (max-width: 330px) {
+ .download-card-common {
+ padding: 30px 30px 140px 30px;
+ }
+}
+
+.download-card-one {
+ grid-column: 1/2;
+ grid-row: 2/3;
+}
+
+.download-card-two {
+ grid-column: 2/3;
+ grid-row: 2/3;
+}
+@media (max-width: 872px) {
+ .download-card-two {
+ grid-column: 1/2;
+ grid-row: 3/4;
+ }
+}
+
+.download-card-three {
+ grid-column: 3/4;
+ grid-row: 2/3;
+}
+@media (max-width: 1118px) {
+ .download-card-three {
+ grid-column: 1/3;
+ grid-row: 4/5;
+ }
+}
+@media (max-width: 872px) {
+ .download-card-three {
+ grid-column: 1/2;
+ grid-row: 5/6;
+ }
+}
+
+.download-card-white {
+ background: #fff;
+}
+
+.download-card-blue {
+ background: #0060aa;
+ border: 1px solid #fff;
+ color: #fff;
+}
+
+.card-header-title {
+ margin: 0;
+}
+
+.card-header-rows {
+ height: 70px;
+}
+@media (max-width: 872px) {
+ .card-header-rows {
+ height: 100px;
+ }
+}
+@media (max-width: 480px) {
+ .card-header-rows {
+ height: 60px;
+ }
+}
+@media (max-width: 350px) {
+ .card-header-rows {
+ height: auto;
+ }
+}
+
+.card-header-column-one {
+ width: 65%;
+ float: left;
+ height: 65px;
+}
+@media (max-width: 350px) {
+ .card-header-column-one {
+ clear: both;
+ float: none;
+ height: auto;
+ margin-bottom: 10px;
+ }
+}
+
+.card-header-column-two {
+ height: 60px;
+}
+
+.card-or-donation {
+ text-align: right;
+ margin: 0;
+ white-space: nowrap;
+}
+@media (max-width: 350px) {
+ .card-or-donation {
+ text-align: left;
+ }
+}
+
+.buttons {
+ position: absolute;
+ bottom: 30px;
+ left: 30px;
+}
\ No newline at end of file