First commit

css/style.css

@@ -0,0 +1,308 @@
+@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
+@import url('font-awesome.min.css');
+
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+@media screen and (max-width: 1080px) {
+    html, body {margin: 0; height: 100%; overflow: hidden}
+}
+
+
+body{
+    font-family: 'Exo', sans-serif;
+}
+
+
+.context {
+    z-index: 100;
+    width: 100%;
+    position: absolute;
+    top:40vh;
+}
+
+.context h1{
+    text-align: center;
+    color: #fff;
+    font-size: 50px;
+}
+
+@media screen and (max-width: 1080px) {
+    .context h1{
+        font-size: 70px;
+    }
+}
+
+.context p{
+    text-align: center;
+    color: #ffffffd0;
+    font-size: 25px;
+}
+@media screen and (max-width: 1080px) {
+    .context p{
+        font-size: 45px;
+    }
+}
+
+.social_button a {
+    color: #ffffff !important;
+    text-decoration: none;
+    font-size: 18px;
+}
+
+.social_button {
+    margin-top: 30px !important;
+}
+
+/* @media screen and (max-width: 1080px) {
+    .social_button {
+        margin-top: 30px !important;
+    }
+    
+} */
+
+.area{
+    /* background: #c44747;   */
+    background-image: url('../assets/background.webp');
+    /* background: -webkit-linear-gradient(to left, #e1756d, #ff0f0f);   */
+    background-size: 100% 100%;
+    width: 100%;
+    height:100vh;
+}
+
+@media screen and (max-width: 1080px) {
+    .area{
+        /* background: #c44747;   */
+        background-image: url('../assets/background_vertical.webp');
+        /* background: -webkit-linear-gradient(to left, #e1756d, #ff0f0f);   */
+
+    }
+}
+
+
+.circles{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li{
+    position: absolute;
+    display: block;
+    list-style: none;
+    /* background: rgba(255, 255, 255, 0.2); */
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+    
+}
+
+
+.circles li:nth-child(1){
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}
+
+@keyframes on_click_animate {
+    0%{
+        opacity: 1;
+
+    }
+
+    70%{
+        opacity: 0;
+    }
+
+    100%{
+        opacity: 0;
+    }
+}
+
+
+.icon_container ul {
+    display: inline;
+}
+
+/* Icon */
+
+.icon {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-transform: none !important;
+    color: #fff;
+    align-self: center;
+}
+
+
+
+
+
+
+/* Footer */
+
+#footer {		
+    bottom: 0;
+    cursor: default;
+    color: #fff;
+    left: 0;
+    line-height: 3;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (max-width: 1080px) {
+    #footer {	
+        line-height: 2;
+        font-size: 24px;
+    }
+}
+
+
+.flying {
+    z-index: 50;
+    display: block;
+    max-width: 100%;
+}
+
+@media screen and (max-width: 1080px) {
+    .flying {
+        display: none;
+    }
+}
+
+.animated_img {
+    height: 3.5%;
+    width: 3.5%;
+    -webkit-transition: all 1s ease; /* Safari and Chrome */
+    -moz-transition: all 1s ease; /* Firefox */
+    -ms-transition: all 1s ease; /* IE 9 */
+    -o-transition: all 1s ease; /* Opera */
+    transition: all 1s ease;
+}
+
+@media screen and (max-width: 1080px) {
+    .animated_img {
+        height: 13%;
+        width: 13%;
+    }
+}
+
+.animated_img:hover {
+    -webkit-transform:scale(1.25); /* Safari and Chrome */
+    -moz-transform:scale(1.25); /* Firefox */
+    -ms-transform:scale(1.25); /* IE 9 */
+    -o-transform:scale(1.25); /* Opera */
+     transform:scale(1.25);
+}
+
+.hidden {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    transition:
+      opacity 0.5s ease-out,
+      width 0.5s ease 0.5s,
+      height 0.5s ease 0.5s;
+}
+
+span.nobr { 
+    white-space: nowrap; 
+}
+