diff --git a/index.html b/index.html new file mode 100644 index 0000000..5e52e74 --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + + Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7138f15 --- /dev/null +++ b/style.css @@ -0,0 +1,939 @@ +/* =========== Typography ========== */ +html,body{ + width: 100%; + height: 100%; +} +@font-face{ + font-family: 'Helvetica-Regular'; + src:url(../fonts/Helvetica-Regular.ttf); +} + +body { + margin: 0px; + padding: 0px; + font-family: 'Montserrat', sans-serif; + color: #4d4d4d; + height: 100% !important; +} +/* ======DEFAULT BROWSER STYLE========= */ + +a:focus{ + text-decoration: none; +} +a:focus,.btn:focus,.btn:active:focus, +button:focus,input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus{ + outline: none; +} +ul,p{ + margin-bottom: 0; +} +.text-white{ + color: #fff !important; +} +/*===============Custom Spacing=============*/ +.space10{ + margin-top: 10px; +} +.space20{ + margin-top: 20px; +} +.space30{ + margin-top: 30px; +} +.space40{ + margin-top: 40px; +} +.space50{ + margin-top: 50px; +} +.space60{ + margin-top: 60px; +} +.space70{ + margin-top: 70px; +} +.space80{ + margin-top: 80px; +} +.space90{ + margin-top: 90px; +} +.space100{ + margin-top: 100px; +} +.space200{ + margin-top: 200px; +} +/*==================Main Stylesheet==========================*/ +/*-----------------------Navbar-------------------------------------*/ +.navbar-nav>li { + float: none; + display: table-cell; + vertical-align: middle; +} +.navbar-nav>li a .material-icons{ + font-size: 35px; +} +.navbar-default { + background-color: transparent; + border: 0; + min-height: auto; + padding: 24px 0 16px; +} +.navbar-default .navbar-nav>li>a { + color: #fff; + font-weight: 500; + font-size: 16px; + padding: 0px 15px !important; + letter-spacing: 1.2px; +} +.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { + color: #fff; + background-color: transparent; +} +.navbar-brand { + padding: 7px 15px; + display: block; + float: none; + height: auto; + font-size: 0; + line-height: 0; +} +/*.affix { + background: #656bfd !important; +}*/ +#nav-icon3 { + z-index: 99; + width: 36px; + height: 0; + position: relative; + margin: 0 auto; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .5s ease-in-out; + -moz-transition: .5s ease-in-out; + -o-transition: .5s ease-in-out; + transition: .5s ease-in-out; + cursor: pointer; + top: 15px; +} +#nav-icon3 span { + display: block; + position: absolute; + height: 3px; + width: 70%; + background: #fff; + border-radius: 9px; + opacity: 1; + left: 0; + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: .25s ease-in-out; + -moz-transition: .25s ease-in-out; + -o-transition: .25s ease-in-out; + transition: .25s ease-in-out; +} +#nav-icon3 span:nth-child(1) { + top: 0px; +} +#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { + top: 8px; +} +#nav-icon3 span:nth-child(4) { + top: 16px; +} +#nav-icon3.open span:nth-child(1) { + top: 18px; + width: 0%; + left: 50%; +} +#nav-icon3.open span:nth-child(2) { + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); +} +#nav-icon3.open span:nth-child(3) { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); +} +#nav-icon3.open span:nth-child(4) { + top: 18px; + width: 0%; + left: 50%; +} +/*============================================================*/ +.banner{ + background:url(../img/banner2.png)no-repeat; + width: 100%; + height: 100%; + background-size: cover; + display: table; +} +.banner h1 { + font-size: 64px; + font-weight: 300; + color: #fff; + text-align: center; + margin: 0; + letter-spacing: 4.87px; +} +.banner-caption,.form-caption{ + width: 100%; + height: 100%; + display: table-cell; + vertical-align: middle; +} +.scroll-tag{ + + position: absolute; + bottom: 30px; + left: 0; + right: 0; +} +.scroll-tag p{ + font-size: 18px; + color: #fff; + font-weight: 300; +} +/*-----------------------------What we do-----------------------*/ +.what-we-do{ + padding: 230px 0px 70px; + position: relative; + top: -90px; +} + +.med-title{ + margin: 0; + color: #26245F; + font-size: 48px; + font-weight:500; +} +.tag-line { + font-size: 28px; + color: #26245F; + font-weight: 300; +} +.img-container{ + position: relative; +} +.brush { + position: absolute; + top: 40px; + left: 25px; + z-index: 9; +} +.brush-shadow { + position: absolute; + top:40px; + left: 25px; +} +.box-img { + position: absolute; + top: 27%; + right: 20px; + z-index: 9; +} +.box-img-shadow { + position: absolute; + top: 27%; + right: 20px; +} +.shapes{ + position: absolute; + bottom: 60px; + right: 50px; +} +.hand { + position: absolute; + top: 130px; + left: 50px; + z-index: 9; +} +.hand-shadow { + position: absolute; + top: 130px; + left: 50px; +} +.details{ + font-size: 30px; + color: #898AB9; + font-weight: 300; +} + +.number-bg { + background: url(../img/one.png)no-repeat; + background-size: contain; + background-size: 70px; + background-position: 0 18%; + /*padding: 130px 0 0 48px;*/ + padding: 100px 0 0 48px; +} + +.numb-two{ + background: url(../img/two.png)no-repeat !important; +} +.numb-third{ + background: url(../img/third.png)no-repeat !important; +} +/*========================how-we-work================================*/ +.how-we-work{ + background-color: #F6F7FE; + padding: 150px 0; +} +.border-box { + border: 1px solid #B8BDFF; + padding: 30px 50px; + min-height: 500px; +} + +.heading-tag { + font-size: 24px; + color: #333472; + margin: 30px 0; + font-weight: 500; +} +.details2{ + color: #898AB9; + font-size: 18px; + font-weight: 300; +} +/*===================our-work======================================*/ +.our-work { + background-color: #646EF2; + padding: 60px 0 0; +} + +.border-box2 img{ + -webkit-filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.5)); + filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.7)); +} +.border-box2 { + border: 1px solid #B8BDFF; + padding: 18px 15px; + /* min-height: 543px;*/ +} +.product{ + font-size: 24px; + color: #fff; + font-weight: bold; + padding-left: 25px; +} +.product-hint { + padding-left: 25px; +} +.hint{ + font-size: 18px; + color: #fff; + font-weight: 300; + /*padding-left: 25px;*/ +} +/*======================technology===============================*/ +.technology{ + padding: 70px 0; +} +.technology .hint{ + color: #898AB9; + margin-top: 10px; + font-weight: 500; +} +/*====================team==================================*/ +.team{ + padding: 70px 0; + background-color: #F7F8FE; +} + +.team .hint{ + color: #898AB9; + font-weight: 500; + font-size: 14px; +} +.team .heading-tag{ + margin: 15px 0 5px; +} +.team .details2 { + font-size: 14px; + margin-top: 5px; +} +/*======================form-section=======================*/ +.form-section{ + background:#F6F7FE url(../img/form-banner.png)no-repeat; + height: 100%; + width: 100%; + display: table; + background-size: cover; +} + +.form-section .form-control { + font-size: 14px; + background-color: transparent; + border: 0; + font-size: 16px; + border-bottom: 2px solid #bbbbd6; + border-radius: 0; + text-align: center; + box-shadow: none; + height: 44px; +} +.form-section .form-control:focus { + border-color:#646ef2; +} +.form-section form{ + background-color: #fff; + padding: 30px 50px; +} +.say-hi{ + font-size: 36px; + color: #333472; + text-align: center; + margin-bottom: 50px; +} +.form-section form .btn-default{ + width: 100%; + color: #333472; + font-size: 16px; + font-weight: 500; + background: #B8E986; + border: 0; + padding: 10px 0; + margin-top: 20px; +} +.form-section form .btn-default:hover,.form-section form .btn-default:focus{ + background-color: #656BFD; + color: #fff; +} +/*------------------------Footer-------------------------*/ +footer{ + background:url(../img/footer.png)no-repeat; + background-size: cover; + padding: 70px 0; +} +footer h6{ + font-size: 20px; + color: #fff; + margin: 0 0 10px; + font-weight: 400; + text-transform: uppercase; +} + +footer p, footer ul li a { + font-size: 18px; + color: #fff; + line-height: 30px; + font-weight: 300; +} +footer ul li a{ + color: #C3EA98; + font-weight: 500; +} +footer ul li a:hover{ + color: #fff; + text-decoration: none; +} + +.readmore { + font-size: 16px; + color: #9BCB5C; + position: relative; + padding-bottom: 17px; + display: block; +} +.readmore:hover,.readmore:focus{ + color: #9BCB5C; + text-decoration: none; +} +.readmore:after { + position: absolute; + content: '\f107 '; + font-family: 'FontAwesome'; + font-size: 25px; + color: #9BCB5C; + left: 0; + right: 0; + top: 15px; +} +.arrow-up.readmore{ + margin-top: 20px; +} +.arrow-up.readmore:after{ + transform: rotate(180deg); +} + +body.second .navbar +{ + background: #656bfd !important; + position: fixed; + width: 100%; + z-index: 999; + /*transition: all 0.3s ease-in-out;*/ +} +.owl-page.active{ + height: 4px !important; +} +.owl-controls .owl-page { + cursor: pointer; + background: #000; + width: 12%; + height: 1px; + display: inline-block; + margin: 0; +} +/*.owl-page:nth-child(6),.owl-page:nth-child(7),.owl-page:last-child{ + display: none !important; +}*/ +.owl-controls{ + text-align: center; + margin-top: 15px; +} +.owl-item{ + /*background: #f6f6fe; + padding: 20px 0; + margin:3px;*/ +} + +.full-width-img{ + width: 100%; +} +/*==============Chnages(03-Oct)===============================*/ +footer .back-to-top{ + color: #fff; + float: right; +} +.outline-shadow{ + box-shadow: 0 2px 4px rgba(100,110,242,0.7); +} +.number-bg .med-title { + margin: 0 0 16px; +} +.number-bg .details { + line-height: 40px; +} +.tweet{ + font-size: 50px; + color: #fff; + opacity: 0.8; +} +.tweet:hover{ + opacity: 1; +} + +.form-group { + position: relative; + margin-top: 0; + margin-bottom: 26px; +} + +.form-group textarea { + resize: none; +} + +.form-group .control-label { + position: absolute; + top: 0; + pointer-events: none; + padding-left: 0.125rem; + z-index: 1; + color: #26245f; + font-size: 16px; + text-align: center; + /* margin: 0 auto; */ + left: 0; + right: 0; + display: block; + font-weight: normal; + -webkit-transition: all 0.28s ease; + transition: all 0.28s ease; +} +.form-group .bar { + position: relative; + border-bottom: 0; + display: block; +} + +.form-group select ~ .control-label, +.form-group input:focus ~ .control-label, +.form-group input:valid ~ .control-label, +.form-group input.form-file ~ .control-label, +.form-group input.has-value ~ .control-label, +.form-group textarea:focus ~ .control-label, +.form-group textarea:valid ~ .control-label, +.form-group textarea.form-file ~ .control-label, +.form-group textarea.has-value ~ .control-label { + font-size: 12px; + color: #26245f; + top: -1rem; + left: 0; +} + +#myCarousel .carousel-control{ + display: none; +} +/*==============Chnages(04-Oct)===============================*/ + +.space-left{ + margin-left: -1px; +} +.space-top{ + margin-top: -1px; +} +.space-top-left{ + margin-top: -1px; + margin-left: -1px; +} + + +/*========================Media Query================================*/ +@media(max-width: 1199px){ + .details { + font-size: 26px; + } + .med-title { + font-size: 40px; + } + .tag-line { + font-size: 24px; + } + .border-box { + padding: 30px 20px; + } +} +@media(max-width: 991px){ + .number-bg { + background-size: 70px; + background-position: 0 0; + padding: 70px 0 0 18px; + } + .details { + font-size: 22px; + } + .med-title { + font-size: 30px; + } + .form-section { + height: 70%; + } + .border-box2 { + min-height: 380px; + } + .border-box { + min-height: 565px; + } + .banner h1 { + font-size: 50px; + } +} +@media(max-width: 767px){ + .brush, .brush-shadow, .box-img, .box-img-shadow, .hand, .hand-shadow { + max-width: 20%; + } + .owl-item .item{ + padding: 0; + } + .bg-color{ + background: #f6f6fe; + padding: 20px 0; + margin:3px; + } + .brush-shadow { + top: 60px; + left: 83px; + /*max-width: 20%;*/ + /*max-width: 89px;*/ + } + .brush { + top: 57px; + left: 87px; + /*max-width: 20%;*/ + } + .box-img,.box-img-shadow { + top: 50px; + right: 0; + left: 0; + margin: 0 auto; + } + .box-img { + top: 50px; + } + .box-img-shadow { + top: 55px; + } + .hand { + top: 60px; + right: 80px; + left: auto; + } + .hand-shadow { + top: 65px; + right: 83px; + left: auto; + } + #owl-demo .owl-item:first-child .hint{ + /*margin-top: -7px;*/ + } + .space-top-left{ + margin-top: 0; + margin-left: 0; + } + .space-left{ + margin-left: 0; + } + .space-top{ + margin-top: 0; + } + .team { + padding: 40px 0; + background-color: #FBFBFF; + } + .team img{ + margin-top: 40px; + } + .team .row.space100,.team .row.space80{ + margin-top: 0; + } + .align-navbar{ + display: table; + width: 100%; + height: 100%; + } + #myCarousel .carousel-control{ + display: block; + } + .navbar-nav>li { + display: block; + margin: 30px 0; + } + .form-section { + background-image:none; + } + .number-bg .details { + line-height: 24px; + } + .number-bg .med-title { + font-size: 18px; + } + .hand-shadow { + top: 45px; + } + .hand { + top: 50px; + } + .mob-pad0{ + padding: 0; + } + .item.space80{ + margin-top: 0 !important; + } + .hint { + font-size: 12px; + color: #fff; + } + #owl-demo { + margin: 0; + margin-top: 40px; + } + .technology .col-md-12{ + padding: 0; + } + .banner { + /*background-attachment: fixed;*/ + background-attachment: scroll; + } + .say-hi { + font-size: 26px; + margin-bottom: 30px; + } + .form-section form { + background-color: transparent; + padding: 25px 0; + } + .carousel-control { + width: 10%; + font-size: 24px; + text-shadow: none; + opacity: 1; + /*top: 86%;*/ + height: auto; + } + .carousel-control.left, .carousel-control.right { + background-image: none; + z-index: 99; + } + .carousel-indicators { + position: absolute; + left: 0; + width: 100%; + padding-left: 0; + margin-left: 0; + } + .carousel-indicators .active { + height: 4px !important; + margin: 0 -2px; + } + .carousel-indicators li,.carousel-indicators .active { + display: -webkit-inline-box; + width: 12%; + height: 0px; + margin: 0 -2px; + background-color: #fff; + border: 1px solid #fff; + border-radius: 0; + } + .above_item.carousel-inner{ + margin: 0 auto; + } + .product { + font-size: 22px; + text-align: center; + margin-top: 20px; + padding-left: 0px; + } + .product-hint { + padding-left: 0px; + } + #myCarousel .hint { + font-size: 15px; + text-align: center; + } + .border-box2 { + border: 0; + } + .heading-tag { + font-size: 20px; + } + .border-box .details2{ + display: none; + } + .border-box { + min-height: auto; + margin-bottom: -1px; + } + .med-title { + font-size: 23px; + } + .details { + font-size: 16px; + } + .tag-line{ + font-size: 14px; + } + .what-we-do,.how-we-work { + padding: 50px 0; + } + + .what-we-do { + padding: 100px 0px 0px; + position: relative; + top: -60px; + } + + .navbar-default { + padding: 5px 0; + } + .nav>li>a>img { + margin: 0 auto; + } + .navbar-default .navbar-nav>li>a { + font-size: 24px; + font-family: 'Helvetica-Regular'; + } + .navbar-nav { + margin: 0; + text-align: center; + display: table-cell; + vertical-align: middle; + height: 100%; + width: 100%; + } + .navbar-collapse.in{ + right: 15px; + transition: 0.4s ; + height: 100% !important; + } + .navbar-collapse { + position: fixed; + background: -webkit-linear-gradient(#656BFD, #7E93FE); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(#656BFD, #7E93FE); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(#656BFD, #7E93FE); /* For Firefox 3.6 to 15 */ + background: linear-gradient(#656BFD, #7E93FE); /* Standard syntax */ + width: 100%; + right: -400px; + top: -1px; + bottom: 0; + max-height: 100% !important; + transition: 0.4s ease-in-out; + height: 100% !important; + } + .navbar-brand { + padding: 4px 15px; + width: 85%; + } + .navbar-default .navbar-toggle{ + border: 0; + box-shadow: none; + margin: 0; + padding: 0 4px; + } + .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { + background-color: transparent; + } + .banner h1 { + font-size: 20px; + margin-top: 30px; + } + .what-we-do .space200 { + margin-top: 0; + } + .number-bg { + padding: 0; + background: none !important; + } +} + + + +@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape){ + +} + +@media(max-width: 375px){ + .brush, .hand { + top: 40px; + } + .brush-shadow, .hand-shadow { + top: 46px; + } +} + +@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape){ + +} + + + +@media(max-width: 320px){ + .brush, .hand, .box-img, .brush-shadow, .hand-shadow, .box-img-shadow { + width: 80px; + } + .banner h1 { + font-size: 16px; + } + .border-box .details2 { + font-size: 15px; + } +} + +@media only screen +and (min-device-width : 320px) +and (max-device-width : 568px) +and (orientation : landscape) { + +} + \ No newline at end of file