Merge branch 'master' into master
diff --git a/css/style.css b/css/style.css
index 09a636c..bfc0d08 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,95 +1,10 @@
-
-@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; }
-
-
-.vcenter {
- display: inline-block;
- vertical-align: middle;
- float: none; }
-
-.break {
- clear: both;
- margin-top: 10px; }
-
-@media (min-width: 768px) {
- .pull-right-sm {
- float: right !important; }
- .pull-left-sm {
- float: left !important; }
- .container {width: 768px}
- .navbar-right {margin-right: 0;}
- .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
-}
-@media (min-width: 992px) {
- .pull-right-md {
-@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; }
- .container {width: 768px}
- .navbar-right {margin-right: 0;}
- .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
-}
-@media (min-width: 992px) {
- .pull-right-md {
- float: right !important; }
- .pull-left-md {
- float: left !important; }
- .container {width: 94%;}
-}
-@media (min-width: 1200px) {
- .pull-right-lg {
- float: right !important; }
- .pull-left-lg {
- float: left !important; }
- .container {width: 1170px;}
- .portfolio-projects .col-lg-6 {width: 100%}
- .navbar > .container {max-width: 1170px}
-}
-@media (min-width: 1366px) {
- #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
- .navbar > .container {max-width: 1170px}
-}
-* {
- box-sizing: border-box; }
-
-html {
- /* position: relative; */
- /* height: 100%; */
- /* width: 100%; */
- }
-
img {
width: 100%; }
body {
- /* height: 100%; */
font-family: "Comfortaa", Helvetica, Arial, sans-serif;
line-height: 1.4;
background-color: #0080ff;
- /* Margin bottom by footer height */
- /* margin-bottom: 60px; */
}
h1, .h1,
@@ -112,6 +27,8 @@
a, .btn {
-webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
+ -moz-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
+ -o-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
}
@@ -158,6 +75,8 @@
padding-right: 30px;
border-radius: 0;
-webkit-transition: background-color .2s ease 0s;
+ -moz-transition: background-color .2s ease 0s;
+ -o-transition: background-color .2s ease 0s;
transition: background-color .2s ease 0s; }
.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
.navbar-brand {
@@ -176,6 +95,8 @@
border: 1px solid transparent;
border-radius: 5px;
-webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
+ -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
+ -o-transition: color .2s ease 0s, border-color .2s ease 0s;
transition: color .2s ease 0s, border-color .2s ease 0s; }
.navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
.navbar-default .navbar-nav > li > a:hover {
@@ -197,7 +118,7 @@
.navbar.solid .navbar-nav > li > a:focus {
background-color: transparent;
color: rgba(255,255,255,0.8); }
-.navbar-toggle {margin-right:0px;padding:15px;}
+.navbar-toggle {margin-right:0;padding:15px;}
.navbar-default .navbar-toggle {
border-color: #ffffff; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
@@ -225,6 +146,8 @@
.navbar-collapse.collapse.show {
background-color: #07374a;
-webkit-transition: background-color .2s ease 0s;
+ -moz-transition: background-color .2s ease 0s;
+ -o-transition: background-color .2s ease 0s;
transition: background-color .2s ease 0s;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
@@ -244,22 +167,26 @@
background-color: #07374a;
top: 0;
width: 100%;
- margin: 0px 0%;
- box-shadow: 0 7px 8px 0px rgba(0,0,0,0.3);
- -webkit-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s;
- -webkit-transition: box-shadow .2s ease 0s;
- transition: box-shadow .2s ease 0s;
+ margin: 0;
+ box-shadow: 0 7px 8px 0 rgba(0,0,0,0.3);
+ -webkit-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
+ -moz-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
+ -o-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
+ transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
}
.navbar.solid .navbar-brand {
opacity: 1;
display: inline-block;
color: #ffffff;
-webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
+ -moz-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
+ -o-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
.navbar.solid .navbar-nav > li > a {
color: #ffffff;
-webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
+ -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
+ -o-transition: color .2s ease 0s, border-color .2s ease 0s;
transition: color .2s ease 0s, border-color .2s ease 0s; }
.cover {
@@ -294,7 +221,7 @@
padding-top: 1.5625em; } }
@media screen and (min-width: 1200px) {
.headline {
- padding-top: 0px; } }
+ padding-top: 0; } }
#about {
background-color: #07374a; }
@@ -316,7 +243,7 @@
.about-tools {
padding-top: 5.625em; } }
.about-tools ul:first-child {
- padding-left: 0px; }
+ padding-left: 0; }
.about-tools ul {
color: #0080ff;
list-style: none; }
@@ -350,21 +277,72 @@
.portfolio-projects--btn:active {
background: #052a38;
color: #ffffff; }
+@media (max-width:650px) {
+ .portfolio-projects--btn {font-size:16px;}
+}
.portfolio-projects--image {
margin-bottom: 1.875em;
padding-top: 5%; }
-@media screen and (min-width: 360px) {
+.about-tools ul li, .contact-social-icons ul a li {
+ text-align: center; }
+
+.centered {
+ float: none;
+ margin-left: auto;
+ margin-right: auto; }
+
+
+.vcenter {
+ display: inline-block;
+ vertical-align: middle;
+ float: none; }
+
+.break {
+ clear: both;
+ margin-top: 10px; }
+
+@media (min-width: 360px) {
#team > .container .row > div {width: 100%;margin: 0;}
}
-@media screen and (min-width: 768px) {
+@media (min-width: 768px) {
+ .pull-right-sm {
+ float: right !important; }
+ .pull-left-sm {
+ float: left !important; }
+ .container {width: 768px}
+ .navbar-right {margin-right: 0;}
+ .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
+}
+@media (min-width: 992px) {
+ .pull-right-md {
+ float: right !important; }
+ .pull-left-md {
+ float: left !important; }
+ .container {width: 94%;}
+}
+@media (min-width: 1200px) {
+ .pull-right-lg {
+ float: right !important; }
+ .pull-left-lg {
+ float: left !important; }
+ .container {width: 1170px;}
+ .portfolio-projects .col-lg-6 {width: 100%}
+ .navbar > .container {max-width: 1170px}
+}
+@media (min-width: 1366px) {
+ #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
+ .navbar > .container {max-width: 1170px}
+}
+
+@media (min-width: 768px) {
.portfolio-projects {
margin-top: 0.625em; } }
.portfolio-projects--title {
margin-top: 0.9375em;
font-size: 20px; }
- @media screen and (min-width: 768px) {
+@media (min-width: 768px) {
.portfolio-projects--title {
margin-top: 0;
font-size: 21px; }
@@ -464,7 +442,7 @@
color: #0080ff;
}
#scrollIcon, #scrollTopIcon {
- margin-top: 200px;
+ margin-top: 10vh;
padding: 10px;
font-size: 1.5em;
color: #07374a;
@@ -532,7 +510,7 @@
margin:0 auto;
}
#team > .container .row > div {
- min-height: 0px;
+ min-height: 0;
padding-left: 0;
padding-right: 0;
/* display: flex; */
@@ -540,7 +518,7 @@
/* justify-content: flex-start; */
}
@media (min-width: 768px) {
- #team > .container .row > div {min-height: 0px;}
+ #team > .container .row > div {min-height: 0;}
#team .col-sm-4 {
width: 100%;
margin: 0;
@@ -553,10 +531,10 @@
}
}
@media (min-width: 1200px) {
- #team > .container .row > div {min-height: 0px;}
+ #team > .container .row > div {min-height: 0;}
}
@media (max-width: 700px) {
- #team > .container .row > div {min-height: 0px;}
+ #team > .container .row > div {min-height: 0;}
#team .col-xs-6 {width: 42%;margin:4%;}
}
@media (max-width: 500px) {
@@ -608,27 +586,45 @@
color: #ffffff; }
@media (max-height: 880px) {
- #scrollIcon, #scrollTopIcon {margin-top: 15vh}
+ #scrollIcon, #scrollTopIcon {margin-top: 8vh}
}
@media (max-height: 800px) {
- #scrollIcon, #scrollTopIcon {margin-top: 10vh}
+ #scrollIcon, #scrollTopIcon {margin-top: 6vh}
.cover.top {padding: 7.5vh 0 12.5vh 0;}
}
@media (max-height: 750px) {
- #scrollIcon, #scrollTopIcon {margin-top: 8vh}
+ #scrollIcon, #scrollTopIcon {margin-top: 4vh;}
}
@media (max-height: 720px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 5vh 0 10vh 0;}
+ #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
+}
+@media (max-height: 690px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
+ .animation {margin-top:-6vh !important;}
+}
+@media (max-height: 670px) {
+ #scrollIcon, #scrollTopIcon {margin-top: -1vh;}
+ .animation {margin-top:-7vh !important;}
}
@media (max-height: 650px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 2.5vh 0 5vh 0;}
+ #scrollIcon, #scrollTopIcon {margin-top: -3vh}
+ .animation {margin-top:-8vh !important;}
+ .cover.top {padding: 6vh 0 5vh 0;}
body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
}
+@media (max-height: 630px) {
+ #scrollIcon, #scrollTopIcon {margin-top: -6vh}
+ .animation {margin-top:-10vh !important;}
+ .cover.top {padding: 6vh 0 5vh 0;}
+}
+@media (max-height: 600px) {
+ #scrollIcon, #scrollTopIcon {margin-top: -9vh}
+ .animation {margin-top:-13vh !important;}
+ .cover.top {padding: 6vh 0 5vh 0;}
+}
@media (max-height: 550px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 1.5vh 0 3vh 0;}
+ #scrollIcon, #scrollTopIcon {display:none}
+ .cover.top {padding: 6vh 0 3vh 0;}
.headline {padding-top:3vh;}
body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
}
@@ -658,11 +654,12 @@
.h4, h4 {font-size: 20px}
#portfolio h2 {padding-bottom: 0}
#portfolio > .container {padding-right: 0;padding-left: 0}
- .portfolio-projects--btn {margin-top:1.25em;margin-left: auto;margin-right: auto}
+ .portfolio-projects--btn {margin-top:1.25em;margin-left: 4px;margin-right: 4px}
#portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
#portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
- #scrollIcon, #scrollTopIcon {font-size: 1em}
+ #scrollIcon, #scrollTopIcon {font-size: 1em;display: none}
}
+@media (max-width:480px) {.row.cover.top .lead {max-width:180px}}
@media (max-device-height: 480px) and (orientation: landscape) {
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 240px;
@@ -680,13 +677,6 @@
}
}
-/* --- Mock-up Setting --- */
-/* Paste link to your image 310x550px */
-/* Screen Setting */
-/* --- --- */
-/* --- Animation Setting --- */
-/* --- --- */
-
h1 {
color: #fff;
cursor: default;
@@ -719,10 +709,14 @@
margin-top:15%;
margin-bottom:25%;
margin-left: 35%;
- margin-right: auto
+ margin-right: auto;
-webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
+ -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
+ -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
-webkit-transition: all 600ms;
+ -moz-transition: all 600ms;
+ -o-transition: all 600ms;
transition: all 600ms;
}
@@ -734,8 +728,10 @@
margin-top:30%;
margin-bottom:25%;
margin-left: 45%;
- margin-right: auto
+ margin-right: auto;
-webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
+ -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
+ -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
}
@@ -749,8 +745,12 @@
right: 0;
margin: auto;
-webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateX(-80%);
+ -moz-transform: translateX(-80%);
+ -o-transform: translateX(-80%);
transform: translateX(-80%);
border-radius: 2.0em;
}
@@ -771,12 +771,10 @@
background-size: 12.3em 23.36em;
border-radius: 2.0em;
box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
+ -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
+ -moz-transition: transform 600ms, box-shadow 450ms;
+ -o-transition: transform 600ms, box-shadow 450ms;
+ transition: transform 600ms, box-shadow 450ms;
}
.just-phone-front {
@@ -800,23 +798,21 @@
border-radius: 2.0em;
box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(0.90);
+ -moz-transform: scale(0.90);
+ -o-transform: scale(0.90);
transform: scale(0.90);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
+ -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
+ -moz-transition: transform 600ms, box-shadow 450ms;
+ -o-transition: transform 600ms, box-shadow 450ms;
+ transition: transform 600ms, box-shadow 450ms;
}
.phone-front-hover {
box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
+ -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
+ -moz-transition: transform 600ms, box-shadow 450ms;
+ -o-transition: transform 600ms, box-shadow 450ms;
+ transition: transform 600ms, box-shadow 450ms;
}
.phone-screen {
@@ -838,9 +834,11 @@
box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
background-image: url("../images/bliss_screens.gif");
background-repeat: no-repeat;
- background-position: 50% 0px;
+ background-position: 50% 0;
background-size: cover;
-webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ -o-transform: scale(1);
transform: scale(1);
}
.phone-screen::after {
@@ -866,29 +864,42 @@
background-position: 2.2em .5em;
background-size: 13.33em 24.73em;
-webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+ -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+ -o-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
-webkit-transition: all 350ms;
+ -moz-transition: all 350ms;
+ -o-transition: all 350ms;
transition: all 350ms;
}
.phone-side-hover {
-webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+ -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+ -o-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
-webkit-transition: all 350ms;
- transition: all 350ms;
+ -moz-transition: all 350ms;
+ -o-transition: all 350ms;
}
@-webkit-keyframes figure-anim {
from {
border-radius: 50%;
-webkit-transform: rotate(0deg) scale(1);
+ -moz-transform: rotate(0deg) scale(1);
+ -o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
to {
border-radius: 30%;
-webkit-transform: rotate(360deg) scale(0.5);
+ -moz-transform: rotate(360deg) scale(0.5);
+ -o-transform: rotate(360deg) scale(0.5);
transform: rotate(360deg) scale(0.5);
}
}
@@ -897,46 +908,55 @@
from {
border-radius: 50%;
-webkit-transform: rotate(0deg) scale(1);
+ -moz-transform: rotate(0deg) scale(1);
+ -o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
to {
border-radius: 30%;
-webkit-transform: rotate(360deg) scale(0.5);
+ -moz-transform: rotate(360deg) scale(0.5);
+ -o-transform: rotate(360deg) scale(0.5);
transform: rotate(360deg) scale(0.5);
}
}
@-webkit-keyframes figure-container-anim {
from {
-webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes figure-container-anim {
from {
-webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
- float: right !important; }
- .pull-left-md {
- float: left !important; }
- .container {width: 94%;}
-}
@media (min-width: 1200px) {
.pull-right-lg {
float: right !important; }
.pull-left-lg {
float: left !important; }
- .container {width: 1170px;}
+ .pull-left-md {
+ float: left !important; }
+ .container {max-width: 1170px;}
.portfolio-projects .col-lg-6 {width: 100%}
.navbar > .container {max-width: 1170px}
}
@@ -944,871 +964,6 @@
#portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
.navbar > .container {max-width: 1170px}
}
-* {
- box-sizing: border-box; }
-
-html {
- /* position: relative; */
- /* height: 100%; */
- /* width: 100%; */
- }
-
-img {
- width: 100%; }
-
-body {
- /* height: 100%; */
- font-family: "Comfortaa", Helvetica, Arial, sans-serif;
- line-height: 1.4;
- background-color: #0080ff;
- /* Margin bottom by footer height */
- /* margin-bottom: 60px; */
- }
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
- font-family: "Comfortaa", Helvetica, Arial, sans-serif;
- line-height: 1.4;
- color: #07374a; }
-h1, .h1 {font-size: 64px;}
-h2, .h2 {font-size: 42px;}
-h4, .h4 {font-weight: bolder;}
-
-p {
- font-family: "Comfortaa", sans-serif;
- color: #ffffff;
- margin: 0 0 30px; }
-
-a, .btn {
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
-}
-
-a:hover, a:focus, a:active {text-decoration: none;}
-
-body > .container-fluid {
- padding: 0; }
-
-#portfolio > .container {
- padding-left: 30px;
- padding-right: 30px;
-}
-#portfolio > div > div > div {padding-right: 0;padding-left: 0}
-
-.row,
-.container-fluid>.navbar-collapse,
-.container-fluid>.navbar-header,
-.container>.navbar-collapse,
-.container>.navbar-header {
- margin:auto;
-}
-
-.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;
- padding-left: 30px;
- padding-right: 30px;
- border-radius: 0;
- -webkit-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s; }
-.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
-.navbar-brand {
- opacity: 0;
- margin-top: 5px;
- padding: 15px 0;
- color: #ffffff;
- font-weight: 400; }
-
-.navbar-default .navbar-nav > li > a {
- color: #ffffff;
- font-weight: 500;
- font-size: 1em;
- text-transform: lowercase;
- margin: 3px 5px;
- border: 1px solid transparent;
- border-radius: 5px;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s; }
- .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
-.navbar-default .navbar-nav > li > a:hover {
- color: #ffffff;
- border: 1px solid #ffffff; }
-.navbar-default .navbar-nav > li > a:active,
-.navbar-default .navbar-nav > li > a:focus,
-.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
- color: rgba(255,255,255,0.8);
- border: 1px solid rgba(255,255,255,0.8); }
-.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 {
- background-color: transparent;
- color: #ffffff; }
-.navbar-default .navbar-nav > .active > a:focus,
-.navbar.solid .navbar-nav > li > a:active,
-.navbar.solid .navbar-nav > li > a:focus {
- background-color: transparent;
- color: rgba(255,255,255,0.8); }
-.navbar-toggle {margin-right:0px;padding:15px;}
-.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;
-}
-.navbar-collapse.collapsing {
- background-color: #07374a;
-}
-.navbar-default .navbar-toggle .icon-bar {
- color: #ffffff;
- background-color: #ffffff; }
-.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #07374a;
-}
-.navbar-collapse.collapse.collapsing {
- background-color: #07374a;
-}
-
-.navbar-collapse.collapse.show {
- background-color: #07374a;
- -webkit-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s;
- -webkit-border-bottom-left-radius: 4px;
- -webkit-border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-
-.navbar-collapse .navbar-nav > li > a,
-.navbar-collapse .navbar-nav > li > a:hover,
-.navbar-collapse .navbar-nav > li > a:focus,
-.navbar-collapse .navbar-nav > li > a:active {
- border-color: transparent !important;
-}
-
-/* Solid class attached on scroll past first section */
-.navbar.solid {
- background-color: #07374a;
- top: 0;
- width: 100%;
- margin: 0px 0%;
- box-shadow: 0 7px 8px 0px rgba(0,0,0,0.3);
- -webkit-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s;
- -webkit-transition: box-shadow .2s ease 0s;
- transition: box-shadow .2s ease 0s;
- }
- .navbar.solid .navbar-brand {
- opacity: 1;
- display: inline-block;
- color: #ffffff;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
- .navbar.solid .navbar-nav > li > a {
- color: #ffffff;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s; }
-
-.cover {
- padding: 6% 0 8% 0; }
- .cover.top {
- padding: 10vh 0 15vh 0;
- height: 100vh;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- background-color: #0080ff; }
- .cover.bottom {
- padding: 6% 0 5.5% 0; }
- body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
- @media (max-width: 550px) {
- .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
-
-.headline {
- padding-top: 6.25em; }
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
- max-width: 1600px;
- width: 100%;
- margin: 0 auto;
- padding-right: 30px;
- padding-left: 30px;
- display: block; }
- @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; }
- #about > div > div.row.break > div > p {margin-bottom: 15px}
-
-.profile-img {
- margin-bottom: 15px;
- width: 120px; }
-
-.about, .about-info, .about-tools, .about-last {
- padding: 4% 30px 1% 30px;
- font-size: 18px; }
- .about-tools {
- padding-top: 4.375em;
- font-size: 18px; }
- @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-projects--btn {
- background: transparent;
- color: #07374a;
- border: 1px solid #07374a;
- border-radius: 5px;
- margin-bottom: 1.25em;
- font-size: 18px;
- margin: 0 8px; }
- .portfolio-projects--btn:hover {
- background: #07374a;
- color: #ffffff; }
- .portfolio-projects--btn:focus,
- .portfolio-projects--btn:active {
- background: #052a38;
- color: #ffffff; }
-
-.portfolio-projects--btn-sm {
- background: transparent;
- color: #07374a;
- border: 1px solid #07374a;
- border-radius: 5px;
- margin-bottom: 1.25em;
- font-size: 12px;
- margin: 0 8px; }
- .portfolio-projects--btn-sm:hover {
- background: #07374a;
- color: #ffffff; }
- .portfolio-projects--btn-sm:focus,
- .portfolio-projects--btn-sm:active {
- background: #052a38;
- color: #ffffff; }
-
-.portfolio-projects--image {
- margin-bottom: 1.875em;
- padding-top: 5%; }
-
-@media screen and (min-width: 360px) {
- #team > .container .row > div {width: 100%;margin: 0;}
-}
-
-@media screen and (min-width: 768px) {
- .portfolio-projects {
- margin-top: 0.625em; } }
-.portfolio-projects--title {
- margin-top: 0.9375em;
- font-size: 20px; }
- @media screen and (min-width: 768px) {
- .portfolio-projects--title {
- margin-top: 0;
- font-size: 21px; }
- .portfolio-projects--desc {
- margin-top: 30px;
- margin-bottom: 30px;
- font-size: 16px; }
- .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
- #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
- #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
- @media screen and (min-width: 992px) {
- .portfolio-projects--title {
- margin-top: 15%;
- font-size: 30px; }
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
- @media screen and (min-width: 1080px) {
- .portfolio-projects--title {
- margin-top: 24%;
- font-size: 21px; }
- }
- @media screen and (min-width: 1200px) {
- .portfolio-projects--title {
- margin-top: 24%;
- font-size: 24px; }
- .portfolio-projects--desc {
- margin-top: 30px;
- margin-bottom: 30px;
- font-size: 18px; }
- .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
- .portfolio-projects--btn {font-size: 18px;} }
- @media screen and (min-width: 1366px) {
- .portfolio-projects--title {margin-top:28%;}
- }
- @media (min-width: 1500px) {
- .portfolio-projects--title {font-size: 28px;margin-top:31%;}
- .portfolio-projects--btn {font-size: 21px}
- }
-
-#contact {
- background-color: #07374a;
- padding-left: 15px;
- padding-right: 15px }
- #contact h2 {
- color: #0080ff; }
-
-.contact-social-icons p {
- color: #0080ff; }
-.contact-social-icons > ul {padding:0;margin:0 auto;}
-.contact-social-icons ul a {
- color: #0080ff;
- list-style: none; }
- .contact-social-icons ul a:hover,
- .team-links-list a:hover,
- .family-links-list a:hover {
- color: #ffffff; }
- .contact-social-icons ul a:focus,
- .contact-social-icons ul a:active,
- .team-links-list a:focus,
- .team-links-list a:active,
- .family-links-list a:focus,
- .family-links-list a:active {
- color: rgba(255,255,255,0.8); }
- .contact-social-icons ul a li {
- display: inline-block;
- padding: 1.25%;
- font-size: 16px }
- @media (max-width: 1200px) {
- #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
- #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
- }
- @media (max-width: 720px) {
- #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
- }
-
-.footer {
- padding-top: 1em;
- bottom: 0;
- width: 100%;
- /* Set the fixed height of the footer here */
- background-color: #052a38;
-
- color: #ffffff; }
-.footer-role, .footer-name, .footer-description {
- color: #FFFFFF;
-}
-.footer-description {
- color: #fff;
- font-size: 18px;
-}
-.footer-role h4, .footer-links-list a {
- color: #0080ff;
-}
-.footer-header h4 {
- color: #0080ff;
-}
-#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; }
-
-/* our team section */
-#team, #family {
- background-color: #0080ff;
- /*font-weight: 700;
- font-size: 21px; */
-}
-.hr.invisible_hr {
- height: 0;
- padding: 0;
-}
-.hr.big_size_hr {
- margin: 30px 0;
-}
-.hr {
- clear: both;
- display: block;
- font-size: 0;
- height: 24px;
- margin: 20px 0;
- overflow: hidden;
- padding: 2px 0;
- position: relative;
- text-align: center;
- width: 100%;
-}
-.highlight_secondary {
- color: #FFFFFF;
-}
-.team-role, .team-name, .team-links-list a {
- color: #07374a;
- text-align: center;
- white-space: normal;
- width: 100%;
-}
-.team-name, .family-name {
- font-size: 21px;
- text-align: center;
- white-space: nowrap;
-}
-.team-links, .family-links {
- padding-top: .75em;
- color: #07374a;
- text-align: center;
-}
-.team-image img, .family-image img {
- max-width:150px;
- max-height: 150px;
- margin:0 auto;
-}
-#team > .container .row > div {
- min-height: 0px;
- padding-left: 0;
- padding-right: 0;
- /* display: flex; */
- /* flex-wrap: wrap; */
- /* justify-content: flex-start; */
-}
- @media (min-width: 768px) {
- #team > .container .row > div {min-height: 0px;}
- #team .col-sm-4 {
- width: 100%;
- margin: 0;
- }
- }
- @media (min-width: 992px) {
- #team .col-md-2 {
- width: 100%;
- margin: 0;
- }
- }
- @media (min-width: 1200px) {
- #team > .container .row > div {min-height: 0px;}
- }
- @media (max-width: 700px) {
- #team > .container .row > div {min-height: 0px;}
- #team .col-xs-6 {width: 42%;margin:4%;}
- }
- @media (max-width: 500px) {
- #team > .container .row > div {min-height: 250px;}
- #team .col-xs-6 {width: 92%;margin:4%;}
- }
-#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
-
-/* Bliss family section */
-#family {
- background-color: #07374a;
-}
-#family > div > div.row > div {font-size: 18px}
-.family-role, .family-name, .family-description {
- color: #FFFFFF;
-}
-.family-description {
- color: #fff;
- font-size: 18px;
-}
-.family-role h4, .family-links-list a {
- color: #0080ff;
-}
-.family-header h2 {
- color: #0080ff;
-}
-#family .about-tools {
- font-size: 20px;
-}
-.family-image img {
- max-width:150px;
- max-height: 150px;
- margin:0 auto;
-}
-.family-projects--btn {
- background: transparent;
- color: #0080ff;
- border: 1px solid #0080ff;
- border-radius: 5px;
- margin-bottom: 1.25em;
- font-weight: 700;
- font-size: 21px; }
- .family-projects--btn:hover {
- background: #0080ff;
- color: #ffffff; }
- .family-projects--btn:focus,
- .family-projects--btn:active {
- background: #0080ff;
- color: #ffffff; }
-
-@media (max-height: 880px) {
- #scrollIcon, #scrollTopIcon {margin-top: 15vh}
-}
-@media (max-height: 800px) {
- #scrollIcon, #scrollTopIcon {margin-top: 10vh}
- .cover.top {padding: 7.5vh 0 12.5vh 0;}
-}
-@media (max-height: 750px) {
- #scrollIcon, #scrollTopIcon {margin-top: 8vh}
-}
-@media (max-height: 720px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 5vh 0 10vh 0;}
-}
-@media (max-height: 650px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 2.5vh 0 5vh 0;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
-}
-@media (max-height: 550px) {
- #scrollIcon, #scrollTopIcon {margin-top: 5vh}
- .cover.top {padding: 1.5vh 0 3vh 0;}
- .headline {padding-top:3vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
-}
-@media (max-height: 480px) {
- #scrollIcon, #scrollTopIcon {margin-top: 0}
- .cover.top {padding: 3vh 0 3vh 0;}
- .headline {padding-top:1.5vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
-}
-@media (max-height: 320px) {
- .cover.top {padding: 1vh 0 3vh 0;}
- .headline {padding-top:1vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
-}
-@media (max-width: 768px) {
- .container-fluid {padding:30px 0 !important;}
- .h1, .h2, .h3, h1, h2, h3 {
- margin-top: 10px;
- margin-bottom: 10px;
- }
- .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
- .row.cover.top .lead {
- max-width: 350px;
- margin-left:auto;
- margin-right: auto
- }
- .h4, h4 {font-size: 20px}
- #portfolio h2 {padding-bottom: 0}
- #portfolio > .container {padding-right: 0;padding-left: 0}
- .portfolio-projects--btn {margin-top:1.25em;margin-left: auto;margin-right: auto}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
- #scrollIcon, #scrollTopIcon {font-size: 1em}
-}
-@media (max-device-height: 480px) and (orientation: landscape) {
- .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
- max-height: 240px;
- }
- .navbar-nav>li>a {
- padding-top: 6px;
- padding-bottom: 6px;
- }
-}
-@media (max-width: 360px) {
- .h1, h1 {font-size: 32px;}
- .cover, .cover.bottom {
- padding-left: 15px;
- padding-right: 15px;
- }
-}
-
-/* --- Mock-up Setting --- */
-/* Paste link to your image 310x550px */
-/* Screen Setting */
-/* --- --- */
-/* --- Animation Setting --- */
-/* --- --- */
-
-h1 {
- color: #fff;
- cursor: default;
-}
-
-h1 span:nth-of-type(1) {
- font-size: 1em;
- line-height: 0.5em;
-}
-h1 span:nth-of-type(2) {
- font-size: .4em;
- font-weight: 400;
- line-height: 3.65em;
- color: #0080ff;
- background-color: #282828;
- padding: 3px 10px;
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
-}
-h1 span:nth-of-type(3) {
- font-size: 1.5em;
- line-height: .85em;
-}
-
-.space {
- will-change: transform;
- position: relative;
- left:-25;
- top:auto;
- bottom:auto;
- margin-top:15%;
- margin-bottom:25%;
- margin-left: 35%;
- margin-right: auto
- -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- -webkit-transition: all 600ms;
- transition: all 600ms;
-}
-
-.space-hover {
- position: relative;
- left:-25;
- top:auto;
- bottom:auto;
- margin-top:30%;
- margin-bottom:25%;
- margin-left: 45%;
- margin-right: auto
- -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
- transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
-}
-
-.phone-container {
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: translateX(-80%);
- transform: translateX(-80%);
- border-radius: 2.0em;
-}
-
-.phone-front {
- will-change: transform;
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- background-image: url("../images/phone_front.svg");
- background-repeat: no-repeat;
- background-position: -.53em 0;
- background-size: 12.3em 23.36em;
- border-radius: 2.0em;
- box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
-}
-
-.just-phone-front {
- will-change: transform;
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- right: 0;
- margin: auto;
- left:-25;
- top:0;
- bottom:auto;
- margin-top:10%;
- margin-bottom:15%;
- margin-left: 35%;
- margin-right: auto;
- background-image: url("../images/phone_front.svg");
- background-repeat: no-repeat;
- background-position: -.53em 0;
- background-size: 12.3em 23.36em;
- border-radius: 2.0em;
- box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
- -webkit-transform: scale(0.90);
- transform: scale(0.90);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
-}
-
-.phone-front-hover {
- box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms;
- transition: -webkit-transform 600ms;
- transition: transform 600ms;
- transition: transform 600ms, -webkit-transform 600ms;
- -webkit-transition: box-shadow 450ms;
- transition: box-shadow 450ms;
-}
-
-.phone-screen {
- width: 10.5em;
- height: 19.3em;
- position: relative;
- left: 0;
- right: 0;
- top: 2.283em;
- margin: auto;
- background-color: #000;
- overflow: hidden;
-}
-.phone-screen::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
- background-image: url("../images/bliss_screens.gif");
- background-repeat: no-repeat;
- background-position: 50% 0px;
- background-size: cover;
- -webkit-transform: scale(1);
- transform: scale(1);
-}
-.phone-screen::after {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: rgba(250, 250, 250, 0.1);
-}
-
-.phone-side {
- will-change: transform;
- width: 13.33em;
- height: 25em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- border-radius: 1.66em;
- background-repeat: no-repeat;
- background-position: 2.2em .5em;
- background-size: 13.33em 24.73em;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- -webkit-transition: all 350ms;
- transition: all 350ms;
-}
-
-.phone-side-hover {
- -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- -webkit-transition: all 350ms;
- transition: all 350ms;
-}
-
-@-webkit-keyframes figure-anim {
- from {
- border-radius: 50%;
- -webkit-transform: rotate(0deg) scale(1);
- transform: rotate(0deg) scale(1);
- }
- to {
- border-radius: 30%;
- -webkit-transform: rotate(360deg) scale(0.5);
- transform: rotate(360deg) scale(0.5);
- }
-}
-
-@keyframes figure-anim {
- from {
- border-radius: 50%;
- -webkit-transform: rotate(0deg) scale(1);
- transform: rotate(0deg) scale(1);
- }
- to {
- border-radius: 30%;
- -webkit-transform: rotate(360deg) scale(0.5);
- transform: rotate(360deg) scale(0.5);
- }
-}
-@-webkit-keyframes figure-container-anim {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes figure-container-anim {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
/* The alert message box */
.alert {
@@ -1844,14 +999,42 @@
transform: translate(-50%, -50%);
}
+/* Anim
+width: 378px;
+ height: 290px;
+ */
.animation {
display: inline-block;
position: relative;
- width: 378px;
- height: 290px;
- margin: 0 auto;
+ width: 64rem;
+ height: 42rem;
+ margin: -2vh auto 0 auto;
vertical-align: middle;
}
+@media (max-width:720px) {
+ .animation {margin-left:-30rem;margin-right:-30rem;}
+}
+@media (max-width:450px) {
+ .animation {width:58rem;height:38rem;}
+}
+@media (max-width:450px) {
+ .animation {width:58rem;height:38rem;}
+}
+@media (max-width:400px) {
+ .animation {width:55rem;height:36rem;}
+}
+@media (max-width:380px) {
+ .animation {width:50rem;height:33rem;}
+}
+@media (max-width:340px) {
+ .animation {width:47rem;height:31rem;}
+}
+@media (max-width:320px) {
+ .animation {width:42rem;height:28rem;}
+}
+@media (max-height:650px) {
+ .animation {margin-top: -15vh !important;margin-bottom: 10vh !important;}
+}
.animation .device {
position: absolute;
width: 100%;
@@ -1952,25 +1135,56 @@
left: 0;
top: 50%;
margin-top: -14px;
- font-size: 1.1em;
+ font-size: 20px;
text-align: center;
- color: #fff;
+ /* color: #0080ff;*/
}
+@media (max-width:450px) {
+ .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
+}
+ .animation .device .display .slide1 div {margin-top:0px;}
.animation .device .display div div em {
font-weight: bold;
}
.animation .device .display .slide1 {
- background: #34495e;
+ background: #000;
+ background: url("../images/bliss-desktop.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f,
+ 2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f,
+ 3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f,
+ 4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f;
+ color:white;
}
.animation .device .display .slide2 {
- background: #6b15a0;
+ background: #000;
+ background: url("../images/bliss-tablet.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff,
+ 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff,
+ 3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff,
+ 4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff;
+ color:#0080ff;
}
.animation .device .display .slide3 {
- background: #1c8918;
+ background: #000;
+ background: url("../images/bliss-phone.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
+ 2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
+ 3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000,
+ 4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000;
+ color:white;
}
.animation[data-animation-step="1"] .device {
- width: 70%;
- height: 70%;
+ width: 87%;
+ height: 90%;
padding: 10px;
border-radius: 4px;
}
@@ -1982,9 +1196,9 @@
top: 100%;
}
.animation[data-animation-step="2"] .device {
- width: 45%;
- height: 82%;
- padding: 24px;
+ width: 74%;
+ height: 75%;
+ padding: 16px;
border-radius: 10px;
}
.animation[data-animation-step="2"] .device .slide1 {
@@ -1997,9 +1211,9 @@
opacity: 1;
}
.animation[data-animation-step="3"] .device {
- width: 60%;
- height: 42%;
- padding: 10px 36px;
+ width: 27%;
+ height: 75%;
+ padding: 16px 8px;
border-radius: 6px;
}
.animation[data-animation-step="3"] .device .slide1,
@@ -2012,3 +1226,50 @@
.animation[data-animation-step="3"] .device .phone-home-button {
opacity: 1;
}
+ @media (max-height:720px) {
+ .animation[data-animation-step="1"] .device {width:72%; height:75%;}
+ .animation[data-animation-step="2"] .device {width:59%; height:60%;}
+ .animation[data-animation-step="3"] .device {width:22%; height:60%;}
+ .animation .device .display div div {font-size:16px;}
+ }
+ @media (max-height:650px) {
+ .animation[data-animation-step="1"] .device {width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {width:54%; height:55%;}
+ .animation[data-animation-step="3"] .device {width:22%; height:60%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:560px) {
+ .animation[data-animation-step="1"] .device {margin-top:0%;width:72%; height:75%;}
+ .animation[data-animation-step="2"] .device {margin-top:0%;width:65%; height:66%;}
+ .animation[data-animation-step="3"] .device {margin-top:0%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:520px) {
+ .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
+ .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
+ .animation[data-animation-step="3"] .device {margin-top:0%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:460px) {
+ .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
+ .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
+ .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:70%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:350px) {
+ .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
+ .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:320px) {
+ .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
+ .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+
+/* More media queries */
+@media (max-width: 430px) {
+ h2, .h2 {font-size: 30px;}
+}
\ No newline at end of file
diff --git a/images/bliss-desktop.jpg b/images/bliss-desktop.jpg
new file mode 100644
index 0000000..a0c920d
--- /dev/null
+++ b/images/bliss-desktop.jpg
Binary files differ
diff --git a/images/bliss-phone.jpg b/images/bliss-phone.jpg
new file mode 100644
index 0000000..1bdfbe7
--- /dev/null
+++ b/images/bliss-phone.jpg
Binary files differ
diff --git a/images/bliss-tablet.jpg b/images/bliss-tablet.jpg
new file mode 100644
index 0000000..b10c90e
--- /dev/null
+++ b/images/bliss-tablet.jpg
Binary files differ
diff --git a/images/bliss_lineup2-15transparent.png b/images/bliss_lineup2-15transparent.png
new file mode 100644
index 0000000..e528af2
--- /dev/null
+++ b/images/bliss_lineup2-15transparent.png
Binary files differ
diff --git a/images/bliss_lineup2-20transparent.png b/images/bliss_lineup2-20transparent.png
new file mode 100644
index 0000000..d57fd92
--- /dev/null
+++ b/images/bliss_lineup2-20transparent.png
Binary files differ
diff --git a/images/bliss_lineup2.png b/images/bliss_lineup2.png
new file mode 100644
index 0000000..a0c7c0f
--- /dev/null
+++ b/images/bliss_lineup2.png
Binary files differ
diff --git a/images/bliss_lineup2.psd b/images/bliss_lineup2.psd
new file mode 100644
index 0000000..cddb9c7
--- /dev/null
+++ b/images/bliss_lineup2.psd
Binary files differ
diff --git a/images/bliss_surface2.png b/images/bliss_surface2.png
new file mode 100644
index 0000000..78ca5a0
--- /dev/null
+++ b/images/bliss_surface2.png
Binary files differ
diff --git a/img/cd-icon-arrow.svg b/img/cd-icon-arrow.svg
index d9148b6..446df79 100644
--- a/img/cd-icon-arrow.svg
+++ b/img/cd-icon-arrow.svg
@@ -1,12 +1,12 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#BBBBBB;}
-</style>
-<g>
- <polygon class="st0" points="0.9,5.5 3.1,3.4 8,8.3 12.9,3.4 15.1,5.5 8,12.6 "/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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"
+ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#BBBBBB;}
+</style>
+<g>
+ <polygon class="st0" points="0.9,5.5 3.1,3.4 8,8.3 12.9,3.4 15.1,5.5 8,12.6 "/>
+</g>
+</svg>
diff --git a/img/cd-icon-check.svg b/img/cd-icon-check.svg
index 358aae8..2bcd4d2 100644
--- a/img/cd-icon-check.svg
+++ b/img/cd-icon-check.svg
@@ -1,10 +1,10 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
-</style>
-<polyline class="st0" points="4,7 7,10 12,5 "/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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"
+ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<polyline class="st0" points="4,7 7,10 12,5 "/>
+</svg>
diff --git a/img/cd-icon-filter.svg b/img/cd-icon-filter.svg
index d4c5e73..9b382b3 100644
--- a/img/cd-icon-filter.svg
+++ b/img/cd-icon-filter.svg
@@ -1,15 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
- width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#8F83B8;}
-</style>
-<g>
- <rect x="10" y="3" class="st0" width="6" height="2"/>
- <polygon class="st0" points="3,7 9,7 9,1 3,1 3,3 0,3 0,5 3,5 "/>
- <rect y="11" class="st0" width="6" height="2"/>
- <polygon class="st0" points="13,9 7,9 7,15 13,15 13,13 16,13 16,11 13,11 "/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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"
+ width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#8F83B8;}
+</style>
+<g>
+ <rect x="10" y="3" class="st0" width="6" height="2"/>
+ <polygon class="st0" points="3,7 9,7 9,1 3,1 3,3 0,3 0,5 3,5 "/>
+ <rect y="11" class="st0" width="6" height="2"/>
+ <polygon class="st0" points="13,9 7,9 7,15 13,15 13,13 16,13 16,11 13,11 "/>
+</g>
+</svg>
diff --git a/index.html b/index.html
index 4aa867a..5f9cbb0 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,17 @@
-<html>
- <html lang="en" class="no-js">
- <head>
- <meta charset="utf-8">
- <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 - new site">
- <meta name="theme-color" content="#0080ff">
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- <link rel="icon" sizes="192x192" href="images/bliss_icon_small.png">
- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+<html>
+ <html lang="en" class="no-js">
+ <head>
+ <meta charset="utf-8">
+ <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 - new site">
+ <meta name="theme-color" content="#0080ff">
+ <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+ <link rel="icon" sizes="192x192" href="images/bliss_icon_small.png">
+ <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+ <link href=https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/styles_filter.css">
<script src="js/modernizr.js"></script>
@@ -57,17 +58,15 @@
<!-- Begin page content -->
<div class="container-fluid">
<div class="row cover top">
- <div class="col-xs-12">
- <div class="row">
- <div class="col-md-6" align="center">
- <p class="lead"><br></p>
+ <div class="col-xs-12" style="padding:0">
+ <div class="row" style="overflow-x:hidden;">
+ <div class="col-md-12" align="center">
<div class="row">
<h1>Bliss OS</h1>
- <p class="lead">An Open-Source OS, based</p>
- <p class="lead">on Android, that works on</p>
+ <p class="lead">An Open-Source OS, based on Android, that works on</p>
</div>
</div>
- <div class="col-md-6" align="center">
+ <div class="col-md-12" align="center">
<div class="row">
<div class="animation" data-animation-step="1">
<div class="device">
@@ -98,10 +97,10 @@
</div>
</div>
</div>
- </div>
+ </div>
</div>
<div class="row">
- <div class="col-xs-12 center-block text-center">
+ <div class="col-xs-12 center-block text-center" style="overflow-y:visible">
<a href="#about"><span id="scrollIcon" class="front-glyph glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
</div>
</div>
@@ -707,7 +706,7 @@
<div class="row">
<div id="family-lt" class="row cover bottom text-center section">
<div class="container">
- <img class="team-image" style="width: 36rem;" src="images/bliss_for.png">
+ <img class="team-image" style="max-width: 36rem;width:100%" src="images/bliss_for.png">
<div class="container">
<p class="text-center">We are currently in the process of moving into a new era of Bliss. As a ROM team, we worked together to overcome some of the hardest obstacles that a ROM team could face. And in doing so, we have grown and acted as an example to other teams. This growth allowed us to grow into a family of ROM teams, helping to support one another in our innovative efforts, and inspire work from other community members in the process. </p>
<p class="text-center">This growth allowed us to see many of the needs our fellow community members had, and sparked an idea to allow us all to succeed in the future. This inspired us to start our journey into making that happen, and we have turned Bliss Family of ROMs into a nonprofit corporation, with the intent to enable the development community like never before. </p>
@@ -910,14 +909,14 @@
</div>
</div>
</footer>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
- <script src="https://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>
- <script src="js/jquery-2.1.1.js"></script>
- <script src="js/jquery.mixitup.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
+ <script src="https://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>
+ <script src="js/jquery-2.1.1.js"></script>
+ <script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script>
<script src="js/mainani.js"></script>
- </body>
+ </body>
</html>
