View file File name : style.css Content :html, body { margin: 0; padding: 0; width: 100%; } body { font-family: "Helvetica Neue",sans-serif; font-weight: lighter; } header { width: 100%; height: 30vh; background-size: cover; z-index: 99999; position: fixed; } .content { width: 94%; margin: 4em auto; font-size: 14px; line-height: 30px; text-align: justify; } .logo { line-height: 60px; position: fixed; float: left; margin: 16px 46px; color: #fff; font-weight: bold; font-size: 20px; letter-spacing: 2px; } nav { position: fixed; width: 100%; line-height: 60px; background-color: #0003; } nav ul { line-height: 60px; list-style: none; background: rgba(0, 0, 0, 0); overflow: hidden; color: #fff; padding: 0; text-align: right; margin: 0; padding-right: 40px; transition: 1s; } nav.black ul { background: #000; } nav ul li { display: inline-block; padding: 16px 40px;; } nav ul li a { text-decoration: none; color: #fff; font-size: 16px; } .menu-icon { line-height: 60px; width: 100%; background: #000; text-align: right; box-sizing: border-box; padding: 15px 24px; cursor: pointer; color: #fff; display: none; } @media(max-width: 786px) { .logo { position: fixed; top: 0; margin-top: 16px; } nav ul { max-height: 0px; background: #000; } nav.black ul { background: #000; } .showing { max-height: 34em; } nav ul li { box-sizing: border-box; width: 100%; padding: 24px; text-align: center; } .menu-icon { display: block; } } /*f*/ .footer1{ background-color: black; color: white; } .footer1 h2{ margin: 5px; padding: 8px; font-size: 25px; font-family: "Times New Roman", Times, serif; } .footer1 a{ color: white; } .footer1 p{ margin: 5px; padding-top: 2px; padding-left: 10px; font-size: 16px; font-family: "Times New Roman", Times, serif; } .footer1 h2{margin: 5px; padding: 5px; border-bottom: 1px solid white; } .cc{ height: 30vh; } .cb{ margin-top: 35px; text-align: center; } .rbb{ margin-top: 35px; text-align: right; } .lbb{ margin-top: 35px; text-align: left; } .slider{ position: relative; z-index: 0; } #form{ margin: 100px auto; background: #00000069; padding: 20px; position: absolute; margin-left: 900px; margin-top: -550px; } /*BOTTON*/ button:hover { border: none; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn-contact-home { width: auto; height: 35px; font-size: 10pt; font-weight: 400; letter-spacing: 1pt; font-style: normal; text-align: center; line-height: 35px; color: #fff; border: 2px solid rgba(0, 0, 0, 0); background: #fc9f1c; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 2px; outline: none; text-shadow: none; margin: 0px auto; margin-left: auto; margin-left: auto; margin-left: 0px; padding: 0 35px; cursor: pointer; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } button { -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button, select { text-transform: none; } button { overflow: visible; } button, input, optgroup, select, textarea { margin: 0; font: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; font-family: inherit; color: inherit; } .form-control { width: 100% !important; padding: 10px 20px 6px 20px; font-size: 13px; line-height: 24px; color: #969595; background: #fff !important; border: 2px solid #9c9b9b; border-radius: 0; box-shadow: none; } .form-top { background: #fff; padding: 0px; margin: -14px; margin: -40px -35px 20px -35px; height: 35px; } .container1 h3 { color: #fc9f1c; text-align: center; padding: 5px; } h3 { font-size: 24px; } h3 { font-size: 26px; } .h3, h3 { font-size: 24px; } .h1, .h2, .h3, h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } /*hero*/ .hero { position: absolute; top: 70%; left: 20%; z-index: 3; color: #fff; text-align: left; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 3em; font-weight: bold; margin: 0; padding: 0; } .hero h3 { font-size: 1em; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 7; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /*servicesbox*/ #form2{ margin: 100px auto; background: #fff;; position: relative; margin-top: -80px; text-align: justify; -webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); } .sbh1s{ font-size: 2em; } .margin{ margin-bottom: 20px; } #form3{ margin: 100px auto; background: #fff;; position: relative; margin-top: -80px; text-align: justify; -webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); } #form4{ margin: 150px auto; background: #fff;; position: relative; margin-top: -80px; text-align: justify; -webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); } /*paralex*/ /*paralex*/ .parallax { background-image: url(image/slider/1.jpg); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .overlay_1 { position: absolute; width: 100%; height: 77%; z-index: 2; background-color: #080d15; opacity: .5; } #welf{ margin: 100px auto; background: #fff;; position: relative; text-align: justify; -webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); } #welf2{ margin: 100px auto; background: #fff;; position: relative; text-align: justify; -webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75); } /*paralex*/