Файловый менеджер - Редактировать - /var/www/sturrock/tamer/assets/css/backup.css
Назад
@import url("navbar.css"); @import url("variables.css"); @import url("buttons.css"); @import url("flickity.min.css"); @import url("hover-min.css"); @import url("footer.css"); @import url("team.css"); @import url("services.css"); @import url("legal.css"); @import url("news.css"); @import url("newClient.css"); /* --- [ GLOBAL STYLES: ] --- */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; -webkit-box-sizing: inherit; -moz-box-sizing: inherit; -ms-box-sizing: inherit; } html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; overflow-x: hidden; } h1 { font-family: var(--font); font-size: 7.5rem; line-height: 7.8rem; } h2 { font-size: 5.5rem; } h3 { font-size: 2.7rem; } p { font-size: var(--fontSize); } img { width: 100%; height: 100%; } a, ul, li { text-decoration: none; list-style: none; } span.break { display: block; } button:focus { outline: none; } .green { color: var(--greenColor); } .greenBg { background: var(--greenColor); /* color: var(--whiteColor); */ } .featureParagraph { font-size: 40px; color: var(--fontColor); text-align: center; padding-bottom: 100px; } /* --[ Containers / Wrappers / Banner/ Boxes: ]--- */ .container { padding: var(--mainPadding); font-family: var(--font); width: 100vw; min-height: 100vh; } .infoWrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .banner { background-color: aqua; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; min-height: 65vh; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; } .contentBox div, .contentBox img { border-radius: 5px; box-shadow: 0px 10px 15px rgba(0, 0, 0, .1); } .contentBanner { width: 100vw; min-height: 33.3vh; margin: 0 auto; background: darkgoldenrod; } /* --[ Logo Styles: ]--- */ .logo { float: left; font-size: 2.4rem; line-height: 5.5rem; font-weight: 800; color: #fff; } .logoTitle { text-transform: uppercase; letter-spacing: 5px; font-family: var(--font); font-size: var(--fontSize); padding: 0; margin: 0; margin-right: -5px; } .logoTitle span { font-weight: lighter; } /* --[ Header: ]--- */ header { position: fixed; width: 100vw; z-index: 100; /* Master header font size: */ font-size: 10px; } header a { color: white; } /* Green Bar: */ .greenBar { background: var(--darkColor); padding: 10px var(--mainPadding); display: flex; justify-content: flex-end; align-items: center; color: var(--whiteColor); font-family: var(--font); font-weight: 700; } .greenBar p { letter-spacing: 1px; margin: 0 23px; } .greenBar i { font-size: 2.3em; margin-left: 23px; } .greenBar i:hover { color: var(--greenColor); transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; -ms-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; } /* --[ Landing Page: ]--- */ #landing.container { min-height: 100vh; background-image: url(../img/landing-img.jpg); background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; /* Master landing font-size: */ font-size: 10px; } #landing h1 { font-size: 10em; line-height: normal; color: var(--whiteColor); padding-bottom: 30px; } #landing h2 { color: var(--whiteColor); font-size: 5em; } #landing .btn-light { margin-right: calc(var(--headingPadding) / 2); font-size: 2em; } /* --[ About Us: ]--- */ #about.container { min-height: 50vh; display: grid; grid-template-columns: repeat(2, 1fr); -ms-display: grid; -ms-grid-template-columns: repeat(2, 1fr); background: #fff; padding: 0; } #about h2 { padding-bottom: var(--headingPadding); } #about p { color: var(--fontColor); padding-bottom: 20px; } #about p:last-of-type { padding-bottom: var(--headingPadding); } #about div { display: flex; flex-direction: column; } #about .infoWrapper { padding: var(--mainPadding); } #about .imgWrapper { background-image: url(../img/about-img.jpg); background-size: cover; min-height:; } /* --[ Our Services: ]--- */ #services.container { background: var(--darkColor); min-height: auto; position: relative; } #services.container h2{ padding-bottom: var(--headingPadding); color: var(--whiteColor); } #services .infoWrapper { position: absolute; left: 0; width: 100%; max-width: 900px; min-width: 706px; padding: calc(var(--mainPadding) / 5) var(--mainPadding); padding-right: 4rem; border-radius: 0 500px 500px 0; color: var(--whiteColor); background: var(--greenColor); } #services .infoWrapper p { font-size: calc(var(--fontSize) - 2px); } .servicesWrapper { display: grid; grid-template-columns: repeat(12, 1fr); gap: 50px; margin: 0 auto; margin-top: calc(81.31px + 4.5rem); } .serviceOptBox { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; color: var(--whiteColor); padding: calc(var(--mainPadding) / 2); background-image: url(../img/service-img-1.jpg); background-size: cover; border-radius: 7px; position: relative; height: 500px; grid-column: span 2; /* Master services font size: */ font-size: 11px; } .serviceOptBox h4 { font-size: 1.6em; } .serviceOptBox p { font-size: 1.4em; line-height: normal; /* margin: 12.5rem 0 4rem 0; */ margin-bottom: 9rem; width: 100%; } .serviceOptBox .btn { padding: 0.7rem 3rem; width: auto; font-size: 1.4em; font-weight: 600; } .iconWrapper { height:50px; width:50px; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; } .iconWrapper i { font-size: 4.5em; } .serviceOptBox .contentWrapper { position: absolute; bottom: 0; padding: 40px 20px; } /* --[ Packages: ]--- */ #packages.container { min-height: 80vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; padding: var(--mainPadding) 0; padding-bottom: 0; } #packages h2 { text-align: center; padding-bottom: calc(var(--headingPadding) * 2); } .packageWrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -ms-grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 100px; width: 100%; z-index: 10; padding: 0 var(--mainPadding); } .packageOptBox { height: 540px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; color: var(--fontColor); padding: calc(var(--mainPadding) / 2); border-radius: 10px; position: relative; background: var(--whiteColor); box-shadow: 0 10px 15px 10px rgba(0, 0, 0, .1) ; /* Master packages font size: */ font-size: 10px; } .packageOptBox h4 { font-size: 2.2em; color: var(--darkColor); padding-bottom: calc(var(--mainPadding) / 3); } .packageOptBox li, .packageOptBox p { font-size: 1.8em; color: var(--fontColor); padding-bottom: 1rem; } .packageOptBox li:first-child { font-weight: 700; } .packageOptBox:first-child li:first-child { font-weight: 500; } .packageOptBox li:before { content:"| "; color: var(--greenColor); font-weight: 700; } .packageOptBox ul { margin-bottom: calc(var(--mainPadding) / 2); } .packageOptBox div { height: 108px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: absolute; bottom: 4rem; left: 0; width: 100%; } .packageOptBox .btn { font-family: var(--font); font-weight: 700; color: var(--whiteColor); text-align: center; border-radius: 5px; padding: 1rem 5.3rem; width: auto; } .packageOptBox a span { font-weight: 700; color: var(--fontColor); } .packageOptBox a span:hover { transition: all 250ms ease; -webkit-transition: all 250ms ease; color: var(--greenColor); } .greenBanner.container { width: 100%; min-height: 25vh; margin-top: -50px; z-index: 1; background: var(--greenColor); /* Master greenbanner font size: */ font-size: var(--fontSize); } .greenBanner .infoWrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-family: var(--font); z-index: 10; width: 60%; margin: 0 auto; } .greenBanner .infoWrapper .btn-light-wht { padding: 1rem 5rem; margin: 0 1rem; } .greenBanner .infoWrapper div:first-child { display: flex; flex-direction: column; color: var(--whiteColor); width: 60%; } .greenBanner .infoWrapper div:first-child h3 { font-size: 2em; padding-bottom: 1.5rem; } .greenBanner .infoWrapper div:last-child { display: flex; justify-content: center; width: 40%; padding: 0 var(--mainPadding); } .greenBanner .infoWrapper .btnLight { border: 2px solid var(--whiteColor); padding: 1rem 5rem; margin: 0 2.5rem; } .greenBanner a span { font-weight: 700; color: var(--whiteColor); } /* ---[ Latest News: ]--- */ #news.container { min-height: auto; } #news.container h2 { padding-bottom: var(--headingPadding); } .newsArticleBox { background: white; width: 30%; height: 500px; display: flex; flex-direction: column; position: relative; margin-right: 5%; margin-bottom: calc(var(--mainPadding) / 1.4); /* Master news font size: */ font-size: 10px; } .newsArticleBox .imgWrapper { width: 100%; height: 340px; background: lightcoral; overflow: hidden; display: flex; justify-self: center; align-items: center; } .newsArticleBox .imgWrapper img { width: 100%; height: auto; object-fit: cover; -ms-object-fit: cover; object-position: left bottom; -ms-object-position: left bottom; } .newsArticleBox div:nth-of-type(2) { width: 100%; display: flex; flex-direction: row; justify-content: space-between; color: var(--greenColor); } .newsArticleBox div:nth-of-type(3) { width: 100%; display: flex; flex-direction: row; justify-content: space-between; position: absolute; bottom: 0; /* here */ left: 0; color: var(--greenColor); padding-top: .5rem; border-top: 1px solid rgba(101, 101, 101, .4); } .publisher, .date { font-weight: var(--font); font-size: 1.8em; font-weight: 600; padding-top: 15px; } .title { color: var(--fontColor); font-size: 2.2em; padding-top: 15px; text-transform: capitalize; } .title:hover { transition: all 250ms ease; -webkit-transition: all 250ms ease; color: var(--greenColor); } .newsArticleBox a:last-child { padding-top: 10px; font-size: 2em; font-weight: 700; color: var(--fontColor); } .newsArticleBox a:last-child:hover { transition: all 250ms ease; -webkit-transition: all 250ms ease; color: var(--greenColor); } .newsArticleBox .imgWrapper a { font-size: 9px; font-weight: lighter; color: #000; } .newsArticleBox:hover .title, .newsArticleBox:hover a { cursor: pointer; color: var(--greenColor); transition: all 250ms ease; -webkit-transition: all 250ms ease; } /* ---[ Testimonies: ]--- */ #testimonies.container { background-image: url(../img/office.jpg); background-size: cover; min-height: auto; } .testimonyBox { width: 100%; margin: 0 auto; margin-right: 10px; padding: 0 calc(var(--mainPadding) * 3); /* Master testimony font size: */ font-size: 10px; } .testimonyBox div:first-child { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .dp { border-radius: 500rem; width: 9rem; height: 9rem; margin-right: 2rem; background: khaki; } .name { font-size: 3.2em; color: var(--whiteColor); } .name .occupation { display: block; font-size: 1.6em; font-weight: 500; } .testimony { font-size: 6em; color: var(--whiteColor); text-align: center; padding: var(--mainPadding) 0; } .testimony:before, .testimony:after { content:'"'; } /* ---[ Contact: ]--- */ #contact.container { display: grid; min-height: 40vh; display: grid; grid-template-columns: repeat(2, 1fr); } #contact > div { display: flex; justify-content: center; align-items: center; } form { padding: 2.5px; /* Master form font size: */ font-size: 10px; } #contact h2 { font-size: 80px; padding-right: var(--mainPadding); } #contact h2 span { display: block; } #contact .inputWrapper { width: 100%; display:flex; flex-direction: row; } #contact textarea { flex: 1; height: 35vh; } #contact .inputWrapper input, #contact textarea { flex: 1; color: var(--fontColor); font-size: 1.5em; font-family: var(--font); background: var(--inputColor); border: 1px solid var(--inputBorderColor); padding: var(--inputPadding); margin: 2.5px; border-radius: 5px; } textarea:focus, input:focus { outline: none; border: 1px solid rgba(25, 198, 125, 1) !important; } #contact form div:last-child { display: flex; justify-content: flex-end; } [type~=submit] { box-shadow: none; text-transform: uppercase; border: none; } #contact [type~=submit] { margin-top: 2rem; } /* ---[ Map: ]--- */ /* ---[ Media Queries: ]--- */ @media only screen and (max-width: 1880px) { .serviceOptBox { padding: var(--mainPadding) 40px; font-size: 13px; grid-column: auto; } .serviceOptBox h4 { font-size: 25px; } .serviceOptBox .iconWrapper i { font-size: 60px; padding-bottom: 40px; } .serviceOptBox p { margin-bottom: 4rem; padding: 0 20px; } .serviceOptBox .contentWrapper { padding: 40px 15px; } .servicesWrapper { grid-template-columns: repeat(3, 1fr); } .packageWrapper { gap: 50px; } .greenBanner .infoWrapper { width: 70%; } } @media only screen and (max-width: 1549px) { .packageWrapper { gap: 25px; } } @media only screen and (max-width: 1500px) { .newsArticleBox { width: 55%; } .testimonyBox { font-size: 8px; padding: 0 var(--mainPadding); } #contact.container { grid-template-columns: 1fr; } #contact h2 { text-align: center; font-size: 5.5rem; padding-right: 0; padding-bottom: var(--headingPadding); } #contact h2 span { display: inline-block; } #contact textArea, #contact .inputWrapper input { padding: 10px; } .greenBanner .infoWrapper { width: 100%; } } @media only screen and (max-width: 1474px) { #landing.container { /* Master landing font-size: */ font-size: 9px; } .packageWrapper { grid-template-columns: repeat(2, 1fr); gap: 50px; } .packageOptBox h4 { font-size: 3em; } .packageOptBox { align-items: center; text-align: center; padding: 50px 100px; } .testimonyBox { font-size: 5.5px; } } @media only screen and (max-width: 1200px) { #landing.container { /* Master landing font-size: */ font-size: 8px; } #landing h1 { line-height: 100px; } /* #landing h1 span { display: inline; } */ #about .infoWrapper { text-align: center; justify-content: center; align-items: center; } #about .imgWrapper { display: none; } #about.container { display: flex; justify-content: center; align-items: center; } #services.container { padding: 0!important; } #services h2 { padding-top: var(--mainPadding); text-align: center; } .servicesWrapper { grid-template-columns: repeat(2, 1fr); padding: var(--mainPadding); padding-top: 4.5rem; margin: 0; } #services .infoWrapper { position: relative; display: block; max-width: 100vw; min-width: 0; padding: calc(var(--mainPadding) / 5) var(--mainPadding); border-radius: 0; color: var(--whiteColor); text-align: center; background: var(--greenColor); } .greenBanner .infoWrapper { flex-direction: column; text-align: center; justify-content: center; align-items: center; width: 100%; } .greenBanner div { width: 100%!important; padding-bottom: 25px; } .greenBanner div:last-child { padding-bottom: 0; } .packageOptBox { padding: 50px 50px; } .newsArticleBox { width: 75%; } .testimonyBox { font-size: 6px; } #testimonies.container { padding: 100px 50px; } .testimony { padding-top: 50px; padding-bottom: 0; } } @media only screen and (max-width: 1024px) { #packages.container h2 span.break { display: inline-block; } #packages h2 { margin: 0 25px; } .packageWrapper { gap: 50px; } .packageOptBox { padding: 50px 25px; } .testimonyBox { font-size: 5px; } #testimonies .dp { width: 8rem; height: 8rem; } } @media only screen and (max-width: 900px) { #landing h1 { font-size: 9.4em; } #landing h2 { font-size: 30px; } .serviceOptBox { padding: var(--mainPadding) 15px; } .serviceOptBox h4 { font-size: 20px; } .packageWrapper { grid-template-columns: 1fr; padding: 0 25%; } .newsArticleBox { width: 100%; margin-right: 10px; } .newsArticleBox div:nth-of-type(3) { position: relative; top: 20px; } #testimonies .dp { width: 7rem; height: 7rem; } } @media only screen and (max-width:800px) { /* .container { padding: 50px 50px ; } */ #landing.container { padding: 0 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; } #landing h1 { font-size: 8.5em; text-align: center; line-height: normal; margin: 0 auto; } #landing h2 { font-size: 30px; text-align: center; width: 100%; } #landing div { display: flex; justify-content: center; align-items: center; width: 100%; } .servicesWrapper { grid-template-columns: 1fr; /* padding: calc(var(--mainPadding) * 2); */ } .serviceOptBox { padding: 50px 25px; font-size: 13px; height: auto; } #services .contentWrapper { position: relative; padding: 30px 0 0 0; } .serviceOptBox .iconWrapper i { font-size: 60px; } .serviceOptBox h4 { font-size: 25px; } } @media only screen and (max-width: 700px) { #landing h1 { font-size: 7.5em; margin-top: 25px; } #services .infoWrapper { display: none; } .packageWrapper { grid-template-columns: 1fr; padding: 0 15%; } .testimonyBox { font-size: 3px; } #contact .inputWrapper { flex-direction: column; } #contact textarea { min-height: 30vh; } #contact form div:last-child { justify-content: center; } #testimonies.container { padding: 100px 0px; } .testimonyBox { font-size: 5px; } #testimonies .flickity-button { display: none; } } @media only screen and (max-width: 600px) { #landing h1 { font-size: 5.5em; } #landing h2 { font-size: 3em; } .testimonyBox { font-size: 4.5px; } .container, #about .infoWrapper, #services div .inforWrapper, .servicesWrapper { padding: 50px 25px; } .greenBanner.container { padding: 100px 25px; } } @media only screen and (max-width: 550px) { #landing.container div { flex-direction: column; margin-bottom: -125px; } #landing.container div a { margin-bottom: 25px; } #news h2 { text-align: center; } } @media only screen and (max-width: 500px) { #landing h1 { font-size: 5.5em; } .testimonyBox { font-size: 3px; padding: 0 5rem; } #testimonies .name { font-size: 4em } .packageOptBox div { position: relative; top: 0px; } .packageOptBox { height: auto; } } @media only screen and (max-width: 430px) { #landing h1 { font-size: 4.2em; } .packageWrapper { padding: 0 10%; } .packageOptBox { padding: 50px 25px; } .greenBanner .infoWrapper div:last-of-type { flex-direction: column; justify-content: space-between; align-items: center; } .greenBanner .infoWrapper div:last-of-type a:first-child { margin-bottom: 25px; } #news .flickity-button { display: none; } .newsArticleBox .imgWrapper { height: 300px; } .testimonyBox { font-size: 3px; } #testimonies .name { font-size: 4em } } @media only screen and (max-width: 350px) { /* .newsArticleBox .imgWrapper { height: 250px; } */ #landing h1 { font-size: 3.8em; } .packageWrapper { padding: 0 0%; gap: 0px; } .packageOptBox { padding: 40px 25px; border-radius: 0; box-shadow: none; } .testimonyBox { font-size: 3px; padding: 0 2.5rem; } #testimonies .name { font-size: 4em } } @media only screen and (max-width: 305px) { .testimonyBox .displayPic { /* TARGET ALL DIVS WITH DP */ display: flex; flex-direction: column; background: chartreuse; align-items: center; justify-content: center; } } @media only screen and (max-width: 300px) { .servicesWrapper { display: block; } .serviceOptBox { margin-bottom: 30px; } }
| ver. 1.4 |
Github
|
.
| PHP 7.0.33-0ubuntu0.16.04.16 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка