add landing page

jasylwong · Feb 28, 2020 · 9aaaa04 · 9aaaa04
1 parent 63fdb80
commit 9aaaa04
Show file tree

Hide file tree

Showing 3 changed files with 219 additions and 0 deletions.
diff --git a/app.rb b/app.rb
@@ -10,6 +10,10 @@ class MakersBnB < Sinatra::Base
   enable :sessions
   register Sinatra::Flash
 
+  get '/landing_page' do
+    erb :"landing_page/landing_page"
+  end
+
   get '/' do
     erb :index
   end

diff --git a/public/css/landing_page.css b/public/css/landing_page.css
@@ -0,0 +1,145 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  font-family: "Playfair Display" !important;
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+.left, .right {
+  position: absolute;
+  height: 100%;
+  width: 50%;
+}
+
+.left {
+  background: #ffffff;;
+}
+
+.right {
+  left: 50%;
+  background: lightblue;
+}
+
+.nav {
+  position: fixed;
+  width: 100%;
+  height: 100px;
+}
+
+.logo, .next {
+  line-height: 80px;
+  position: absolute;
+  padding: 10px;
+}
+
+.watch, .cart {
+  line-height: 80px;
+  position: absolute;
+  padding: 10px;
+  right: 0; 
+}
+
+.logo {
+  padding: 10px 80px 10px 60px;
+  background: lightblue;
+}
+
+.next {
+  left: 280px;
+}
+
+.watch {
+  right: 220px;
+  font-family: helvetica;
+  color: grey;
+  font-weight: lighter;
+  text-transform: uppercase; 
+}
+
+.cart {
+  right: 70px; 
+}
+
+.right-sidebar {
+  right: 80px;
+  position: absolute;
+  top: 45%;
+  transform: translateY(-50%);
+  text-align: right;
+}
+
+.right-sidebar ul {
+  list-style: none;
+}
+
+.title {
+  font-size: 36px;
+  font-family: "Playfail Display";
+  padding-bottom: 40px;
+}
+
+.right-sidebar li:not(:first-child) {
+  padding: 6px 0;
+}
+
+.product {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fly 2s ease-in-out infinite;
+}
+
+@keyframes fly {
+  0% {
+    transform: translate(-50%, -30%);
+  }
+
+  50% {
+    transform: translate(-50%, -54%);
+  }
+
+  100% {
+    transform: translate(-50%, -30%);
+  }
+}
+
+.left-bottom {
+  position: absolute;
+  left: 60px;
+  bottom: 40px;
+  font-family: helvetica;
+  letter-spacing: 3px;
+  color: grey;
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.left-sidebar {
+  left: 60px;
+  position: absolute;
+  top: 46%;
+  transform: translateY(-50%);
+  text-align: left;
+  width: 26%;
+}
+
+
+.right-bottom {
+  position: absolute;
+  right: 60px;
+  bottom: 40px;
+  font-family: helvetica;
+  letter-spacing: 3px;
+  color: grey;
+  text-transform: uppercase;
+  font-size: 20px;
+}
diff --git a/views/landing_page/landing_page.erb b/views/landing_page/landing_page.erb
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Landing page</title>
+  <link type='text/css' rel='stylesheet' href='/css/landing_page.css'>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div class="left"></div>
+    <div class="right"></div>
+
+    <div class="nav">
+      <div class="logo">BugBusters</div>
+
+      <div class="next"><i class="fa fa-angle-right"></i></div>
+
+      <div class="watch"><i class=" fa fa-caret-right"></i>&nbsp; Watch our demo video...</div>
+
+      <div class="cart"><i class="fa fa-shopping-cart"></i></div>
+    </div>
+
+    <div class="right-sidebar">
+      <ul>
+        <li class="title">Team</li>
+        <li>Megan</li>
+        <li>Ziad</li>
+        <li>Dafna</li>
+        <li>Jack</li>
+        <li>Jason</li>
+      </ul>
+    </div>
+
+    <div class="left-bottom">
+      <p>Contact</p>
+    </div>
+
+    <div class="left-sidebar">
+      <h1 class="product-title">MakersBnB</h1>
+      <p class="desc">When AirBnB just aint good enough for you</p>
+      <p id="price"></p>
+      <a href="/"><button class="btn">Enter!</button></a>
+    </div>
+
+    <div class="product" id="product">
+      <img src="https://www.holland.com/upload_mm/6/2/2/68946_fullimage_kasteel-de-haar-1360.jpg" alt="picture" width="500px">
+    </div> 
+
+    <div class="media">
+      <ul>
+        <li><i class="fa fa-facebook"></i></li>
+        <li><i class="fa fa-instagram"></i></li>
+        <li><i class="fa fa-twitter"></i></li>
+      </ul>
+    </div>
+
+    <div class="right-bottom">
+      <div><i class="fa fa-facebook"></i></div>
+      <div><i class="fa fa-instagram"></i></div>
+      <div><i class="fa fa-twitter"></i></div>
+    </div>
+  </div>
+</body>
+</html>