443 lines
8.4 KiB
CSS
443 lines
8.4 KiB
CSS
@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: #000000;
|
|
}
|
|
|
|
footer {
|
|
font-family: 'Correction Tape', sans-serif;
|
|
background-color: #2F2727;
|
|
height: 32px;
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.75em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1em;
|
|
}
|
|
h4 {
|
|
font-size: 9em;
|
|
}
|
|
#image-preview {
|
|
width: 200px;
|
|
}
|
|
/*------------------------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;
|
|
}
|
|
} |