Файловый менеджер - Редактировать - /var/www/sturrock/tamer/assets/css/team.css
Назад
#team .banner { background-image: url(https://www.octanner.com/content/dam/oc-tanner/images/v2/insights/articles/2020/january/2020_01_10PricelessTeamwork_hero.jpg); /* background-color: black; */ } #team p { color: var(--fontColor); } #team h1 { text-align: center; } #team .container > h2 { padding-bottom: 100px; } #teamMembers.container { min-height: auto; } .teamWrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; /* width: 825px; */ width: 75%; margin: 0 auto; padding: 0; } .employeeBox { /* height: 380px; width: 250px; */ height: 100%; width: 100%; margin: 0 auto; position: relative; background: cornflowerblue; box-shadow: 0px 0px 30px rgba(0,0,0,.3); border-radius: 5px; overflow: hidden; } .employeeInfo { width: 100%; height: 100%; padding: 20px; display: none; /* display: flex; */ flex-direction: column; justify-content: flex-end; position: absolute; align-items: flex-start; color: var(--whiteColor); background: rgba(25, 198, 125, .5); background-blend-mode: overlay; /* Master font-size for employeeBox (orginal 9px): */ font-size: 14px; } .employeeInfo h3.name { font-size: 2em; text-align: left; padding: 0; font-weight: bolder; text-transform: uppercase; } #team .employeeInfo p { font-size: 1.3em; color: var(--whiteColor); padding-bottom: 10px; } .employeeInfo .title { font-size: 1.6; font-weight: bold; } .employeeInfo .bio { padding-bottom: 0; } .employeeBox:hover .employeeInfo { display: flex; } .employeeBox img { width: 100%; height: 100%; } /* --- Content/ Info: --- */ #content.container { position: relative; min-height: auto; } #content.container h2 { padding-bottom: 25px; } /* --- Greenbar: --- */ .greenRectangle { position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; width: 100vw; height: 350px; z-index: -10; background: var(--greenColor); } /* --- Licensed tax agent: --- */ #team .contentBox { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr; } #team .contentBox:first-of-type { margin-bottom: 100px; } #team #info-1.contentBox .infoWrapper { z-index: 0; height: 75%; width: 50vw; align-self: center; justify-self: self-end; padding: var(--mainPadding); background: var(--whiteColor); grid-column: 4/12; grid-row: 1/2; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; box-shadow: 0px 10px 15px rgba(0, 0, 0, .1); } #info-1 .infoWrapper div { width: 70%; } #team .contentBox div { box-shadow: none; } #team #info-1 .contentImg{ /* THIS IMAGE HEIGHT MUST BE 580px PLUS. */ background: url(../img/office1.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; grid-column: 2/7; grid-row: 1/2; overflow: hidden; max-width: 780px; max-height: auto; z-index: 10; box-shadow: 0px 10px 15px rgba(0, 0, 0, .1); } /* --- How we can help you: --- */ #team #info-2.contentBox .infoWrapper { z-index: 0; height: 75%; width: 50vw; align-self: center; padding: var(--mainPadding); background: var(--whiteColor); grid-column: 2/-1; grid-row: 1/2; box-shadow: 0px 10px 15px rgba(0, 0, 0, .1); } #info-2 .infoWrapper div { width: 70%; } #team #info-2 .contentImg { /* THIS IMAGE HEIGHT MUST BE 580px PLUS. */ background: url(../img/office2.png); background-repeat: no-repeat; background-position-x: center; background-position-y: center; grid-column: 7/ 12; grid-row: 1/2; overflow: hidden; max-width: 780px; max-height: auto; z-index: 10; box-shadow: 0px 10px 15px rgba(0, 0, 0, .1); } /* --- What makes us unique?: --- */ #team .contentBanner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 100px 200px; align-content: center; color: var(--whiteColor); background:url(../img/bannerBg1.png); background-repeat: no-repeat; background-size: cover; /* min-height: 65vh; */ } #team .contentBanner h2{ padding: 0; align-self: center; } #team .contentBanner p { color: var(--whiteColor); } /* --- Media Queries: --- */ @media only screen and (max-width: 1920px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 10px; } .teamWrapper { width: 100%; } } @media only screen and (max-width:1500px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 9px; } } @media only screen and (max-width:1280px) { .teamWrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin: 0 auto; padding: 0; } .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 12px; } .employeeInfo { display: flex; background: rgb(0,0,0); background: -moz-linear-gradient(360deg, rgba(0,0,0,0.500437675070028) 0%, rgba(0,0,0,0) 49%); background: -webkit-linear-gradient(360deg, rgba(0,0,0,0.500437675070028) 0%, rgba(0,0,0,0) 49%); background: linear-gradient(360deg, rgba(0,0,0,0.500437675070028) 0%, rgba(0,0,0,0) 49%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); } #team .contentBanner { gap: 50px; } #team .contentBox { display: flex; align-items: center; justify-content: center; } #info-1 .infoWrapper div, #info-2 .infoWrapper div { width: 100%; } #team #info-1.contentBox .infoWrapper, #team #info-2.contentBox .infoWrapper { text-align: left; width: 100%; margin: 0; } #content.container { padding-top: 0px; } #content .contentImg { display: none; } #content.container { background: var(--greenColor); padding: 100px; } .greenRectangle { display: none; } } @media only screen and (max-width:1024px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 9px; } #team .contentBanner { grid-template-columns: 1fr; text-align: left; } } @media only screen and (max-width:900px) { #team #info-1.contentBox .infoWrapper, #team #info-2.contentBox .infoWrapper { padding: 50px; margin: 0; text-align: left; align-items: center; } } @media only screen and (max-width:800px) { #teamMembers.container, #content.container { padding: 100px 25px; } #team .contentBox:first-of-type { margin-bottom: 25px; } #team .contentBanner { padding: 100px 2; } #team .contentBanner { padding: 100px 50px; } } @media only screen and (max-width:600px) { #teamMembers.container, #content.container { padding: 50px; } #team .contentBanner { padding: 50px; } .teamWrapper { grid-template-columns: repeat(1, 1fr); } .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 14px; } #team .contentBanner { gap: 25px; } #team .featureParagraph { padding: 0 0 50px 0; } #team #info-1.contentBox .infoWrapper, #team #info-2.contentBox .infoWrapper { width: 100vw; } #team .contentBox:first-of-type { margin-bottom: 50px; } } @media only screen and (max-width:450px) { #content.container { padding: 0; background: none } #team #info-2.contentBox .infoWrapper, #team .contentBanner { padding: 50px; box-shadow: none; } #team #info-1.contentBox .infoWrapper { padding: 0 50px; box-shadow: none; } #team .contentBox:first-of-type { margin-bottom: 0px; } } @media only screen and (max-width:399px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 12px; } } @media only screen and (max-width:325px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 10px; } #team .featureParagraph { padding: 0 0 25px 0; } #teamMembers.container, #content.container, #team .contentBanner { padding: 25px; } #team #info-1.contentBox .infoWrapper, #team #info-2.contentBox .infoWrapper { padding: 0; } #team #info-1.contentBox .infoWrapper { padding-bottom: 25px; } .teamWrapper { gap: 25px } } @media only screen and (max-width:300px) { #team h2 { font-size: 5rem; } } @media only screen and (max-width:270px) { .employeeInfo { /* Master font-size for employeeBox (orginal 9px): */ font-size: 9px; } #team h2 { font-size: 4.5rem; } }
| ver. 1.4 |
Github
|
.
| PHP 7.0.33-0ubuntu0.16.04.16 | Генерация страницы: 0.01 |
proxy
|
phpinfo
|
Настройка