<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlissRoms</title>
<!-- icofont-css-link -->
<link rel="stylesheet" href="css/icofont.min.css">
<!-- Owl-Carosal-Style-link -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- Bootstrap-Style-link -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Aos-Style-link -->
<link rel="stylesheet" href="css/aos.css">
<!-- Coustome-Style-link -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive-Style-link -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Performance-Style-link -->
<link rel="stylesheet" href="css/performance.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<!-- uicons -->
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.0.0/uicons-brands/css/uicons-brands.css'>
</head>
<body>
<!-- Page-wrapper-Start -->
<div class="page_wrapper">
<!-- Preloader -->
<div class="preloader-container">
<img class="logo_pl" src="images/compact-black.svg">
</div>
<script type="23a3c226275d0e89f668a19d-text/javascript">
// Function to hide the preloader
function hidePreloader() {
var preloader = document.querySelector('.preloader-container');
// Hide the preloader
preloader.style.display = 'none';
}
// Event listener for the load event
window.addEventListener('load', hidePreloader);
</script>
<!-- Header Start -->
<header class="white_header">
<!-- container start -->
<div class="container">
<!-- navigation bar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="images/bliss_logo.png" alt="image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<div class="toggle-wrap">
<span class="toggle-bar"></span>
</div>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#screenshots">Screenshots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.blissroms.org/">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.blissroms.org/">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link dark_btn" href="https://downloads.blissroms.org/">Download Now</a>
</li>
</ul>
</div>
</nav>
<!-- navigation end -->
</div>
<!-- container end -->
</header>
<!-- Banner-Section-Start -->
<section class="banner_section">
<!-- container start -->
<div class="container">
<!-- row start -->
<div class="row">
<!-- shape animation -->
<span class="banner_shape1"> <img src="images/banner-shape1.png" alt="image" > </span>
<span class="banner_shape2"> <img src="images/banner-shape2.png" alt="image" > </span>
<span class="banner_shape3"> <img src="images/banner-shape3.png" alt="image" > </span>
<div class="col-lg-8 col-md-12 mx-auto" data-aos="fade-right" data-aos-duration="1500">
<!-- banner text -->
<div class="banner_text">
<!-- h1 -->
<h1 style="font-size: 50px;">BlissRoms</h1>
<h2 style="font-size: 31px;">Personalize, Optimize, Thrive.</h2>
<!-- p -->
<p style="font-size: 19px;">
BlissRoms, an open-source operating system built upon Android Open Source Project, that offers a harmonious blend of customization, options, and security features.
With a commitment to delivering pure bliss in every build, it brings with it a world of limitless possibilities.
</p>
</div>
</div>
</div>
<!-- row end -->
</div>
<!-- container end -->
<!-- banner images start -->
<div class="container-fluid" data-aos="fade-in" data-aos-duration="1500">
<div class="banner_images">
<div class="row d-flex justify-content-center">
<!-- screen 1 -->
<div class="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
<div class="banner_screen screen1">
<img class="moving_position_animatin" src="images/Screenshots/about_white.png" alt="image" >
</div>
</div>
<!-- screen 2 -->
<div class="col-md-4 col-lg-2 col-sm-4 col-xs-4">
<div class="banner_screen screen2">
<img class="moving_animation" src="images/Screenshots/quicksettings.png" alt="image" >
</div>
</div>
<!-- screen 3 -->
<div class="col-md-4 col-lg-3 col-sm-4 col-xs-4">
<div class="banner_screen screen3">
<img class="moving_position_animatin" src="images/Screenshots/lockscreen.png" alt="image" >
</div>
</div>
<!-- screen 4 -->
<div class="col-md-4 col-lg-2 col-sm-4 col-xs-4">
<div class="banner_screen screen4">
<img class="moving_animation" src="images/Screenshots/home.png" alt="image" >
</div>
</div>
<!-- screen 5 -->
<div class="col-md-2 col-lg-2 col-sm-4 col-xs-4 d-none d-lg-block">
<div class="banner_screen screen5">
<img class="moving_position_animatin" src="images/Screenshots/blissify_white.png" alt="image" >
</div>
</div>
</div>
</div>
</div>
<!-- banner images end -->
</section>
<!-- Banner-Section-end -->
<!-- statistic section start -->
<section class="row_am statistic_section">
<!-- container start -->
<div class="container">
<!-- Ui li start -->
<!-- UL -->
<ul class="app_statstic" id="counter" >
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
<li>
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-download"></i>
</div>
<div class="text">
<p><span class="counter-value" data-count="70">0</span><span>M+</span></p>
<p>Download</p>
</div>
</li>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
<li>
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-mobile-button"></i>
</div>
<div class="text">
<p><span class="counter-value" data-count="60">0 </span><span>+</span></p>
<p>Devices</p>
</div>
</li>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
<li>
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-users-alt"></i>
</div>
<div class="text">
<p><span class="counter-value" data-count="35">0</span><span>+</span></p>
<p>Maintainers</p>
</div>
</li>
</div>
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
<li>
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-earth-americas"></i>
</div>
<div class="text">
<p><span class="counter-value" data-count="140">0</span><span>+</span></p>
<p>Countries</p>
</div>
</li>
</div>
</ul>
<!-- UL end -->
<!-- Ui li end -->
</div>
<!-- container end -->
</section>
<!-- statistic section ends -->
<!-- Features-Section-Start -->
<section class="row_am features_section" id="features">
<!-- container start -->
<div class="container">
<div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<!-- h2 -->
<h2><span>Features</span>, It’s more than what you think!</h2>
<!-- p -->
<p>A comprehesive overview of features</p>
</div>
<div class="feature_detail">
<!-- feature box left -->
<div class="left_data feature_box">
<!-- feature box -->
<div class="data_block" data-aos="fade-right" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-palette"></i>
</div>
<div class="text">
<h4>Focus on design</h4>
<p>We include many options for customization and theming throughout the OS</p>
</div>
</div>
<!-- feature box -->
<div class="data_block" data-aos="fade-right" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-rocket-lunch"></i>
</div>
<div class="text">
<h4>Performance</h4>
<p>Focused on speed and stability with tweaks to assist in the most demanding applications.</p>
</div>
</div>
<!-- feature box -->
<div class="data_block" data-aos="fade-right" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-user-lock"></i>
</div>
<div class="text">
<h4>Added Security</h4>
<p>We include many options for security and safety throughout the OS that help the user in a world that values privacy at its finest.</p>
</div>
</div>
</div>
<!-- feature box right -->
<div class="right_data feature_box">
<!-- feature box -->
<div class="data_block" data-aos="fade-left" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-badge-check"></i>
</div>
<div class="text">
<h4>Regular updates</h4>
<p>Bliss maintainers provide regular updates based on security updates and released builds.</p>
</div>
</div>
<!-- feature box -->
<div class="data_block" data-aos="fade-left" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-battery-full"></i>
</div>
<div class="text">
<h4>Battery-friendly</h4>
<p>Extra options are provided to help tune battery consumption to the best levels.</p>
</div>
</div>
<!-- feature box -->
<div class="data_block" data-aos="fade-left" data-aos-duration="1500">
<div class="icon" style="font-size: 50px">
<i class="fi fi-sr-menu-burger"></i>
</div>
<div class="text">
<h4>And many more</h4>
<p>More options are provided to help tune android to the best levels and also to help tune the ROM as per the choice of the end-user.</p>
</div>
</div>
</div>
<!-- feature image -->
<div class="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
<img src="images/Screenshots/security.png" alt="image" style="border-radius: 20px; width: 50%;">
</div>
</div>
</div>
<!-- container end -->
</section>
<!-- Features-Section-end -->
<!-- Beautiful-interface-Section start -->
<section class="row_am interface_section" id="screenshots">
<!-- container start -->
<div class="container-fluid">
<div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
<!-- h2 -->
<h2>Beautiful <span>interface</span></h2>
<!-- p -->
<p>
Discover the seamless and visually stunning user interface that enhances your experience and captivates attention. <br> Our beautiful interface is crafted with precision and creativity to deliver an exceptional user journey!
</p>
</div>
<!-- screen slider start -->
<div class="screen_slider" >
<div id="screen_slider" class="owl-carousel owl-theme">
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/battery.png" alt="image" >
</div>
</div>
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/charging_control.png" alt="image" >
</div>
</div>
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/home_settings.png" alt="image" >
</div>
</div>
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/lockscreen_clocks.png" alt="image" >
</div>
</div>
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/wallpapers.png" alt="image" >
</div>
</div>
<div class="item">
<div class="screen_frame_img">
<img src="images/Screenshots/wallpaper_style.png" alt="image" >
</div>
</div>
</div>
</div>
<!-- screen slider end -->
</div>
<!-- container end -->
</section>
<!-- Beautiful-interface-Section end -->
<!-- Footer-Section start -->
<footer>
<div class="top_footer" id="contact">
<!-- container start -->
<div class="container">
<!-- row start -->
<div class="row">
<!-- shape animation -->
<span class="banner_shape1"> <img src="images/banner-shape1.png" alt="image" > </span>
<span class="banner_shape2"> <img src="images/banner-shape2.png" alt="image" > </span>
<span class="banner_shape3"> <img src="images/banner-shape3.png" alt="image" > </span>
<!-- BlissRoms Project-->
<div class="col-lg-4 col-md-6 col-12">
<div class="abt_side">
<div class="logo"> <img src="images/bliss_logo.png" alt="image" ></div>
<ul>
<li><a href="https://blisslabs.org"><h3>A BlissLabs Project</h3></a></li>
</ul>
<ul class="social_media">
<li><a href="https://www.facebook.com/BlissROMs"><i class="fi fi-brands-facebook"></i></a></li>
<li><a href="https://twitter.com/bliss_roms"><i class="fi fi-brands-twitter-alt"></i></i></a></li>
<li><a href="https://www.instagram.com/blissroms"><i class="fi fi-brands-instagram"></i></a></li>
<li><a href="https://github.com/BlissRoms"><i class="fi fi-brands-github"></i></a></li>
<li><a href="https://www.linkedin.com/company/stayblissful"><i class="fi fi-brands-linkedin"></i></a></li>
<li><a href="https://blog.blissroms.org/"><i class="fi fi-brands-blogger"></i></a></li>
<li><a href="https://t.me/Team_Bliss_Community"><i class="fi fi-brands-telegram"></i></a></li>
</ul>
</div>
</div>
<!-- footer link 2 -->
<div class="col-lg-3 col-md-6 col-12">
<div class="links">
<h3>Useful Links</h3>
<ul>
<li><a href="https://forms.gle/LkRgFXzpH1hZLmXD7">Maintainers Application</a></li>
<li><a href="https://docs.google.com/forms/d/1NbZ0mDqYoTnGbqLcd_XXt8d_SwQ2erxIAEWXHzhElS0">Team Bliss Application</a></li>
<li><a href="https://github.com/BlissRoms/bug_reports">Bug Tracker</a></li>
<li><a href="https://t.me/Team_Bliss_Build_Support">Build Support</a></li>
</ul>
</div>
</div>
<!-- footer link 3
<div class="col-lg-3 col-md-6 col-12">
<div class="links">
<h3>Help & Suport</h3>
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Terms & conditions</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div>
</div>-->
</div>
<!-- row end -->
</div>
<!-- container end -->
</div>
<!-- last footer -->
<div class="bottom_footer">
<!-- container start -->
<div class="container">
<!-- row start -->
<div class="row">
<div class="col-md-6">
<p>Copyright © <span id="current-year"></span> <a href="https://blisslabs.org">BlissLabs</a>. All rights reserved.</p>
</div>
</div>
<!-- row end -->
</div>
<!-- container end -->
</div>
<!-- go top button -->
<div class="go_top" style="font-size: 30px;">
<span><i class="fi fi-sr-arrow-circle-up"></i></span>
</div>
</footer>
<!-- Footer-Section end -->
<div class="purple_backdrop"></div>
</div>
<!-- Page-wrapper-End -->
<!-- Jquery-js-Link -->
<script src="js/jquery.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<!-- owl-js-Link -->
<script src="js/owl.carousel.min.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<!-- bootstrap-js-Link -->
<script src="js/bootstrap.min.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<!-- aos-js-Link -->
<script src="js/aos.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<!-- main-js-Link -->
<script src="js/main.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<script type="23a3c226275d0e89f668a19d-text/javascript">
// Get the current year
const currentYear = new Date().getFullYear();
// Update the content of the span element with the current year
document.getElementById("current-year").textContent = currentYear;
</script>
<script data-ad-client="ca-pub-7639560510014441" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="23a3c226275d0e89f668a19d-text/javascript"></script>
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="23a3c226275d0e89f668a19d-|49" defer></script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"f0e63be95e494ff8bf13db839fa773c6","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>