Merge pull request #2 from BlissRoms/master
Up to date
diff --git a/css/style.css b/css/style.css
index 9ac95dc..137f20a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,9 +4,40 @@
body {
font-family: "Comfortaa", Helvetica, Arial, sans-serif;
line-height: 1.4;
- background-color: #0080ff;
+ /* background-color: #0080ff; */
+ background: url("../images/innaarsuit_oli_2018186_lrg.jpg") no-repeat center center;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ /* Preserve aspet ratio */
+ /* width: 100%; */
+ background-repeat: no-repeat;
+ background-attachment: fixed !important;
+ /* background-position: center !important; */
+ /* background-size: cover !important; */
+ background-width: contain !important;
+ margin-left: calc(-50vw + 50%);
+ margin-right: calc(-50vw + 50%);
}
+#bg {
+ position: fixed;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+}
+#bg img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ min-width: 50%;
+ min-height: 50%;
+}
+
h1, .h1,
h2, .h2,
h3, .h3,
@@ -15,7 +46,7 @@
h6, .h6 {
font-family: "Comfortaa", Helvetica, Arial, sans-serif;
line-height: 1.4;
- color: #07374a; }
+ color: #222222; }
h1, .h1 {font-size: 64px;}
h2, .h2 {font-size: 42px;}
h4, .h4 {font-weight: bolder;}
@@ -123,29 +154,29 @@
.navbar-default .navbar-toggle {
border-color: #ffffff; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
- background-color: #07374a;
+ background-color: #222222;
}
.navbar-default .navbar-toggle .icon-bar {
color: #ffffff;
background-color: #ffffff; }
.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #07374a;
+ background-color: #222222;
}
.navbar-collapse.collapsing {
- background-color: #07374a;
+ background-color: #222222;
}
.navbar-default .navbar-toggle .icon-bar {
color: #ffffff;
background-color: #ffffff; }
.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #07374a;
+ background-color: #222222;
}
.navbar-collapse.collapse.collapsing {
- background-color: #07374a;
+ background-color: #222222;
}
.navbar-collapse.collapse.show {
- background-color: #07374a;
+ background-color: #222222;
-webkit-transition: background-color .2s ease 0s;
-moz-transition: background-color .2s ease 0s;
-o-transition: background-color .2s ease 0s;
@@ -165,7 +196,7 @@
/* Solid class attached on scroll past first section */
.navbar.solid {
- background-color: #07374a;
+ background-color: #222222;
top: 0;
width: 100%;
margin: 0;
@@ -198,7 +229,13 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- background-color: #0080ff; }
+ /* background-color: #0080ff;*/
+ background: url(images/web_bg_1280.png) no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
.cover.bottom {
padding: 6% 0 5.5% 0; }
body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
@@ -225,7 +262,7 @@
padding-top: 0; } }
#about {
- background-color: #07374a; }
+ background-color: #222222; }
#about h2 {
color: #0080ff; }
#about > div > div.row.break > div > p {margin-bottom: 15px}
@@ -265,18 +302,18 @@
.portfolio-projects--btn {
background: transparent;
- color: #07374a;
- border: 1px solid #07374a;
+ color: #222222;
+ border: 1px solid #222222;
border-radius: 5px;
margin-bottom: 1.25em;
font-size: 18px;
margin: 8px; }
.portfolio-projects--btn:hover {
- background: #07374a;
+ background: #222222;
color: #ffffff; }
.portfolio-projects--btn:focus,
.portfolio-projects--btn:active {
- background: #052a38;
+ background: #111111;
color: #ffffff; }
@media (max-width:650px) {
.portfolio-projects--btn {font-size:16px;}
@@ -394,7 +431,7 @@
}
#contact {
- background-color: #07374a;
+ background-color: #222222;
padding-left: 15px;
padding-right: 15px }
#contact h2 {
@@ -434,7 +471,7 @@
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
- background-color: #052a38;
+ background-color: #111111;
color: #ffffff; }
.footer-role, .footer-name, .footer-description {
@@ -454,8 +491,8 @@
margin-top: 4vh;
padding: 10px;
font-size: 1.5em;
- color: #07374a;
- border: solid 2px #07374a;
+ color: #222222;
+ border: solid 2px #222222;
border-radius: 50%; }
#scrollTopIcon {
@@ -498,7 +535,7 @@
color: #FFFFFF;
}
.team-role, .team-name, .team-links-list a {
- color: #07374a;
+ color: #222222;
text-align: center;
white-space: normal;
width: 100%;
@@ -510,7 +547,7 @@
}
.team-links, .family-links {
padding-top: .75em;
- color: #07374a;
+ color: #222222;
text-align: center;
}
.team-image img, .family-image img {
@@ -554,7 +591,7 @@
/* Bliss family section */
#family {
- background-color: #07374a;
+ background-color: #222222;
}
#family > div > div.row > div {font-size: 18px}
.family-role, .family-name, .family-description {
diff --git a/images/BlissIcon.png b/images/BlissIcon.png
new file mode 100644
index 0000000..b165121
--- /dev/null
+++ b/images/BlissIcon.png
Binary files differ
diff --git a/images/BlissIcon_Smal_wl.png b/images/BlissIcon_Smal_wl.png
new file mode 100644
index 0000000..489a299
--- /dev/null
+++ b/images/BlissIcon_Smal_wl.png
Binary files differ
diff --git a/images/BlissIcon_w.png b/images/BlissIcon_w.png
new file mode 100644
index 0000000..39acc87
--- /dev/null
+++ b/images/BlissIcon_w.png
Binary files differ
diff --git a/images/Bliss_view_bg_1.png b/images/Bliss_view_bg_1.png
new file mode 100644
index 0000000..2ecdac6
--- /dev/null
+++ b/images/Bliss_view_bg_1.png
Binary files differ
diff --git a/images/bliss_web_lg_bg.png b/images/bliss_web_lg_bg.png
new file mode 100644
index 0000000..cdcbecd
--- /dev/null
+++ b/images/bliss_web_lg_bg.png
Binary files differ
diff --git a/images/innaarsuit_oli_2018186_lrg.jpg b/images/innaarsuit_oli_2018186_lrg.jpg
new file mode 100644
index 0000000..89ecf6d
--- /dev/null
+++ b/images/innaarsuit_oli_2018186_lrg.jpg
Binary files differ
diff --git a/images/web_bg_1280.png b/images/web_bg_1280.png
new file mode 100644
index 0000000..78862f3
--- /dev/null
+++ b/images/web_bg_1280.png
Binary files differ
diff --git a/index.html b/index.html
index b4d67ff..5cbe4c2 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <a class="navbar-brand" href="#">Bliss</a>
+ <a class="navbar-brand" href="#" style=" background-image: url(images/BlissIcon_w.png); background-position: top left; background-size: 100%; background-repeat: no-repeat;"> </a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
@@ -53,7 +53,7 @@
<a href="#team">Team</a>
</li>
<li id="nav-family">
- <a href="#family">Family</a>
+ <a href="#family-lt">Family</a>
</li>
<li id="nav-studios">
<a href="https://bliss-studios.github.io" target="_blank">Bliss Studios</a>
@@ -77,9 +77,9 @@
</div>
<!-- Begin page content -->
<div class="container-fluid">
- <div class="row cover top">
- <div class="col-xs-12" style="padding:0">
- <div class="row" style="overflow-x:hidden;height: auto;overflow-y: visible;">
+ <div class="row cover top" style=" background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.0), rgba(22, 22, 22, 1.0)); background-position: top left; background-size: 100%; background-repeat: repeat;">
+ <div class="col-xs-12" style=" max-height: 120%;">
+ <div class="row" style="overflow-x:hidden;height: auto;overflow-y: visible; color: #fff;">
<div class="col-md-12" align="center">
<div class="row">
<h1>Bliss</h1>
@@ -117,8 +117,8 @@
</div>
</div>
<div class="row">
- <div class="col-xs-12 center-block text-center" style="overflow-y:visible">
- <a href="#about"><span id="scrollIcon" class="front-glyph glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
+ <div class="col-xs-12 center-block text-center" style="overflow-y: visible; color: rgb(255, 255, 255); transform: translateY(60px);">
+ <a href="#about"><span id="scrollIcon" class="front-glyph glyphicon glyphicon-menu-down" style=" color: #fff; transform: translateY(-100%) ;" aria-hidden="true"></span></a>
</div>
</div>
</div>
@@ -126,7 +126,7 @@
<div id="about" class="row cover">
<div class="container">
<div class="family-header text-center">
- <h2 class="text-center">About Bliss</h2>
+ <h2 class="text-center" style="color: #fff;">About Bliss</h2>
</div>
<div class="row">
<div class="col-md-6 text-center about-info">
@@ -137,7 +137,7 @@
<div>
<img src="images/phone_front.svg" style="max-height: 75%;max-width: 50%;vertical-align: middle;display: inline-flex;float: none">
<div>
- <video style="max-height: 65%;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">
+ <video style="max-height: 65%;max-width: 45%;vertical-align: middle;display: inline-flex;float: none;margin-top: -105%;z-index: 999" preload="" muted="" autoplay="autoplay" oncanplay="this.muted=true" loop="loop">
<source src="images/bliss-demo.mp4" type="video/mp4">
<source src="images/bliss-demo.mkv" type="video/mkv"> Your browser does not support video! </video>
</div>
@@ -148,7 +148,7 @@
</div>
<!-- End #About -->
<div id="portfolio" class="row cover">
- <h2 class="text-center">Downloads</h2>
+ <h2 class="text-center" style="color: #fff;">Downloads</h2>
<div class="container">
<div class="row portfolio-projects">
<!-- Two project row-->
@@ -203,20 +203,22 @@
</div>
</div>
<!-- End #Portfolio -->
- <div class="text-white bg-dark cover bottom" style=" background-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .75)); background-position: top left; background-size: 100%; background-repeat: repeat;">
+ <div class="text-white bg-dark cover bottom" style=" background-image: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .75)); background-position: top left; background-size: 100%; background-repeat: repeat;">
<div class="container py-3">
<div class="row">
<div class="col-lg-5 p-0">
<div class="embed-responsive embed-responsive-4by3"> <iframe width="560" height="315" src="https://www.youtube.com/embed/gqoOtmPy4oc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe> </div>
</div>
<div class="p-5 col-lg-7 d-flex flex-column justify-content-center" style="">
- <p class="lead mb-0">We like to work on a few videos as well in our spare time. Walkthroughs, Updates, Reviews, we try to cover it all. So make sure you follow us on YouTube for more</p><a class="btn btn-primary btn-lg btn-block" href="https://www.youtube.com/channel/UCHVCPbyVGPiwZs7XycTYY1g">Team Bliss</a>
+ <h2 class="" style="color: #fff;">Bliss Videos</h2>
+ <p class="lead mb-0">We like to work on a few videos as well in our spare time. Walkthroughs, Updates, Reviews, we try to cover it all. So make sure you follow us on YouTube for more</p>
+ <a class="btn btn-rounded family-projects--btn" href="https://www.youtube.com/channel/UCHVCPbyVGPiwZs7XycTYY1g">Team Bliss on YouTube</a>
</div>
</div>
</div>
</div>
<div id="contact" class="row cover bottom" style=" background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); background-position: top left; background-size: 100%; background-repeat: repeat;">
- <h2 class="text-center contact-header">Find Us Online</h2>
+ <h2 class="text-center contact-header" style="color: #fff;">Find Us Online</h2>
<div class="text-center contact-social-icons">
<ul class="centered">
<a href="mailto:blissfamilyroms@gmail.com">
@@ -227,7 +229,7 @@
</div>
<!-- End #Contact-->
<div class="text-center contact-social-icons">
- <h2 style="font-size: 1.45em !important;">Our Socials:</h2>
+ <h2 style="color: #fff; font-size: 1.45em !important;">Our Socials:</h2>
<ul class="centered">
<a href="https://t.me/OfficialBlissROMs">
<li>
@@ -255,7 +257,7 @@
</div>
<!-- End #Contact -->
<div class="text-center contact-social-icons">
- <h2 style="font-size: 1.45em !important;">Our Source:</h2>
+ <h2 style="color: #fff; font-size: 1.45em !important;">Our Source:</h2>
<ul class="centered">
<!-- Start BlissRoms resources -->
<a href="https://github.com/BlissRoms">
@@ -288,24 +290,24 @@
</div>
<!-- End #Contact -->
<div class="text-center contact-social-icons">
- <h2 style="font-size: 1.45em !important;">Our Subreddits:</h2>
- <ul class="centered">
- <a href="https://www.reddit.com/r/BlissRoms">
- <li>
- <i class="fa fa-reddit"></i> r/BlissRoms </li>
- </a>
- <a href="https://www.reddit.com/r/BlissOS">
- <li>
- <i class="fa fa-reddit"></i> r/BlissOS </li>
- </a>
- <a href="https://www.reddit.com/r/TeamBliss">
- <li>
- <i class="fa fa-reddit"></i> r/TeamBliss </li>
- </a>
- </ul>
- <p></p>
- </div>
- <!-- End #Contact -->
+ <h2 style="color: #fff; font-size: 1.45em !important;">Our Subreddits:</h2>
+ <ul class="centered">
+ <a href="https://www.reddit.com/r/BlissRoms">
+ <li>
+ <i class="fa fa-reddit"></i> r/BlissRoms </li>
+ </a>
+ <a href="https://www.reddit.com/r/BlissOS">
+ <li>
+ <i class="fa fa-reddit"></i> r/BlissOS </li>
+ </a>
+ <a href="https://www.reddit.com/r/TeamBliss">
+ <li>
+ <i class="fa fa-reddit"></i> r/TeamBliss </li>
+ </a>
+ </ul>
+ <p></p>
+ </div>
+ <!-- End #Contact -->
</div>
<!-- break -->
<div id="team" class="row cover bottom text-center section">
@@ -545,9 +547,7 @@
<div class="team-content">
<div class="team-name">Eric Park <br>(ideaman924) </div>
<div class="team-role">
- <h4>Developer (BlissRoms)
- <br>Release Manager (BlissOS)
- </h4>
+ <h4>Developer (BlissRoms) <br>Release Manager (BlissOS) </h4>
</div>
<div class="team-description"></div>
</div>
@@ -583,7 +583,7 @@
<div class="col-md-2 col-sm-4 col-xs-6">
<div class="team">
<div class="team-image">
- <img src="https://avatars3.githubusercontent.com/u/1151945?s=400&v=4" class="img-circle img-responsive">
+ <img src="https://avatars3.githubusercontent.com/u/1151945?s=400&v=4" class="img-circle img-responsive">
<div class="team-links">
<div class="team-links-list">
<!-- Saved for later -->
@@ -727,7 +727,7 @@
<div id="family" class="row cover">
<div class="container">
<div class="family-header text-center">
- <h2 class="text-center">About Team Bliss</h2>
+ <h2 class="text-center" style="color: #fff;">About Team Bliss</h2>
</div>
<div class="row">
<div class="col-xs-12 text-center about-tools">
@@ -735,35 +735,39 @@
<p class="text-center">If you are interested in joining our ROM team, please fill out the form found here:</p>
<a class="btn btn-rounded family-projects--btn" 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 a form by clicking the Join Bliss Family button below</p>
+ <p class="text-center">Or if you represent an already existing project and would like to join the <a href="#family-lt">Bliss Family</a>, please fill out a form by clicking the Join Bliss Family button below</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="row">
- <div id="family-lt" class="row cover bottom text-center section">
- <div class="container">
- <img class="team-image" style="max-width: 36rem;width:100%" src="images/bliss_for.png">
- <div class="container">
- <p class="text-center">We are currently in the process of moving into a new era of Bliss. As a ROM team, we worked together to overcome some of the hardest obstacles that a ROM team could face. And in doing so, we have grown and acted as an example to other teams. This growth allowed us to evolve into a family of ROM teams, helping to support one another in our innovative efforts, and inspire work from other community members in the process. </p>
- <p class="text-center">This growth allowed us to see many of the needs our fellow community members had, and sparked an idea to allow us all to succeed in the future. This inspired us to start our journey into making that happen, and we have turned Bliss Family of ROMs into a nonprofit corporation, with the intent to enable the development community like never before. </p>
- <p></p>
- <p class="text-center">Our Bliss Family projects include applications, ports, ROMs, API's, services, and forks of other projects. Most if not all of our Bliss Family projects will be Open Source, allowing us to truly give back to the community as a team. </p>
- <p></p>
- <a class="btn btn-rounded portfolio-projects--btn" href="https://goo.gl/kAb7ti" role="button">Join Bliss Family</a>
- <a class="btn btn-rounded portfolio-projects--btn" href="https://www.paypal.me/TeamBliss" target="_blank" role="button">Donate to Bliss Family</a>
- </div>
- </div>
- <br><br>
- <div class="family-header text-center">
- <h2 class="text-center" style="color: #fff;">We will be opening our doors soon. Accepting applications now!</h2>
- </div>
+ <div id="family-lt" class="col-xs-12 text-center section" style=" background-image: linear-gradient(to bottom, rgba(22,22,22,0.3), rgba(22,22,22,0.8)); background-position: top left; background-size: 100%; background-repeat: repeat;">
<div class="row">
+ <div class="col-xs-12 text-center about-tools">
+ <div class="container family-header text-center">
+ <img class="team-image" style="max-width: 36rem;width:100%" src="images/bliss_for.png">
+ </div>
+ <p class="text-center">We are currently in the process of moving into a new era of Bliss. As a ROM team, we worked together to overcome some of the hardest obstacles that a ROM team could face. And in doing so, we have grown and acted as an example to other teams. This growth allowed us to evolve into a family of ROM teams, helping to support one another in our innovative efforts, and inspire work from other community members in the process. </p>
+ <p class="text-center">This growth allowed us to see many of the needs our fellow community members had, and sparked an idea to allow us all to succeed in the future. This inspired us to start our journey into making that happen, and we have turned Bliss Family of ROMs into a nonprofit corporation, with the intent to enable the development community like never before. </p>
+ <p></p>
+ <p class="text-center">Our Bliss Family projects include applications, ports, ROMs, API's, services, and forks of other projects. Most if not all of our Bliss Family projects will be Open Source, allowing us to truly give back to the community as a team. </p>
+ <p></p>
+ <a class="btn btn-rounded family-projects--btn" href="https://goo.gl/kAb7ti" role="button" style="color:#fff;">Submit your project now</a>
+ <a class="btn btn-rounded family-projects--btn" href="https://www.paypal.me/TeamBliss" target="_blank" role="button" style="color:#fff;">Donate to Bliss Family</a>
+ <br><br>
+ </div>
+ </div>
+ <div class="row">
<div class="col-xs-12 text-center about-tools">
- <p class="text-center">We are almost ready to open our doors to the public, so we are accepting applications now for new recruits. This means we will be accepting a small handful of people that want to learn and grow with Bliss Family of ROMs. We provide the tools and the mentorship, and all we ask in return is a minimum contribution towards Bliss ROM while you learn and grow in your strengths.</p>
- <p class="text-center">If you are interested in applying for this unique opportunity, we are only running it for a short time, so you must act quickly. Please fill out the form below, and we will be in touch with you soon. </p>
- <a class="btn btn-rounded portfolio-projects--btn" href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
+ <div class="family-header text-center">
+ <h2 class="text-center" style="color: #fff;">Bliss Family is accepting applications now!</h2>
+ </div>
+ <p class="text-center">We are open to the public, and accepting applications now for volunteer only positions (internships coming soon).
+ We are accepting people in small managable groups while we grow, and we tend to lean towards the type of people that want to learn and grow with Bliss Family of ROMs.
+ Bliss provides the tools, knowledge and the mentorship needed to help bring your development dreams to reality, and all we ask in return is a minimum contribution towards Bliss ROM while you learn and grow in your strengths.</p>
+ <p class="text-center">If you are interested in applying for this unique opportunity, please fill out the form below, and we will be in touch with you soon (usually within a few days). </p>
+ <a class="btn btn-rounded family-projects--btn" style="color:#fff;" href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
<p></p>
</div>
</div>
@@ -830,7 +834,7 @@
<div class="col-lg-4">
<div class="family">
<div class="family-image text-center">
- <img class="img-circle img-responsive" src="images/question-mark.png">
+ <img class="img-circle img-responsive" src="https://lh3.googleusercontent.com/-sK7PJvGhGNs/AAAAAAAAAAI/AAAAAAAAAAw/MksGgq5t7mE/s120-p-rw-no-il/photo.jpg">
<div class="family-links ">
<div class="family-links-list">
<a href="https://plus.google.com/u/0/107610198397215674589" target="_blank"><i class="fa fa-google-plus"></i></a>
@@ -871,7 +875,7 @@
<div class="family-role">
<h4>Submit your application now!</h4>
</div>
- <h4 class="family-description"> Follow the link and fill out an application for your project!<br><br><a class="btn btn-rounded family-projects--btn" role="button" href="https://goo.gl/kAb7ti">Join Bliss Family</a></h4>
+ <h4 class="family-description"> Follow the link and fill out an application for your project!<br><br><a class="btn btn-rounded family-projects--btn" role="button" href="https://goo.gl/kAb7ti">Submit your project now</a></h4>
</div>
<!-- /.family-content -->
</div>
@@ -993,6 +997,6 @@
}
});
</script>
- </body>
+</body>
</html>
\ No newline at end of file
