Pibd-21_Ievlewa_M.D._Intern.../style.css

443 lines
8.4 KiB
CSS
Raw Normal View History

2023-12-03 19:52:09 +04:00
@font-face {
font-family: 'Correction Tape';
src: url('https://fonts.cdnfonts.com/css/correction-tape');
}
head{
background-color: #3E3333;
font-family: 'Correction Tape', sans-serif;
color: #ffffff;
}
header nav {
font-family: 'Correction Tape', sans-serif;
background-color:#2F2727;
}
@media (min-width: 768px) {
header nav {
height: 54px;
}
}
header nav a:hover {
font-family: 'Correction Tape', sans-serif;
text-decoration: overline rgb(255, 119, 0);
}
body{
background-color: #3E3333;
font-family: 'Correction Tape', sans-serif;
color: #ffffff;
}
footer {
font-family: 'Correction Tape', sans-serif;
background-color: #2F2727;
height: 32px;
color: #ffffff;
2023-12-06 20:36:44 +04:00
2023-12-03 19:52:09 +04:00
}
h1 {
font-size: 1.75em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 9em;
}
2023-12-06 20:36:44 +04:00
#image-preview {
width: 200px;
}
2023-12-03 19:52:09 +04:00
/*------------------------VIDEO-CONTAINER-----------------*/
#video-container {
position: fixed;
left: 0px;
width: 100%;
height:100%;
}
#video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
#video-container .text-button-overlay {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.text-button-overlay .text-overlay {
font-size: 120px;
white-space: nowrap;
}
.text-button-overlay .underText-overlay {
font-size: 50px;
color:#fafafa;
white-space: nowrap;
}
.text-button-overlay .underText-overlay-about {
font-size: 20px;
color:#ffffff;
white-space: nowrap;
}
.text-button-overlay .underText-overlay-about-orange {
font-size: 25px;
color:#ff5500;
white-space: nowrap;
}
.text-button-overlay .button-overlay {
margin-top: 5%;
}
.text-button-overlay .button-row {
display: flex;
justify-content: center;
margin-top: 2%;
}
.button-row button {
padding: 1%;
background-color: #ff5500;
color: #fff;
border: none;
border-radius: 4px;
font-size: 34px;
}
.button-row button:hover {
background-color: #5233ff;
color:aqua;
}
.button-overlay button {
padding: 2%;
background-color: #ff5500;
color: #fff;
border: none;
border-radius: 4px;
font-size: 44px;
}
.button-overlay button:hover {
background-color: #5233ff;
color:aqua;
}
/*-----------------------------------------MENU-WRAPPER-------------------------------------*/
#menu-wrapper {
position: fixed;
top: 56px;
left: -250px;
width: 250px;
height: 100%;
background-color: #2F2727;
transition: left 0.3s ease;
z-index: 1;
}
#menu-wrapper.open {
left: 0;
}
#menu {
padding: 20px;
}
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
margin-bottom: 10px;
}
#menu a {
text-decoration: none;
color: #fafafa;
font-size: 25px;
z-index: 1;
}
#toggle-menu {
cursor: pointer;
font-weight: bold;
padding: 10px;
}
#content {
margin-left: 250px;
padding: 20px;
}
/*---------------------------------Elements--------------------------------*/
.button-overlayAdd button:hover {
background-color: #5233ff;
color:aqua;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
grid-gap: 5%;
}
.product {
background-color: #2F2727;
padding: 2%;
border: 5px solid #1b1818;
border-radius: 5px;
text-align: center;
}
.product img {
border: 4px solid #1b1818;
border-radius: 5px;
max-width: 100%;
height: auto;
margin-bottom: 2%;
}
.product-info {
font-size: 20;
flex-basis: 50%;
}
.product-info h2 {
margin-top: 5;
}
.product-info p {
margin-bottom: 6%;
}
/*---------------------------------detailPAge----------------------------------*/
#image-container {
position:relative;
width: 100%;
height: 50%;
}
#image-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
#image-container .text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 90px;
}
#container1 {
position:relative;
padding: 2%;
display: grid;
/* Три колонки */
grid-template-columns: 68% 30%;
/* Два ряда */
grid-template-rows: auto auto;
/* Автоматическое размещение в ряд */
grid-auto-flow: row dense;
/* Отступы между ячейками */
gap: 2%;
}
.row1 {
/* Занимает один ряд и
растягивается на две колонки */
grid-column: span 2;
}
.info {
background-color: #2F2727;
padding: 2%;
border: 5px solid #1b1818;
border-radius: 5px;
text-align: center;
word-wrap: break-word;
margin-bottom: 2%;
}
.info-text {
font-size: 20;
flex-basis: 50%;
}
.button-overlayAdd button:hover {
background-color: #5233ff;
color:aqua;
}
/*----------------------------------LKADMIN----------------------------------*/
#AdmContainer{
position: relative;
height: 100%;
width: 100%;
background-color: #2F2727;
border-radius: 5px;
margin-right: 2%;
display: grid;
/* Три колонки */
grid-template-columns: 65% 33%;
/* Два ряда */
grid-template-rows: auto auto;
/* Автоматическое размещение в ряд */
grid-auto-flow: row dense;
/* Отступы между ячейками */
gap: 2%;
}
.containerPrAdm {
height:fit-content;
padding:1%;
display: grid;
grid-template-columns: repeat(4, 200px);
}
.inline {
display: inline;
font-size: 24px;
font-style: oblique;
}
.btn-primary{
background-color: #ff5500;
border-radius: 4px;
}
/*----------------------------------@MEDIA-----------------------------------*/
@media (max-width: 1200px) {
#video-container .text-button-overlay .text-overlay {
font-size: 70px;
}
#video-container .text-button-overlay .underText-overlay {
font-size: 35px;
}
#video-container .text-button-overlay .button-overlay{
margin: 10px;
}
#video-container .text-button-overlay .button-overlay button{
padding: 5px 5px;
font-size: 35px;
}
#video-container .text-button-overlay .button-row{
margin: 10px;
}
#video-container .text-button-overlay .button-row button{
padding: 5px 5px;
font-size: 35px;
}
#video-container .text-button-overlay .underText-overlay-about{
font-size: 0px;
}
}
@media (max-width: 650px) {
#video-container .text-button-overlay .text-overlay {
font-size: 50px;
}
#video-container .text-button-overlay .underText-overlay {
font-size: 25px;
}
#video-container .text-button-overlay .button-overlay{
margin: 5px;
}
#video-container .text-button-overlay .button-overlay button{
padding: 5px 5px;
font-size: 25px;
}
#video-container .text-button-overlay .button-row{
margin: 5px;
}
#video-container .text-button-overlay .button-row button{
padding: 5px 5px;
font-size: 25px;
}
#video-container .text-button-overlay .underText-overlay-about{
font-size: 0px;
}
#video-container .text-button-overlay .text-button-overlay .underText-overlay-about-orange {
font-size: 15px;
}
}
@media (max-width: 370px) {
#video-container .text-button-overlay .text-overlay {
font-size: 30px;
}
#video-container .text-button-overlay .underText-overlay {
font-size: 15px;
}
#video-container .text-button-overlay .button-overlay{
margin: 5px;
}
#video-container .text-button-overlay .button-overlay button{
padding: 5px 5px;
font-size: 15px;
}
#video-container .text-button-overlay .button-row{
margin: 5px;
}
#video-container .text-button-overlay .button-row button{
padding: 5px 5px;
font-size: 15px;
}
#video-container .text-button-overlay .underText-overlay-about{
font-size: 0px;
}
#video-container .text-button-overlay .text-button-overlay .underText-overlay-about-orange {
font-size: 10px;
}
}
@media (max-width: 768px) {
#menu-wrapper {
width: 100%;
left: -100%;
transition: left 0.3s ease;
}
#menu-wrapper.open {
left: 0;
}
#content {
margin-left: 0;
}
.product {
flex-direction: column;
}
.product-img,
.product-info {
flex-basis: 100%;
margin-right: 0;
}
}