sync
[bootswatch] / design-agency / css / styles.css
index 1048e64..4677fde 100644 (file)
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
 
-html,
-body {
-  height: 100%;
-  /* The html and body elements cannot have any padding or margin. */
-  -webkit-font-smoothing: antialiased;
-  font-family: 'Open Sans', sans-serif;
-}
-
-.row {
-  margin-left:0px;
-  margin-right:0px;
-}
-
-/* Wrapper for page content to push down footer */
-#wrap {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  /* Negative indent footer by its height */
-  margin: 0 auto -60px;
-  /* Pad bottom by footer height */
-  padding: 0 0 60px;
-}
-
-/* Set the fixed height of the footer here */
-#footer {
-  height: 60px;
-  background-color: #f5f5f5;
-  margin-top:50px;
-  padding-top:20px;
-  padding-bottom:20px;
-}
-
-
-/* Custom page CSS
--------------------------------------------------- */
-/* CUSTOMIZE THE NAVBAR
--------------------------------------------------- */
-
-/* Special class on .container surrounding .navbar, used for positioning it into place. */
-.navbar-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
-}
-
-
-/* Since positioning the image, we need to help out the caption */
-.carousel-caption {
-  z-index: 10;
-}
-
-/* Declare heights because of positioning of img element */
-#myCarousel  .item {
-  height: 600px;
-  background-color:#bbb;
-}
-#myCarousel img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 600px;
-}
-
-
-#wrap > .container {
-  padding: 60px 15px 0;
-}
-.container .credit {
-  margin: 20px 0;
-}
-
-#footer {
-  background-color:#414141;
-}
-
-#footer a {
-  color:#efefef;
-}
+/*=============================================================
+    Authour URL: www.designbootstrap.com
 
-header {
-  background: #333;
-  color:#555;
-}
+    http://www.designbootstrap.com/
 
-header .dropdown-menu {
-  top:74px;
-  background: #ffcc33;
-  border-width:0;
-}
+    License: MIT
 
-h1 {
-  font-size:50px;
-}
+    http://opensource.org/licenses/MIT
 
-.logo {
-  font-size:40px;
-  position:absolute;
-  z-index:1200;
-  color:#333;
-  top:70px;
-  text-align:center;
-  width:100%;
-}
+    100% Free To use For Personal And Commercial Use.
 
-#nav {
-  width: 100%;
-  position:static;
-  top:-32px;
-}
+    IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
+   
+========================================================  */
 
-#nav.affix {
-   position: fixed;
-   top: 0;
-   z-index:10;
-   -webkit-transition: all .6s ease-in-out;
-}
 
-#footer > .container {
-  
-}
 
-@media (min-width: 767px) {
-  .navbar-nav.nav-justified > li{
-      float:none;
-  }
-}
-  
-.navbar-nav {
-  margin: 1px 1px; 
-}  
-  
-/* customize nav style */
-.navbar-custom {
-    background-color: #2e2e2e;
-       font-weight:700;
-    text-transform:uppercase;
-    border-width:0;
-}
-.navbar-custom  .navbar-nav>li>a {
-       color: #ddd;
-}
-.navbar-custom  .dropdown-menu li>a:hover {
-       color: #eee;
-}
-.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a  {
-       background-color: #000;
-}
-.navbar-custom .navbar-nav>.dropdown>a .caret {
-       border-top-color: #999;
-       border-bottom-color: #999;
-}
+/*================================
+    GENERAL STYLES
+==================================*/
 
-.navbar-collapse.in { /*3.0.2 bug workaround*/
-    overflow-y: visible;
-}
+@import url(http://fonts.googleapis.com/css?family=Roboto); /* GOOGLE FREE FONTS */
 
-.navbar-toggle {
-       outline:0;
+body {
+    font-family: 'Roboto', sans-serif;
 }
 
-.divider {
-       height:50px;
+section {
+    padding-top: 80px;
+    padding-bottom: 120px;
 }
 
-.panel {
-       border-width:0;
+.head-set {
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
 
-@media (max-width: 768px) {
-       header {
-       
-       }
+.pad-bottom {
+    padding-bottom: 60px;
 }
-
-#map-canvas {
-       width: 100%; 
-       height: 300px;
-       margin: 0;
-       padding: 15px;
+/*================================
+    NAVBAR STYLES
+==================================*/
+.navbar-default {
+    background-color: rgb(35, 133, 161);
+    border-color: transparent;
+    color: #fff;
 }
 
-.scroll-top {
-   position:fixed;
-   bottom:0;
-   right:6%;
-   z-index:100;
-   background: #f2f3f2;
-   font-size:24px;
-   border-top-left-radius:3px;
-   border-top-right-radius:3px;
+.navbar-default .navbar-nav > li > a,
+.navbar-default .navbar-nav > li > a:hover {
+    color: #fff;
 }
-.scroll-top a:link,.scroll-top a:visited {
-  color:#222;
-} 
 
-section {
-  color: #ffffff;
-  min-height: 400px;
-  height: auto !important;
-  height: 100%;
-  padding-top:100px;
+.navbar-brand {
+    padding: 0px;
 }
-
-.bg-1 {
-       background: url('http://www.bootply.com/assets/example/bg_suburb.jpg') no-repeat center center fixed; 
-    -webkit-background-size: cover;
-       -moz-background-size: cover;
-       -o-background-size: cover;
-       background-size: cover;
+.navbar-default .navbar-toggle .icon-bar {
+    background-color:#fff;
 }
+/*================================
+    HOME SECTION STYLES
+==================================*/
 
-.bg-2 {
-       background: url('http://www.bootply.com/assets/example/bg_suburb.jpg') no-repeat center center fixed; 
+/*STYLE OF BACKGROUND IMAGE*/
+.home {
+    background: url(http://www.designbootstrap.com/livedemos/2015/01/18/design-agency/assets/img/home.jpg) no-repeat center center; /*Full Witdth background image*/
+    padding: 0;
     -webkit-background-size: cover;
-       -moz-background-size: cover;
-       -o-background-size: cover;
-       background-size: cover;
-}
-
-.bg-3 {
-       background: url('http://www.bootply.com/assets/example/bg_blueplane.jpg') no-repeat center center fixed; 
+    background-size: cover;
+    -moz-background-size: cover;
+    min-height: 600px;
+}
+    /*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/
+.home .overlay {
+        padding-top: 90px;
+        background-color: rgba(35, 133, 161,0.75); /*.75 opacity of the color so that background image is visible*/
+        min-height: 600px;
+        color: #fff;
+    }
+
+.home h1 {
+        padding-top: 80px;
+        font-weight: 900;
+        font-size: 100px;
+        font-family: 'Browallia New';
+    }
+/*SMPLE CLASS TO ADJUST SECTION PADDING & HEIGHT*/
+
+/*CLASS TO FORMAT TEXT*/
+.p-cls {
+    padding-top: 30px;
+    padding-bottom: 40px;
+}
+
+/*======================================
+    PARALLAX LIKE / STATS SECTION STYLES
+=========================================*/
+
+.parallax-like {
+    background: url(http://www.designbootstrap.com/livedemos/2015/01/18/design-agency/assets/img/stats.jpg) no-repeat center center; /* DEFINE IMAGE PATH CAREFULLY*/
+    padding: 0;
     -webkit-background-size: cover;
-       -moz-background-size: cover;
-       -o-background-size: cover;
-       background-size: cover;
-}
-
-.bg-4 {
-       padding-top:30px;
-    background-color:#e6e6e6;
-}
-
-.panel .img-responsive {
-       min-height:270px;
-    max-height:270px;
-}
\ No newline at end of file
+    background-size: cover;
+    color: #fff;
+    background-attachment: fixed;
+}
+
+    .parallax-like .overlay {
+        min-height: 200px;
+        background: rgba(35, 133, 161,0.9);
+        font-size: 40px;
+        padding-bottom: 60px;
+        padding-top: 60px;
+    }
+
+/*================================
+    PORTFOLIO / WORK SECTION STYLES
+==================================*/
+.portfolio-item img:hover { /* POSTFOLIO IMAGE BIG ON HOVER */
+    cursor: pointer;
+    -webkit-transform: scale(1.1, 1.1);
+    -ms-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1);
+    transition-duration: 0.3s;
+    -webkit-transition-duration: 0.3s; /* Safari */
+    z-index: 1;
+}
+
+/*================================
+    VIDEO SECTION STYLES
+==================================*/
+#video-sec {
+    color: #fff;
+    text-align: center;
+}
+
+    #video-sec .overlay {
+        background-color: rgba(0, 0, 0, 0.85);
+        min-height: 300px;
+        color: #fff;
+    }
+
+    #video-sec h1 {
+        padding-top: 80px;
+        font-size: 50px;
+        font-weight: 900;
+        padding-bottom: 30px;
+    }
+/*================================
+    CLIENTS SECTION STYLES
+==================================*/
+#clients {
+    background-color:#f4f4f4;
+    padding-bottom:50px;
+    padding-top:50px;
+}
+    #clients img {
+        opacity:0.5;
+        cursor:pointer;
+    }
+        #clients img:hover {
+            opacity:1;
+        }
+/*================================
+    FOOTER SECTION STYLES
+==================================*/
+
+footer {
+    padding: 20px;
+    font-size: 15px;
+    text-align: center;
+    font-weight: 900;
+    background-color: rgb(35, 133, 161);
+    color: #fff;
+}
+
+    footer a, footer a:hover {
+        color: #fff;
+        text-decoration: none;
+    }