Landing page main

examples/views/index.hbs

@@ -3,7 +3,7 @@
 <div class="home-vh">
 	<div class="row no-gutters">
 		<div class="col-sm-3 pb-4 position-relative border-right" style="height: calc(100vh - 70px); overflow-y: scroll">
-			<h2 class="position-sticky bg-white p-4">Views</h2>
+			<h2 class="position-sticky bg-white p-4 tr">Views</h2>
 			<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="n-account-address.html">n-account-address</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="n-account-application.html">n-account-application</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="n-account-client.html">n-account-client</a></div>
@@ -23,6 +23,7 @@
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="code-editor.html">code-editor</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="code-window.html">code-window</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="buttons.html">buttons</a></div>
+<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="landing-page_main.html">landing-page_main</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="competition-card.html">competition-card</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="competition.html">competition</a></div>
 <div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="course-card-new.html">course-card-new</a></div>

examples/views/layouts/default.hbs

@@ -7,7 +7,7 @@
       <link href="stylesheets/account.css" rel="stylesheet">
       <link href="stylesheets/hb.css" rel="stylesheet">
       <link href="stylesheets/hiringblocks.css" rel="stylesheet">
-      {{!-- <link href="stylesheets/coding-blocks.css" rel="stylesheet"> --}}
+      <link href="stylesheets/coding-blocks.css" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800" rel="stylesheet">
       <link href="https://minio.codingblocks.com/motley/Gilroy.ttf" rel="stylesheet">
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

file-list-gen.js

@@ -19,7 +19,7 @@ html = `
 <div class="home-vh">
 	<div class="row no-gutters">
 		<div class="col-sm-3 pb-4 position-relative border-right" style="height: calc(100vh - 70px); overflow-y: scroll">
-			<h2 class="position-sticky bg-white p-4">Views</h2>
+			<h2 class="position-sticky bg-white p-4 tr">Views</h2>
 			${fileListViews}
 		</div>
 		<div class="col-sm-9 p-4">

sass/styles/applications/coding-blocks/_application.scss

@@ -3,4 +3,5 @@
   @import "heading.scss";
   @import "font.scss";
   @import "color.scss";
+  @import "landing-page.scss";
 }

sass/styles/applications/coding-blocks/_components.scss

@@ -0,0 +1 @@
+@import "components/option-div.scss";

sass/styles/applications/coding-blocks/buttons.scss

@@ -3,6 +3,8 @@
   padding: 1rem 2rem;
   color: $white;
   border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
 }
 
 .button-primary {
@@ -67,6 +69,8 @@
   color: $orange-dark-1;
   font-size: $font-sm;
   transition: color 0.25s;
+  display: inline-flex;
+  align-items: center;
 
   &:hover {
     color: $red;

sass/styles/applications/coding-blocks/components/option-div.scss

@@ -0,0 +1,44 @@
+.option-div {
+  cursor: pointer;
+  padding: 1.5rem;
+  color: $white;
+  position: relative;
+  border-radius: 5px;
+  border: 1px solid $grey-dark-2;
+  background: $grey-dark-2;
+
+  &__icon {
+    display: none;
+  }
+
+  &:hover {
+    border: solid 1px $orange;
+  }
+
+  &.selected {
+    border: solid 1px $orange;
+  }
+
+  &.selected > &__icon {
+    display: inline-block;
+  }
+
+  &--rect {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &--square > &__icon {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+  }
+
+  &--square {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

sass/styles/applications/coding-blocks/font.scss

@@ -2,4 +2,8 @@
   .#{$type} {
     font-size: $size !important;
   }
+}
+
+.extra-bold {
+  font-weight: 900 !important;
 }

sass/styles/applications/coding-blocks/landing-page.scss

@@ -0,0 +1,60 @@
+.landing-page {
+  color: $white;
+
+  .heading-font {
+    font-size: 4.142rem;
+    font-weight: $extra-bold;
+  }
+
+  .my-50 {
+    margin-top: 3.57rem;
+    margin-bottom: 3.57rem;
+  }
+
+  &__section {
+    padding: 7.142rem;
+
+    &:nth-child(2n-1) {
+      background: $grey-dark-2;
+    }
+
+    &:nth-child(2n) {
+      background: $black;
+    }
+
+    &--divided-section {
+      &__left-section,
+      &__right-section {
+        height: inherit;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      &__left-section {
+        border-right: 1px solid $grey;
+        padding-right: 3.57rem;
+      }
+
+      &__right-section {
+        padding-left: 7.142rem;
+      }
+    }
+  }
+
+  .side-tag {
+    &::after {
+      background: $orange;
+      left: calc(-3rem + 1px);
+    }
+  }
+
+  .success-story {
+    &__image {
+      height: 250px;
+      width: 250px;
+      border-radius: 50%; 
+      margin-right: 6rem;
+    }
+  }
+}

sass/styles/applications/coding-blocks/settings/colors.scss

@@ -2,10 +2,10 @@
 
 // Neutral colors
 $black: #08090c;
-$grey-dark-2: #191d24;
+$grey-dark-2: #15171e;
 $grey-dark-1: #2a2f3c;
 $grey: #3b4254;
-$grey-light-1: #cccccc;
+$grey-light-1: #d6d6d6;
 $grey-light-2: #e0e0e0;
 $grey-light-3: #f5f5f5;
 
@@ -39,7 +39,6 @@ $pink-dark-1: #bf1f68;
 $pink: #d93764;
 $pink-light-1: #f24f60;
 
-
 // PALETTE GRADIENTS
 
 $gradient-orange-dark: linear-gradient(90deg, #e74e4b, #f26a3e);
@@ -54,11 +53,9 @@ $gradient-blue-dark: linear-gradient(90deg, #1c40de, #2167e3);
 $gradient-blue: linear-gradient(90deg, #2167e3, #258ee8);
 $gradient-blue-light: linear-gradient(90deg, #258ee8, #2ab5ed);
 
-
 // BUTTON GRADIENTS
 
-$button-gradient-orange: linear-gradient(90deg, #fb8133, #ffba08, #fb8133);
-
+$button-gradient-orange: linear-gradient(90deg, #f26a3e, #fb8133, #f26a3e);
 
 $solid-color-list: (
   "black": $black,

sass/styles/applications/coding-blocks/settings/font.scss

@@ -13,22 +13,20 @@ $heading-3: 2.286rem; // 32px
 $heading-2: 2.571rem; // 36px
 $heading-1: 2.857rem; // 40px
 
-
 // Font Weights
 
 $extra-bold: 900;
 
-
 $text-size-list: (
-"font-1": $font-1,
-"font-2": $font-2,
-"font-3": $font-3,
-"font-4": $font-4,
-"font-5": $font-5,
-"heading-6": $heading-6,
-"heading-5": $heading-5,
-"heading-4": $heading-4,
-"heading-3": $heading-3,
-"heading-2": $heading-2,
-"heading-1": $heading-1,
-)
+  "font-1": $font-1,
+  "font-2": $font-2,
+  "font-3": $font-3,
+  "font-4": $font-4,
+  "font-5": $font-5,
+  "heading-6": $heading-6,
+  "heading-5": $heading-5,
+  "heading-4": $heading-4,
+  "heading-3": $heading-3,
+  "heading-2": $heading-2,
+  "heading-1": $heading-1,
+);

sass/styles/settings/settings.font.scss

@@ -5,7 +5,7 @@ $font-medium: 600;
 $regular: 400;
 $semi-bold: 600;
 $bold: 700;
-$extra-bold: 800;
+$extra-bold: 900;
 
 //Size
 $font-xs: 1rem; // 14px
@@ -24,15 +24,46 @@ $card-sm: 0.75rem; // 10px
 $card-sms: 0.625rem; // 9px
 $card-xs: 0.5rem; // 7px
 
+// @font-face {
+//   font-family: "Muli";
+//   src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli.ttf");
+// }
+
+// @font-face {
+//   font-family: "Muli";
+//   font-style: italic;
+//   src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli-Italic.ttf");
+// }
+
 @font-face {
   font-family: "Muli";
-  src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli.ttf");
+  font-style: $extra-bold;
+  src: url("/fonts/Muli-Black.ttf");
 }
 
 @font-face {
   font-family: "Muli";
   font-style: italic;
-  src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli-Italic.ttf");
+  font-style: extra-bold;
+  src: url("/fonts/Muli-BlackItalic.ttf");
+}
+
+@font-face {
+  font-family: "Muli";
+  font-style: $bold;
+  src: url("/fonts/Muli-Bold.ttf");
+}
+
+@font-face {
+  font-family: "Muli";
+  font-style: italic;
+  font-style: $bold;
+  src: url("/fonts/Muli-BoldItalic.ttf");
+}
+
+@font-face {
+  font-family: "Muli";
+  src: url("/fonts/Muli-Regular.ttf");
 }
 
 $text-size-list: (

sass/styles/utilities/font.scss

@@ -16,3 +16,26 @@
 .i {
   font-style: italic !important;
 }
+
+.stroke-font {
+  text-shadow: 1px 0 0 rgba(255, 255, 255, 0.4),
+    -1px 0 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4),
+    0 -1px 0 rgba(255, 255, 255, 0.4), 0.5px 0.5px rgba(255, 255, 255, 0.4),
+    -0.5px -0.5px 0 rgba(255, 255, 255, 0.4),
+    0.5px -0.5px 0 rgba(255, 255, 255, 0.4),
+    -0.5px 0.5px 0 rgba(255, 255, 255, 0.4);
+}
+
+.text-clamp-ellipses {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  &--2 {
+    -webkit-line-clamp: 2;
+  }
+
+  &--3 {
+    -webkit-line-clamp: 3;
+  }
+}

sass/styles/utilities/width-x-height.scss

@@ -10,3 +10,7 @@
 .wh-100 {
   @include dimensions(100%, 100%);
 }
+
+.h-inherit {
+  height: inherit;
+}