diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..77e417a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,265 @@
+
+@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento");
+.about-tools ul li, .contact-social-icons ul a li {
+  text-align: center; }
+
+.centered {
+  float: none;
+  margin-left: auto;
+  margin-right: auto; }
+
+.break {
+  clear: both;
+  margin-top: 10px; }
+
+@media (min-width: 768px) {
+  .pull-right-sm {
+    float: right !important; }
+
+  .pull-left-sm {
+    float: left !important; } }
+@media (min-width: 992px) {
+  .pull-right-md {
+    float: right !important; }
+
+  .pull-left-md {
+    float: left !important; } }
+@media (min-width: 1200px) {
+  .pull-right-lg {
+    float: right !important; }
+
+  .pull-left-lg {
+    float: left !important; } }
+* {
+  box-sizing: border-box; }
+
+html {
+  position: relative;
+  height: 100%; }
+
+img {
+  width: 100%; }
+
+body {
+  height: 100%;
+  font-family: "Comfortaa", Helvetica, Arial, sans-serif;
+  background-color: #0080ff;
+  /* Margin bottom by footer height */
+  margin-bottom: 60px; }
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Comfortaa", Helvetica, Arial, sans-serif;
+  color: #07374a; }
+
+p {
+  font-family: "Comfortaa", sans-serif;
+  color: #ffffff; }
+
+body > .container-fluid {
+  padding: 60px 15px 0; }
+
+.container-fluid .text-muted {
+  margin: 20px 0; }
+
+.btn:focus, a:focus {
+  outline: none !important; }
+
+.navbar {
+  height: 70px;
+  background-color: transparent;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  z-index: 100;
+  margin-bottom: 0;
+  border-radius: 0;
+  -webkit-transition: background-color 1s ease 0s;
+  transition: background-color 1s ease 0s; }
+
+.navbar-brand {
+  display: none;
+  margin-top: 10px;
+  color: #ffffff;
+  font-weight: 400; }
+
+.navbar-default .navbar-nav > li > a {
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 1em;
+  text-transform: lowercase;
+  margin: 10px 5px 5px 5px;
+  border-radius: 5px; }
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
+  color: #ffffff;
+  border: 1px solid #ffffff; }
+.navbar-default .navbar-nav > li > a:visited {
+  color: #ffffff;
+  text-decoration: none; }
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+  background-color: transparent;
+  color: #ffffff; }
+.navbar-default .navbar-toggle {
+  border-color: #ffffff; }
+  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+    background-color: #07374a; }
+  .navbar-default .navbar-toggle .icon-bar {
+    color: #ffffff;
+    background-color: #ffffff; }
+.navbar-default .navbar-collapse.collapse.in ul {
+  background-color: #07374a; }
+
+/* Solid class attached on scroll past first section */
+.navbar.solid {
+  background-color: #07374a;
+  -webkit-transition: background-color 1s ease 0s;
+  transition: background-color 1s ease 0s;
+  box-shadow: 0 0 4px rgba(7, 55, 74, 0.2); }
+  .navbar.solid .navbar-brand {
+    display: inline-block;
+    color: #ffffff;
+    -webkit-transition: color 1s ease 0s;
+    transition: color 1s ease 0s; }
+  .navbar.solid .navbar-nav > li > a {
+    color: #ffffff;
+    -webkit-transition: color 1s ease 0s;
+    transition: color 1s ease 0s; }
+
+.cover {
+  padding: 10% 0 10% 0; }
+  .cover.top {
+    padding: 5% 0 10% 0;
+    height: 100vh;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    background-color: #0080ff; }
+  .cover.bottom {
+    padding: 10% 0 10% 0; }
+
+.headline {
+  padding-top: 6.25em; }
+  @media screen and (min-width: 768px) {
+    .headline {
+      padding-top: 3.75em; } }
+  @media screen and (min-width: 992px) {
+    .headline {
+      padding-top: 1.5625em; } }
+  @media screen and (min-width: 1200px) {
+    .headline {
+      padding-top: 0px; } }
+
+#about {
+  background-color: #07374a; }
+  #about h2 {
+    color: #0080ff; }
+
+.profile-img {
+  margin-bottom: 15px;
+  width: 120px; }
+
+.about, .about-info, .about-tools, .about-last {
+  padding: 4% 10% 1% 10%;
+  font-size: 1.25em; }
+  .about-tools {
+    padding-top: 4.375em;
+    font-weight: 700;
+    font-size: 1.25em; }
+    @media screen and (min-width: 992px) {
+      .about-tools {
+        padding-top: 5.625em; } }
+    .about-tools ul:first-child {
+      padding-left: 0px; }
+    .about-tools ul {
+      color: #0080ff;
+      list-style: none; }
+      .about-tools ul li {
+        padding-top: 0.75em; }
+  .about-last {
+    padding-top: 3.125em;
+    padding-bottom: 0;
+    font-size: 1.125em; }
+    @media screen and (min-width: 992px) {
+      .about-last {
+        padding-top: 0; } }
+    .about-last p {
+      color: #0080ff; }
+
+#portfolio {
+  background-color: #0080ff; }
+  #portfolio h2 {
+    padding-bottom: 1.25em; }
+
+@media screen and (min-width: 768px) {
+  .portfolio-projects {
+    margin-top: 0.625em; } }
+.portfolio-projects--title {
+  margin-top: 0.9375em; }
+  @media screen and (min-width: 768px) {
+    .portfolio-projects--title {
+      margin-top: 20%; } }
+  @media screen and (min-width: 1200px) {
+    .portfolio-projects--title {
+      margin-top: 5%; } }
+@media screen and (min-width: 768px) {
+  .portfolio-projects--desc {
+    margin-top: 10%;
+    margin-bottom: 10%; } }
+.portfolio-projects--btn {
+  background: transparent;
+  color: #07374a;
+  border: 1px solid #07374a;
+  border-radius: 5px;
+  margin-bottom: 1.25em; }
+  .portfolio-projects--btn:hover {
+    background: #07374a;
+    color: #ffffff; }
+.portfolio-projects--image {
+  margin-bottom: 1.875em;
+  padding-top: 5%; }
+
+#contact {
+  background-color: #07374a; }
+  #contact h2 {
+    color: #0080ff; }
+
+.contact-social-icons p {
+  color: #0080ff; }
+.contact-social-icons ul a {
+  color: #0080ff;
+  list-style: none; }
+  .contact-social-icons ul a:hover {
+    color: #ffffff; }
+  .contact-social-icons ul a li {
+    display: inline-block;
+    padding: 2%; }
+
+.footer {
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 30px;
+  background-color: #07374a;
+  color: #ffffff; }
+
+#scrollIcon, #scrollTopIcon {
+  margin-top: 200px;
+  padding: 10px;
+  font-size: 1.5em;
+  color: #07374a;
+  border: solid 2px #07374a;
+  border-radius: 50%; }
+
+#scrollTopIcon {
+  margin-top: 10px;
+  font-size: 1em;
+  color: #ffffff;
+  border-color: #ffffff; }
+
+.back-to-top {
+  display: none; }
+  .back-to-top.visible {
+    display: block; }
diff --git a/images/bliss_lineup.png b/images/bliss_lineup.png
new file mode 100644
index 0000000..3d1e62d
--- /dev/null
+++ b/images/bliss_lineup.png
Binary files differ
diff --git a/images/bliss_nexus.png b/images/bliss_nexus.png
new file mode 100644
index 0000000..033ddb5
--- /dev/null
+++ b/images/bliss_nexus.png
Binary files differ
diff --git a/images/bliss_opt_logo.png b/images/bliss_opt_logo.png
new file mode 100644
index 0000000..6980e28
--- /dev/null
+++ b/images/bliss_opt_logo.png
Binary files differ
diff --git a/images/bliss_surface.png b/images/bliss_surface.png
new file mode 100644
index 0000000..78ca5a0
--- /dev/null
+++ b/images/bliss_surface.png
Binary files differ
diff --git a/images/lotus_button.svg b/images/lotus_button.svg
new file mode 100644
index 0000000..b4d1936
--- /dev/null
+++ b/images/lotus_button.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 360 360" style="enable-background:new 0 0 360 360;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#010101;}
+</style>
+<g>
+	<path class="st0" d="M185.3,263.9c2.3-3.3,4.5-6.3,6.6-9.3c12.1-16.5,25.2-32,40.2-45.9c12.9-11.9,26.8-22.2,42.6-30
+		c12.8-6.4,26.3-10.5,40.5-12.6c1.9-0.3,3.8-0.6,5.7-0.9c0.1,0.1,0.1,0.2,0.1,0.2c-3.8,8-7.6,16-11.5,24
+		c-7.6,15.6-16.7,30.2-27.9,43.5c-3.5,4.2-7.9,7.3-12.5,10.2c-10,6.2-21,10.2-32.3,13.2c-13.9,3.7-28.1,5.9-42.5,7.1
+		c-2.6,0.2-5.2,0.4-7.8,0.5C186.3,263.9,186,263.9,185.3,263.9z"/>
+	<path class="st0" d="M176.2,263.9c-2.7-0.2-5.1-0.3-7.5-0.5c-14.2-1.1-28.2-3.1-42-6.7c-11.1-2.8-21.9-6.6-31.9-12.3
+		c-8.1-4.6-14.7-10.8-20.3-18.3c-10.9-14.6-19.8-30.4-27.3-46.9c-2.1-4.7-4.4-9.3-6.6-14c0.2,0,0.4,0,0.6,0
+		c27.7,3.3,52,14.3,73.9,31.3c16.2,12.7,30.4,27.4,43.2,43.4c6,7.5,11.5,15.3,17.2,23C175.7,263.2,175.9,263.4,176.2,263.9z"/>
+	<path class="st0" d="M178.9,260.9c-0.5-0.4-0.9-0.6-1.2-1c-5.7-7.6-11.3-15.2-17.1-22.7c-2.7-3.5-5.6-6.8-8.6-10.1
+		c-5.2-5.6-10.4-11.2-15.7-16.6c-3-3-6.3-5.8-9.4-8.7c-0.4-0.4-0.7-0.9-0.9-1.5c-4.5-16.1-5.8-32.5-5.3-49.1
+		c0.4-10.4,1.4-20.6,3.4-30.8c0.1-0.4,0.2-0.8,0.3-1.4c0.4,0.3,0.8,0.5,1.1,0.8c7.7,6.5,14.3,14.2,20.1,22.4
+		c13.9,19.5,22.8,41.2,28,64.6c3.9,17.4,5.5,35.1,5.3,53c0,0.2,0,0.4,0,0.6C179.1,260.5,179.1,260.5,178.9,260.9z"/>
+	<path class="st0" d="M182.5,261c-0.1-0.7-0.1-0.9-0.1-1.1c-0.2-21.1,2-42,7.6-62.4c5.9-21.4,15-41.2,28.4-58.9
+		c5.2-6.9,11-13.4,17.7-18.9c0.2-0.2,0.4-0.3,0.6-0.4c0,0,0.1,0,0.3,0c0.1,0.3,0.2,0.7,0.2,1c3.1,16,4.2,32.2,3.3,48.4
+		c-0.6,10.6-2.1,21.1-5,31.4c-0.2,0.9-0.9,1.7-1.5,2.4c-1.5,1.5-3.1,2.7-4.6,4.2c-3.4,3.3-6.9,6.6-10.2,10
+		c-4.8,5.1-9.6,10.3-14.1,15.7c-6.5,7.9-12.6,16.1-18.9,24.1c-0.8,1.1-1.6,2.3-2.4,3.4C183.6,260.2,183.1,260.5,182.5,261z"/>
+	<path class="st0" d="M181.4,91.8c3.8,4.2,6.8,8.7,9.4,13.6c6.8,12.5,10.8,26,12.8,40.1c0.3,2.3,0.6,4.7,0.8,7.1
+		c0,0.4-0.1,0.9-0.2,1.2c-3.5,6.3-6.8,12.7-9.4,19.4c-2,5.1-4,10.3-5.7,15.5c-2.6,7.9-4.6,16-6,24.2c-0.8,4.7-1.4,9.4-2.1,14.1
+		c0,0-0.1,0.1-0.2,0.2c-0.3-2-0.5-3.9-0.8-5.8c-0.9-5-1.7-10-2.7-14.9c-1.6-8-3.8-15.8-6.6-23.4c-2.2-5.9-4.7-11.6-7.1-17.4
+		c-0.9-2.1-2-4.1-3-6.1c-0.1-0.3-0.2-0.7-0.2-1c1-17.1,4.3-33.7,11.2-49.5c2.5-5.8,5.5-11.3,9.2-16.4
+		C181,92.3,181.2,92.1,181.4,91.8z"/>
+	<path class="st0" d="M121.5,197.1c-2.6-2-5.1-4-7.6-5.8c-6.3-4.7-12.8-9-19.6-12.7c-2.6-1.4-5.3-2.7-7.9-4.1
+		c-0.4-0.2-0.9-0.7-1.1-1.1c-6.1-12.9-10.2-26.3-11.3-40.5c-0.2-2.5,0-5,0-7.7c0.4,0.1,0.9,0.2,1.3,0.4c7.2,2.8,13.7,6.9,19.9,11.4
+		c7.9,5.8,15.1,12.5,21.8,19.7c0.4,0.4,0.6,1.1,0.6,1.6c0.1,2.1-0.1,4.1,0.1,6.2c0.3,5.1,0.5,10.2,1.1,15.2c0.7,5.5,1.8,11,2.8,16.5
+		C121.5,196.5,121.5,196.8,121.5,197.1z"/>
+	<path class="st0" d="M287.6,125.2c0,0.5,0.1,0.9,0.1,1.3c0.1,10.9-2,21.4-5.5,31.6c-1.8,5.2-4,10.1-6,15.2
+		c-0.2,0.6-0.9,1.2-1.5,1.5c-8.4,4-16.3,8.8-23.8,14.2c-3.6,2.6-7.2,5.4-10.9,8.2c0.3-1.4,0.6-2.7,0.8-4c0.7-4.4,1.5-8.8,2.1-13.2
+		c0.5-3.8,0.7-7.5,0.9-11.3c0.2-3.5,0.1-7,0.2-10.5c0-0.4,0.1-0.9,0.4-1.2c9.1-9.8,19-18.7,30.6-25.5c3.8-2.2,7.9-3.9,11.8-5.9
+		C287,125.3,287.2,125.3,287.6,125.2z"/>
+</g>
+<path class="st0" d="M180.9,332.2c-82.8,0-150-67.2-150-150s67.2-150,150-150s150,67.2,150,150S263.8,332.2,180.9,332.2z
+	 M342.1,181.3c0-89.5-72.6-162.1-162.1-162.1S17.9,91.8,17.9,181.3S90.5,343.4,180,343.4S342.1,270.8,342.1,181.3z"/>
+</svg>
diff --git a/index.html b/index.html
index 4802092..d2c420d 100644
--- a/index.html
+++ b/index.html
@@ -3,28 +3,171 @@
 
   <head>
     <meta charset='utf-8' />
-    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <meta name="description" content="BlissRoms - Command Line Website" />
-    <link rel="stylesheet" type="text/css" media="screen" href="style.css">     
-    <title>BlissRoms.github.io - Command Line Website</title>
+    <meta name="description" content="BlissRoms - new site" />
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+	<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+	<title>BlissRoms.github.io - New Site </title>
   </head>
 
   <body>
+    <!-- Fixed navbar -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Bliss OS</a>
+        </div>
+        <div id="navbar" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav navbar-right">
+            <li id="nav-about"><a href="#about">About Bliss</a></li>
+            <li id="nav-portfolio"><a href="#portfolio">Download</a></li>
+            <li id="nav-contact"><a href="#contact">Contact</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
 
-    <!-- HEADER -->
+    <!-- Begin page content -->
+    <div class="container-fluid">
+      
+      <div class="row cover top">
+        <div class="col-xs-12">
+          <div class="row">
+            <div class="col-xs-12 headline">
+			<img class="centered text-center" src="http://i.imgur.com/nzsZTTY.png">
+              <h1 class="text-center">This is Bliss OS</h1>
+              <p class="lead text-center">A Open-Source OS for phones, tablets & PC's</p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xs-12 center-block text-center">
+              <a href="#about"><span id="scrollIcon" class="front-glyph glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      
+      <div id="about" class="row cover">
+        <h2 class="text-center">About Bliss</h2>
+        <div class="row">
+          <div class="col-md-6 text-center about-info">
+            <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
+            <p class="text-center">We are a team of designers, developers, maintainers, and business professionals who work together to help achieve the dreams of our teammates and the Android Community. Our goal is to help provide a unique learning environment, using the FOSS mentality, and not only train people how to make and monetize what they aspire, but also help provide unique business opportunities for already existing projects too. </p>
+			<p class="text-center">If you are interested in joining our team, please fill out the form found here: <a href="https://goo.gl/forms/PdiaAj1PojosmehK2"><li>Join Team Bliss</li></a></p>
+			<p class="text-center">Or if you represent an already existing project and would like to join the Bliss Family, please fill out the form found here: <a href="https://goo.gl/kAb7ti"><li>Join Bliss Family</li></a></p>
+			</div>
+          <div class="col-md-6 about-tools">
+            <p class="text-center">The nature of our business is to train and develop. So we have quite the diverse list of things we have experience with, and the list is growing constantly<br/><br/>Here's a few of the types of projects we work on</p>
+              <div class="col-xs-6">
+                <ul>
+                  <li>Android Development</li>
+                  <li>Graphic Design</li>
+                  <li>Web Development</li>
+                  <li>IOT Software Development</li>
+                  <li>Server Admin</li>
+				  <li>Prototype Design</li>
+				  <li>Animation</li>
+				  <li>Brand Imaging</li>
+                </ul>
+              </div>
+              <div class="col-xs-6">
+                <ul>
+                  <li>Development Training</li>
+                  <li>Design Training</li>
+                  <li>Team Management</li>
+                  <li>Marketing</li>
+                  <li>Product Technology Strategy</li>
+				  <li>New Product Development</li>
+				  <li>Product Testing</li>
+				  <li>OEM Software Resources</li>
+                </ul>
+              </div>
+            
+          </div>
+          <div class="row break">
+            <div class="centered col-md-6 about-last">
+              <p class="text-center">Check out our latest projects <span class="glyphicon glyphicon-arrow-down"></span></p>
+            </div>
+          </div>
+        </div> 
+      </div><!-- End #About -->
 
-    <div class="stream"></div>
-   <div class="line editline">
-      <p class="time"></p>
-      <p class="name">&gt;</p>
-      <p contenteditable="true" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="information edit"></p>
-   </div>
+      <div id="portfolio" class="row cover">
+        <h2 class="text-center">Downloads</h2>
+        <div class="container">
+          <div class="row portfolio-projects"> <!-- Two project row-->
+            <div class="col-lg-6"> <!--1st side project -->
+              <div class="row"> 
+                <div class="col-sm-5 text-center">
+                  <h4 class="portfolio-projects--title">Bliss OS - For Phones and Tablets</h4>
+                  <p class="portfolio-projects--desc">This is the Bliss you have all come to know and love for your phones and tablets.</p>
+                  <p class="portfolio-projects--desc">Devices: axon7, bacon, bullhead, clark, hammerhead, hydrogen, kenzo, kiwi, mako, marlin, oneplus2, shamu, victara, warp4</p>
+                  <a class="btn btn-rounded portfolio-projects--btn" href="https://downloads.blissroms.com/Bliss/Official/" role="button">Go To Downloads</a>
+                </div>
+                <div class="col-sm-7 text-center">
+                  <img class="portfolio-projects--image" src="images/bliss_nexus.png">
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-6"> <!--2nd side project -->
+              <div class="row"> 
+                <div class="col-sm-5 text-center pull-right-sm"><!--flipped on small, unflipped on large-->
+                  <h4 class="portfolio-projects--title">Bliss x86 - For PC's and Laptops</h4>
+                  <p class="portfolio-projects--desc">This is a newer spin on Bliss for your x86 PC's, Laptops, Tablets and x86 maker boards.</p>
+                  <p class="portfolio-projects--desc">Devices: Compatible with the growing number of Intel x86 CPU's This includes some AMD and Nvidia CPU's (MBR and UEFI Compatible)</p>
+                  <a class="btn btn-rounded portfolio-projects--btn" href="https://downloads.blissroms.com/Bliss/Official/x86/" role="button">Go To Downloads</a>
+                </div>
+                <div class="col-sm-7 text-center pull-right-sm"><!--flipped on small, unflipped on large-->
+                  <img class="img-rounded portfolio-projects--image" src="images/bliss_surface.png">
+                </div>
+              </div>
+            </div>
+          </div><!--end Two project row-->
+
+        </div>
+        </div>
+      </div><!-- End #Portfolio -->
+
+      <div id="contact" class="row cover bottom">
+        <h2 class="text-center contact-header">Find Us Online</h2>
+        <p class="text-center contact-email">Get in touch with us <span class="glyphicon glyphicon-arrow-right"></span> blissfamilyroms@gmail.com</p>
+        <div class="text-center contact-social-icons">
+          <p>Or find us online at:</p>
+          <ul class="centered">
+            <a href="https://t.me/OfficialBlissROMs"><li><i class="fa fa-telegram"></i> Bliss ROMs Telegram</li></a>
+            <a href="https://t.me/blissx86"><li><i class="fa fa-telegram"></i> Bliss x86 Telegram</li></a>
+            <a href="https://github.com/BlissRoms"><li><i class="fa fa-github"></i> Bliss OS Github</li></a>
+            <a href="https://github.com/BlissRoms-x86"><li><i class="fa fa-github"></i> Bliss x86 Github</li></a>
+			<a href="https://review.blissroms.com"><li><i class="fa fa-github"></i> Bliss OS Gerrit</li></a>
+			<a href="https://review-x86.blissroms.com"><li><i class="fa fa-github"></i> Bliss x86 Gerrit</li></a>
+			<a href="https://twitter.com/Bliss_Roms"><li><i class="fa fa-twitter"></i> Twitter</li></a>
+          </ul>
+        </p>
+        
+      </div><!-- End #Contact -->
+
+    </div>
+
+    <footer class="footer">
+      <div class="container">
+      </div>
+    </footer>
 
   </body>
   
-     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-     <script src="//codepen.io/OfficialAntarctica/pen/dcdf9b1e328493afd4bd982ed98266d3.js"></script>
-     <script src="script.js"></script>
+	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+	<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
+	<script src='https://cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js'></script>
+	<script src="js/script.js"></script>
   
 </html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..f270085
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,39 @@
+$(document).ready(function() {
+
+        // Transition effect for navbar and back-to-top icon
+        $(window).scroll(function() {
+          // checks if window is scrolled more than 500px, adds/removes solid class
+          if($(this).scrollTop() > 550) { 
+              $('.navbar').addClass('solid');
+              $('.back-to-top').addClass('visible'); 
+          } else {
+              $('.navbar').removeClass('solid');
+              $('.back-to-top').removeClass('visible');  
+          }
+
+        });
+
+
+        // Scrolling effect for Arrow icons
+        $("#scrollIcon").click(function(e) {
+            e.preventDefault();
+            $.scrollTo($("#about"), 1000);
+        });
+        $("#nav-about").click(function(e) {
+            e.preventDefault();
+            $.scrollTo($("#about"), 1000);
+        });
+        $("#nav-portfolio").click(function(e) {
+            e.preventDefault();
+            $.scrollTo($("#portfolio"), 1000);
+        });
+        $("#nav-contact").click(function(e) {
+            e.preventDefault();
+            $.scrollTo($("#contact"), 1000);
+        });
+        $(".navbar-brand").click(function(e) {
+            e.preventDefault();
+            $.scrollTo(0, 1000);
+        });
+          
+      });
\ No newline at end of file
diff --git a/script.js b/script.js
deleted file mode 100644
index 77b1ea0..0000000
--- a/script.js
+++ /dev/null
@@ -1,386 +0,0 @@
-// JavaScript Document
-$(document).ready(function(e) {
-   /* Todo:
- • Merge this with Node.js, almost done
- • Webpages in a database/more editable version
- • Add cookies to track previous commands? (You can press up and down to browse previous commands this session)
-*/
-   var faviconnumber = 1;
-	function favicon() {
-		favicon = favicon == 1 ? 2 : 1;
-		$('.favicon').attr('href','favicon' + favicon + ".png");
-	}
-   console.clear();
-   var commandlist = [ /*Can be populated with various methods*/
-      ["/help", "Show commands"],
-      ["/list", "List all pages on the website"],
-      ["/nav &lt;location&gt;", "Navigate to location"],
-	   ["/gl", "Generate a url for the current page - not currently working"],
-      ["/clear", "Clear the console"],
-      ["brunch + bliss_device", "Initiate device compile - Example: 'brunch bliss_bacon' will get you a build for bacon, 'brunch bliss_x86' will get you a build for Bliss-x86. You get the idea"],
-      ["/login &lt;username&gt; &lt;password&gt;", "Login to your account - This is not set up and when implemeneted it'll be '/login username' then request password without printing into the cmd prompt"],
-      ["/upload", "Upload file, must be logged in."]
-   ];
-   var previouscommands = [];
-   var currentcommand = 0;
-   var pages = [ /*Can be populated with various methods*/
-      ["index", "Welcome to BlissROMs temporary site", "This is a temporary website we are puting up in order to help with the current transition of our website", "You can find us online or on Telegram using the following links.", "Google+: [https://plus.google.com/communities/118265887490106132524](https://plus.google.com/communities/118265887490106132524)","Telegram: [https://t.me/OfficialBlissROMs](https://t.me/OfficialBlissROMs)"],
-      ["about", "About Bliss", "A little info about us", "We are a family of ROMs, app developers, designers, and tech gurus, that work together to bring our dreams to life.", "To join Bliss Family of ROMs, [https://goo.gl/ZJn2vn](https://goo.gl/ZJn2vn)", "We are currently accepting applications for developers, maintainers, app devs, designers, and marketing/PR."],
-	  ["connect", "Connect with Bliss",
-	  "[mailto:Officialblissroms@gmail.com](Email Bliss)",
-	  "[^https://plus.google.com/communities/118265887490106132524](Google+ Community)",
-	  "[^https://t.me/OfficialBlissROMs](Telegram Community)",
-	  "[^https://review.blissroms.com](Gerrit Code Review for Blissroms)",
-	  "[^https://goo.gl/forms/PdiaAj1PojosmehK2](*Join Team Bliss*)"]
-   ];
-   var pageindex = ["index", "about", "connect"];
-   var currentpage = "landing";
-   var url = "http://blissroms.github.io/"
-      /*
-         Custom Text Syntax
-         Links:      
-            [URLPATH](NAME) - regular
-            [^URLPATH](NAME) - open in new tab
-            
-         Styles:
-            *TEXT* - bold text
-            E! - Text is an error/notification
-            A! - spaces are converted to non-breaking spaces (it's for ascii art - after all, this is a text based website)
-      */
-
-   function init() {
-      setInterval(time);
-      console.clear();
-      console.log(new Date().getTime());
-      log("Website", "A!****************************");
-      log("Website", "A! ____  _     ___ ____ ____  ");
-      log("Website", "A!| __ )| |   |_ _/ ___/ ___| ");
-      log("Website", "A!|  _) | |    | |(___ (___ ) ");
-      log("Website", "A!| |_) | |___ | | ___) |__) |");
-      log("Website", "A!|____/|_____|___|____/____/ ");
-      log("Website", "A!                           *");
-      log("Website", "A!****************************");
-      log("Website", "A!Have A Truly Blissful Experience");
-      log("Website", "A!****************************");
-      log("Website", "");
-      log("Website", "E!Bliss ROMs temporary site [^http://blissroms.github.io/](*blissroms.github.io*)");
-      log("Website", "");
-      log("Website", "A!********************************");
-      log("Website", "");
-      log("Website", "E![^http://downloads.blissroms.com/](*Bliss Downloads*) , [^http://paypal.me/TeamBliss](*Donate to Team Bliss*)");
-	log("Website", "E![^http://review.blissroms.com](*BlissROMs Gerrit Review*) , [^https://goo.gl/forms/PdiaAj1PojosmehK2](*Join Team Bliss*)");
-	log("Website", "");
-      log("Website", "E![^https://goo.gl/kAb7ti](*Join Bliss Family of ROMs*)");
-      log("Website", "");
-      log("Website", "A!********************************");
-	   urlvars();
-      log("Client", "For help say '/help'");
-	  setInterval(favicon,500);
-   }
-
-   function urlvars() {
-	   var pagelocs = window.location.pathname.replace("/","").split("/");
-	   var pageloc = pagelocs[0];
-	   console.log(pageloc);
-	   //alert();
-		if(pageloc != "") {
-            if ($.inArray(pageloc, pageindex) >= 0) {
-               currentpage = pageloc;
-            }
-		}
-      	log("Website", "You are currently on page: *" + currentpage + "*");
-		if(pageloc != "") {
-            if ($.inArray(pageloc, pageindex) >= 0) {
-               currentpage = pageloc;
-               loadpage($.inArray(pageloc, pageindex));
-            } else {
-               //Un-note next line to show 404 errors with wrong urls
-               //log("Client", "404 - The page '" + pageloc + "' does not exist. To "); 
-            }
-		}
-		if(pageloc == "") {
-      		log("Client", "What would you like to access?");	
-		}
-   }
-   function getParam(name){
-		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
-		var regexS = "[\\?&]"+name+"=([^&#]*)";
-		var regex = new RegExp( regexS );
-		var results = regex.exec (window.location.href);
-		if (results == null) {
-			return "";
-		}
-		else  {
-			return results[1];
-		}
-	}
-
-   function log(name, information) {
-      var d = new Date();
-      var hours = ((d.getHours() < 10) ? "0" : "") + d.getHours();
-      var minutes = ((d.getMinutes() < 10) ? "0" : "") + d.getMinutes();
-      var seconds = ((d.getSeconds() < 10) ? "0" : "") + d.getSeconds();
-      var colour = "whitet";
-      var textcolour = "";
-      var postcolour = "";
-
-      switch (name[0]) {
-         case "!":
-            postcolour = " important";
-            name = name.substr(1);
-            break;
-      }
-      switch (name) {
-         case "Website":
-            colour = "redt";
-            break;
-         case "Server":
-            colour = "bluet";
-            break;
-         case "Client":
-            colour = "bluet";
-            break;
-         case "User":
-            colour = "greent";
-            postcolour = " selft";
-            break;
-      }
-      if (information[0] == "A" && information[1] == "!") {
-         information = information.substr(2);
-         information = information.replace(/ /g, '\u00A0');
-      }
-      if (information[0] == "E" && information[1] == "!") {
-         information = information.substr(2);
-         postcolour = " important";
-      }
-
-      while (information.indexOf("](") >= 0) { //URL parser
-
-         var NAMEregExp = /\(([^)]+)\)/;
-         var uname = NAMEregExp.exec(information)[1];
-
-         var URLregExp = /\[([^)]+)\]/;
-         var url = URLregExp.exec(information)[1];
-         var newpage = false;
-         if (url[0] == "^") {
-            newpage = true;
-            url = url.substr(1);
-         }
-         var start = information.indexOf("[");
-         var end = information.indexOf(")");
-         if (newpage) {
-            information = information.replace(information.substring(start, end + 1), "").splice(start, 0, '<a href="' + url + '" target="_blank">' + uname + '</a>');
-         } else {
-            information = information.replace(information.substring(start, end + 1), "").splice(start, 0, '<a href="' + url + '">' + uname + '</a>');
-         }
-         //information = '<a href="' + url + '">' + uname + '</a>'; //working
-
-      }
-      var tobold = true;
-      var boldnumber = 0;
-      for (var i = 0; i < information.length; i++) {
-         if (information[i] == "*" && information[i - 1] != "*" && information[i + 1] != "*") {
-            boldnumber++;
-         }
-      }
-      while (information.indexOf("*") >= 0) { //Bold parser
-         var pos = information.indexOf("*");
-         information = information.replace("*", "");
-         if (tobold) {
-            information = information.splice(pos, 0, '<b>');
-         } else {
-            information = information.splice(pos, 0, '</b>');
-         }
-         tobold = !tobold;
-         if (tobold && boldnumber <= 1) {
-            break;
-         }
-         //information = '<a href="' + url + '">' + uname + '</a>'; //working
-      }
-      var tounderline = true;
-      var underlinenumber = 0;
-      for (var i = 0; i < information.length; i++) {
-         if (information[i] == "*" && information[i - 1] != "*" && information[i + 1] != "*") {
-            underlinenumber++;
-         }
-      }
-      while (information.indexOf("**") >= 0) { //Bold parser
-         var pos = information.indexOf("**");
-         information = information.replace("**", "");
-         if (tounderline) {
-            information = information.splice(pos, 0, '<u>');
-         } else {
-            information = information.splice(pos, 0, '</u>');
-         }
-         tounderline = !tounderline;
-         if (tounderline && underlinenumber <= 1) {
-            break;
-         }
-         //information = '<a href="' + url + '">' + uname + '</a>'; //working
-      } /**/
-      $(".stream").append('<div class="line">' +
-         '<p class="time">[' + hours + ":" + minutes + ":" + seconds + ']</p>' +
-         '<p class="name ' + colour + '">' + name + '</p>' +
-         '<p class="information' + postcolour + '">' + information + '</p>' +
-         '</div>');
-      $(document).scrollTop($(document).height() - $(window).height());
-   }
-	var timestring = "";
-   function time() {
-      var d = new Date();
-      var hours = d.getHours();
-      var minutes = d.getMinutes();
-      var seconds = d.getSeconds();
-      if (hours < 10) {
-         hours = "0" + hours;
-      }
-      if (minutes < 10) {
-         minutes = "0" + minutes;
-      }
-      if (seconds < 10) {
-         seconds = "0" + seconds;
-      }
-	  var temptimestring = "[" + hours + ":" + minutes + ":" + seconds + "]";
-	  if (temptimestring != timestring) {
-		  timestring = temptimestring;
-      	$(".editline .time").text(timestring);
-	  }
-   }
-
-   var ctrldown = false;
-   $(".editline .edit").keydown(function(e) {
-      var text = $(".editline .edit").text();
-      console.log(e.which);
-      if (e.which == 13 && text !== "" && !ctrldown) {
-         var commands = text.split(' ');
-         var output = "";
-         if (commands[0] == "help") {
-            text = "/" + text;
-         }
-         $(".editline .edit").text("");
-         log("User", text);
-
-         previouscommands[currentcommand] = text;
-         currentcommand = previouscommands.length;
-         $(".editline .edit").keydown(35);
-         cmd(commands[0], text, commands);
-         /*Add mod commands*/
-         //modcmd(commands[0], text, commands);
-         /*Add mod commands*/
-
-      }
-      if (e.which == 38) { //up
-         if (currentcommand > 0) {
-            currentcommand--;
-            $(".editline .edit").text(previouscommands[currentcommand]);
-         }
-      }
-      if (e.which == 40) { //down
-
-         if (currentcommand < previouscommands.length) {
-            currentcommand++;
-            $(".editline .edit").text(previouscommands[currentcommand]);
-         }
-      }
-   });
-
-   function cmd(command, words, word) {
-      switch (word[0]) {
-         case "/help":
-         case "help":
-            for (var i = 0; i < commandlist.length; i++) {
-               output = commandlist[i][0] + " : " + commandlist[i][1];
-               //console.log(command[i][0]);
-               log("Client", output);
-            }
-            break;
-		 case "/gl":
-			//window.location.href = "http://koya.io" + (currentpage == "landing" ? "" : "/" + currentpage);
-			window.history.pushState(currentpage, 'InpagePage', (currentpage == "landing" ? "/" : "/" + currentpage));
-			break;
-         case "/clear":
-            $(".stream").text("");
-            break;
-         case "/nav":
-            if ($.inArray(word[1], pageindex) >= 0) {
-               currentpage = word[1];
-               log("Website", "You are now in " + currentpage);
-               loadpage($.inArray(word[1], pageindex));
-            } else {
-               log("Client", "'" + word[1] + "' does not exist.");
-            }
-            break;
-         case "/list":
-            $.each(pageindex, function(id, content) {
-               log("Client", "> " + content);
-            });
-            break;
-         case "/login":
-            if (word.length >= 3) {
-               log("Client", "Attempting to login to " + word[1] + " with " + Array(word[2].length + 1).join("â€¢"));
-               loginreturn = false;
-               //log("Client", "ER1");
-               setTimeout(loginemptyreturn, 20000);
-            } else {
-               log("Client", "Not enough arguments to log in, you need a USERNAME and a PASSWORD.");
-            }
-            break;
-	      case "/brunch":
-         case "brunch":
-         if (word[1] == "bliss_kiwi") {		window.open("https://downloads.blissroms.com/Bliss/Official/kiwi/");
-                                        }
-            else if(word[1] == "bliss_x86") {        	window.open("https://downloads.blissroms.com/Bliss/Official/x86/");
-                                           }
-            else if(word[1] == "bliss_axon7") {        	window.open("https://downloads.blissroms.com/Bliss/Official/axon7/");
-                                             }
-            else if(word[1] == "bliss_bacon") {        	window.open("https://downloads.blissroms.com/Bliss/Official/bacon/");
-                                             }
-            else if(word[1] == "bliss_bullhead") {        	window.open("https://downloads.blissroms.com/Bliss/Official/bullhead/");
-                                                }
-            else if(word[1] == "bliss_clark") {        	window.open("https://downloads.blissroms.com/Bliss/Official/clark/");
-                                             }
-            else if(word[1] == "bliss_hammerhead") {       window.open("https://downloads.blissroms.com/Bliss/Official/hammerhead/");
-                                                  }
-            else if(word[1] == "bliss_hydrogen") {        	window.open("https://downloads.blissroms.com/Bliss/Official/hydrogen/");
-                                                }
-            else if(word[1] == "bliss_kenzo") {        	window.open("https://downloads.blissroms.com/Bliss/Official/kenzo/");
-                                             }
-            else if(word[1] == "bliss_mako") {        	window.open("https://downloads.blissroms.com/Bliss/Official/mako/");
-                                            }
-            else if(word[1] == "bliss_oneplus2") {        	window.open("https://downloads.blissroms.com/Bliss/Official/oneplus2/");
-                                                }
-            else if(word[1] == "bliss_shamu") {        	window.open("https://downloads.blissroms.com/Bliss/Official/shamu/");
-                                              }
-            else if(word[1] == "bliss_victara") {        	window.open("https://downloads.blissroms.com/Bliss/Official/victara/");}
-            else if(word[1] == "bliss_warp4") {        	window.open("https://downloads.blissroms.com/Bliss/Official/warp4/");}
-            else {
-               output = "Unrecognized device";
-               log("Client", output);
-            }
-            break;
-         default:
-            output = "Unrecognised command '" + word[0] + "'.";
-            log("Client", output);
-      }
-   }
-
-   function loadpage(i) {
-      $.each(pages[i], function(id, content) {
-         if (content != pageindex[i]) {
-            log("Website", content);
-         }
-      });
-   }
-   var loginreturn = false;
-
-   function loginemptyreturn() {
-      //log("Client", "ER2");
-      if (!loginreturn) {
-         log("Client", "E![LOGIN] No Return Recieved");
-      }
-   }
-   String.prototype.splice = function(idx, rem, str) {
-      return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
-   };
-   init();
-});
diff --git a/style.css b/style.css
deleted file mode 100644
index 54feb97..0000000
--- a/style.css
+++ /dev/null
@@ -1,103 +0,0 @@
-body {
-  background-color: #3A3A3A;
-  color: #FFFFFF;
-  font-family: 'Fira Mono', Monospace;
-  margin: 0;
-  overflow-x: hidden;
-}
-body a {
-  color: inherit;
-}
-body a:hover {
-  color: #00bbff;
-  background-color: #373838;
-}
-body .stream {
-  margin-top: 8px;
-}
-body .line {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  margin: 0 4px;
-  padding-top: 2px;
-  width: calc(100% - 12px);
-}
-body .line p {
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
-body .line .name {
-  max-width: 80px;
-  min-width: 80px;
-  text-align: right;
-  padding-right: 6px;
-}
-body .editline {
-  background-color: #262626;
-  padding: 2px 4px 0px 4px;
-  width: calc(100%);
-  margin: 0;
-  margin-bottom: 8px;
-}
-body .editline .edit {
-  min-width: calc(100% - 200px);
-  outline: none;
-}
-body .editline .time {
-  user-select: none;
-  cursor: default;
-}
-
-.whitet {
-  color: #00bbff;
-}
-
-.redt {
-  color: #d75f5f;
-}
-
-.important {
-  color: #E3A786;
-}
-
-.bluet {
-  color: #42aaf4;
-}
-
-.greent {
-  color: #afaf00;
-}
-
-.selft {
-  color: #83A598;
-}
-
-::selection {
-  color: #00bbff;
-  background: #373838;
-}
-
-::-webkit-scrollbar {
-  background-color: #3A3A3A;
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #bcbcbc;
-}
-
-::-webkit-scrollbar-corner {
-  background-color: #3A3A3A;
-}
-
-::-webkit-resizer {
-  background-color: #3A3A3A;
-}
-
-.phjspenheader:hover {
-  background-color: #D44C2A;
-}
diff --git a/style.scss b/style.scss
deleted file mode 100644
index 93c759d..0000000
--- a/style.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-$text:#FFFFFF;
-$highlighttext:#00bbff;
-$black:#262626;
-$darkgrey:#3A3A3A;
-$grey:#bcbcbc;
-$highlight:#373838;
-$selftext:#83A598;
-
-$cream:#00bbff;
-$lightblue:#87afaf;
-$green:#afaf00;
-$red:#d75f5f;
-$textred:#E3A786;
-$orange:#dd6f48;
-$pink:#d787af;
-$gold:#ff8700;
-$yellow:#ffaf00;
-$darkgreen:#878700;
-$turquoise:#87af87;
-$blue:#42aaf4;
-$darkblue:#005f87;
-$purple:#875f87;
-$lighterblue:#83a598;
-
-body {
-   background-color:$darkgrey;
-   color:$text;
-   font-family: 'Fira Mono', Monospace;
-   margin:0;
-   overflow-x:hidden;
-   a {
-      color:inherit;
-      &:hover{
-         color:$highlighttext;
-         background-color:$highlight;
-      }
-   }
-   .stream {
-      margin-top:8px;
-   }
-   .line {
-      margin:0;
-      padding:0;
-      display:flex;
-      flex-direction:row;
-      margin:0 4px;
-      padding-top:2px;
-      width:calc(100% - 12px);
-      p {
-         display:inline-block;
-         margin:0;
-         padding:0;
-      }
-      .name {
-         max-width:80px;
-         min-width:80px;
-         text-align:right;
-         padding-right:6px;
-      }
-   }
-   .editline {
-      background-color:$black;
-      padding: 2px 4px 0px 4px;
-      width:calc(100%);
-      .edit {
-         min-width:calc(100% - 200px);
-         outline:none;
-      }
-      margin:0;
-      margin-bottom:8px;
-      .time {
-         user-select: none;
-         cursor:default;
-      }
-   }
-}
-.whitet {
-   color:$highlighttext;
-}
-.redt {
-   color:$red;
-}
-.important {
-   color:$textred;
-}
-.bluet {
-   color:$blue;
-}
-.greent {
-   color:$green;
-}
-.selft {
-   color:$selftext;
-}
-::selection {
-   color:$highlighttext;
-   background: $highlight;
-}
-::-webkit-scrollbar{background-color:$darkgrey;width:10px;height:10px;}
-::-webkit-scrollbar-thumb{background-color:$grey;}
-::-webkit-scrollbar-corner{background-color:$darkgrey;}
-::-webkit-resizer{background-color:$darkgrey;}
-
-
-.phjspenheader:hover {
-    background-color: #D44C2A 
-}