added website for framework

Author: Maxwell Cofie

.sass-cache/72974d542890d4849b2f61cfa2559f157be00cb1/colors.scssc

@@ -1,4 +1,4 @@
-![Krymoh Image](https://github.com/mcofie/krymoh/blob/master/image.png)
+![Krymoh Image](https://github.com/mcofie/krymoh/blob/master/krymoh_logo.png)
 
 # Krymoh :wink:
 Krymoh is a CSS framework that focuses on cinematic features in css that adds live to a web page AKA the CSS movie maker. This is written in [SASS](http://sass-lang.com/) therefore it is modular. The core idea here is to make this framework the go-to framework when a cinematic feel or property is required in a web page.

README.md

@@ -29,8 +29,10 @@ $yellow,$green,$ivory,$violet,$white,$navy,$orange,$black);
 @each $x in $colors{
     @each $i,$o in $x{
         .#{$i}{
-            background-color: #{$o};
             color:#{$o};
+            &-b{
+                background-color: #{$o};
+            }
         }
     }
 }

components/colors/colors.scss

@@ -0,0 +1,213 @@
+/**/
+@import "bootstrap.min.css";
+@import "font-awesome.min.css";
+
+
+/**/
+
+@font-face{
+    font-family: "santuary";
+    src: url("../fonts/SP.ttf");
+}
+
+@font-face{
+    font-family: "raleway";
+    src: url("../fonts/Raleway-Medium.ttf");
+}
+
+*{
+  font-family: "raleway";
+}
+
+
+h1{
+    font-family: "santuary";
+    font-size: 15em;
+    color: #FFF;
+}
+
+.btn-default{
+    background-color: transparent;
+    border:3px solid #FFF;
+    color:#FFF;
+}
+
+.btn-default:hover{
+    background-color: #FFF;
+    border:3px solid #FFF;
+    color:#2d5a3d;
+}
+
+#desc{
+    font-size: 1.3em;
+    color:#FFF;
+}
+
+
+main{
+    width: 100%;
+    margin-right: 15px;
+    float: left;
+    /*height: 700px;*/
+    background-image: radial-gradient( circle at top left, #e2cb24,#d6f2ff 30%);
+}
+
+.carousel-control.left,.carousel-control.right{
+    background-image: none;
+}
+
+.carousel-control{
+    opacity: 1;
+    color: #2d5a3d;
+    padding: 120px 0;
+    text-shadow: none;
+}
+
+.carousel-control:focus, .carousel-control:hover{
+    color:#CCC;
+}
+
+
+/**/
+.sky_liner{
+    width: 100%;
+    float: left;
+    padding: 10px 0;
+    position: absolute;
+    z-index: 0;
+    /*background-color: greenyellow;*/
+}
+
+#sun_light{
+    width: 170px;
+    height: 170px;
+    border-radius: 100%;
+    float: left;
+
+}
+
+.view{
+    width:100%;
+    height: 600px;
+    margin-top: 100px;
+    position: absolute;
+    z-index: 1;
+    text-align: center;
+    background-image: url("../img/view.svg");
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.btn-group-lg>.btn, .btn-lg{
+    padding: 20px 60px;
+    margin: 10px;
+    font-size: 1.7em;
+}
+
+#content_wrapper{
+    width: 100%;
+    /*height: 700px;*/
+    margin-top: 700px;
+    background-color: #4a843d;
+    float: left;
+}
+
+.components_wrapper{
+    width: 100%;
+    margin: 30px 0;
+    float:left;
+    background-color: #FFF;
+}
+
+footer{
+    width: 100%;
+    padding:150px 0;
+    float: left;
+    text-align: center;
+    background:linear-gradient( #4a843d, #2d5a3d);
+}
+
+.credit{
+    color:#FFF;
+}
+
+#ball{
+    width:120px;
+    height: 120px;
+    border-radius: 100%;
+    margin: auto;
+    /*background-color: red;*/
+}
+
+#ball > .fa{
+    font-size: 8em;
+}
+
+#object > .fa{
+    font-size: 8em;
+}
+
+#object{
+    width:120px;
+    height: 120px;
+    margin: auto;
+    cursor: pointer;
+}
+
+
+#ftr-img{
+    width:100%;
+    height:120px;
+    margin: auto;
+    text-align: center;
+    /*float: left;*/
+}
+
+
+/***/
+.slate{
+    width:100%;
+    background-color:#FFF;
+    padding: 70px 0;
+    float: left;
+}
+
+
+
+
+@keyframes sunrise{
+     from{
+          transform:translateX(500px);
+          opacity: 0;
+      }
+      to{
+          transform: translate3d(-1200px,0px,0);
+          opacity: 1;
+      }
+}
+
+@keyframes sunset{
+     from{
+          transform:translateX(0);
+          opacity: 1;
+      }
+      to{
+          transform: translate3d(1190px,160px,0);
+          opacity: 0;
+      }
+}
+
+.sun_set{
+    animation: sunset 20s linear 5s infinite alternate;
+    background-image: url("../img/sun_set.svg");
+    background-size: contain;
+}
+
+.sun_rise{
+    animation: sunrise 20s linear infinite;
+    background-image: url("../img/sun_rise.svg");
+    background-size: contain;
+}
+
+
+