X-Git-Url: http://git.roojs.org/?p=bootswatch;a=blobdiff_plain;f=design-agency%2Fcss%2Fstyles.css;h=4677fde9c9d94e18e2b4bd583cf649bcec560525;hp=1048e640e7c3cc26e8aa4f8dc2e2801eeda02489;hb=da9e508d244df3faae601e727564d138f54f1053;hpb=c87ea8b27229e395d7c2eb5fd08ccdf1c23934db diff --git a/design-agency/css/styles.css b/design-agency/css/styles.css index 1048e64..4677fde 100644 --- a/design-agency/css/styles.css +++ b/design-agency/css/styles.css @@ -1,243 +1,182 @@ -@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; + }