git.roojs.org Git - bootswatch/blob - design-agency/css/styles.css

   1
   2 /*=============================================================
   3     Authour URL: www.designbootstrap.com
   4
   5     http://www.designbootstrap.com/
   6
   7     License: MIT
   8
   9     http://opensource.org/licenses/MIT
  10
  11     100% Free To use For Personal And Commercial Use.
  12
  13     IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
  14
  15 ========================================================  */
  16
  17
  18
  19 /*================================
  20     GENERAL STYLES
  21 ==================================*/
  22
  23 @import url(http://fonts.googleapis.com/css?family=Roboto); /* GOOGLE FREE FONTS */
  24
  25 body {
  26     font-family: 'Roboto', sans-serif;
  27 }
  28
  29 section {
  30     padding-top: 80px;
  31     padding-bottom: 120px;
  32 }
  33
  34 .head-set {
  35     padding-top: 20px;
  36     padding-bottom: 20px;
  37 }
  38
  39 .pad-bottom {
  40     padding-bottom: 60px;
  41 }
  42 /*================================
  43     NAVBAR STYLES
  44 ==================================*/
  45 .navbar-default {
  46     background-color: rgb(35, 133, 161);
  47     border-color: transparent;
  48     color: #fff;
  49 }
  50
  51 .navbar-default .navbar-nav > li > a,
  52 .navbar-default .navbar-nav > li > a:hover {
  53     color: #fff;
  54 }
  55
  56 .navbar-brand {
  57     padding: 0px;
  58 }
  59 .navbar-default .navbar-toggle .icon-bar {
  60     background-color:#fff;
  61 }
  62 /*================================
  63     HOME SECTION STYLES
  64 ==================================*/
  65
  66 /*STYLE OF BACKGROUND IMAGE*/
  67 .home {
  68     background: url(http://www.designbootstrap.com/livedemos/2015/01/18/design-agency/assets/img/home.jpg) no-repeat center center; /*Full Witdth background image*/
  69     padding: 0;
  70     -webkit-background-size: cover;
  71     background-size: cover;
  72     -moz-background-size: cover;
  73     min-height: 600px;
  74 }
  75     /*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/
  76 .home .overlay {
  77         padding-top: 90px;
  78         background-color: rgba(35, 133, 161,0.75); /*.75 opacity of the color so that background image is visible*/
  79         min-height: 600px;
  80         color: #fff;
  81     }
  82
  83 .home h1 {
  84         padding-top: 80px;
  85         font-weight: 900;
  86         font-size: 100px;
  87         font-family: 'Browallia New';
  88     }
  89 /*SMPLE CLASS TO ADJUST SECTION PADDING & HEIGHT*/
  90
  91 /*CLASS TO FORMAT TEXT*/
  92 .p-cls {
  93     padding-top: 30px;
  94     padding-bottom: 40px;
  95 }
  96
  97 /*======================================
  98     PARALLAX LIKE / STATS SECTION STYLES
  99 =========================================*/
 100
 101 .parallax-like {
 102     background: url(http://www.designbootstrap.com/livedemos/2015/01/18/design-agency/assets/img/stats.jpg) no-repeat center center; /* DEFINE IMAGE PATH CAREFULLY*/
 103     padding: 0;
 104     -webkit-background-size: cover;
 105     background-size: cover;
 106     color: #fff;
 107     background-attachment: fixed;
 108 }
 109
 110     .parallax-like .overlay {
 111         min-height: 200px;
 112         background: rgba(35, 133, 161,0.9);
 113         font-size: 40px;
 114         padding-bottom: 60px;
 115         padding-top: 60px;
 116     }
 117
 118 /*================================
 119     PORTFOLIO / WORK SECTION STYLES
 120 ==================================*/
 121 .portfolio-item img:hover { /* POSTFOLIO IMAGE BIG ON HOVER */
 122     cursor: pointer;
 123     -webkit-transform: scale(1.1, 1.1);
 124     -ms-transform: scale(1.1, 1.1);
 125     transform: scale(1.1, 1.1);
 126     transition-duration: 0.3s;
 127     -webkit-transition-duration: 0.3s; /* Safari */
 128     z-index: 1;
 129 }
 130
 131 /*================================
 132     VIDEO SECTION STYLES
 133 ==================================*/
 134 #video-sec {
 135     color: #fff;
 136     text-align: center;
 137 }
 138
 139     #video-sec .overlay {
 140         background-color: rgba(0, 0, 0, 0.85);
 141         min-height: 300px;
 142         color: #fff;
 143     }
 144
 145     #video-sec h1 {
 146         padding-top: 80px;
 147         font-size: 50px;
 148         font-weight: 900;
 149         padding-bottom: 30px;
 150     }
 151 /*================================
 152     CLIENTS SECTION STYLES
 153 ==================================*/
 154 #clients {
 155     background-color:#f4f4f4;
 156     padding-bottom:50px;
 157     padding-top:50px;
 158 }
 159     #clients img {
 160         opacity:0.5;
 161         cursor:pointer;
 162     }
 163         #clients img:hover {
 164             opacity:1;
 165         }
 166 /*================================
 167     FOOTER SECTION STYLES
 168 ==================================*/
 169
 170 footer {
 171     padding: 20px;
 172     font-size: 15px;
 173     text-align: center;
 174     font-weight: 900;
 175     background-color: rgb(35, 133, 161);
 176     color: #fff;
 177 }
 178
 179     footer a, footer a:hover {
 180         color: #fff;
 181         text-decoration: none;
 182     }