mirror of
https://github.com/robonen/metr.git
synced 2026-03-20 10:54:41 +00:00
Добавлен профиль, каталог и объявление
This commit is contained in:
zak1qel
366
frontend/raw/assets/css/advertisment.css
Normal file
366
frontend/raw/assets/css/advertisment.css
Normal file
@@ -0,0 +1,366 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("../../fonts/StapelS/style.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
background: black;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header__table {
|
||||
width: 1052px;
|
||||
height: 100px;
|
||||
border: 2px solid white;
|
||||
margin: 50px auto 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.header__image {
|
||||
width: 140px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: url("../images/metr.svg") center
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block {
|
||||
width: 145px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__search {
|
||||
width: 426px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search__block {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.search__img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.header__contacts {
|
||||
width: 46px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header__contacts__imgtop {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__contacts__img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.header__block__content {
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.header__block__contenttop {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block__contentbott {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.nav__link_tomsk {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.nav__link:hover, .nav__link_tomsk:hover {
|
||||
color: #389EEB;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
|
||||
/* Intro */
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 170vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 250px;
|
||||
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||
"../images/intro.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adv__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adv__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.adv__main__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mprice__fav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.favorite {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
}
|
||||
|
||||
.favoritext {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.favoritextinf {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adv__main__images {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.other__images {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.other__images a{
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.adv__host {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adv__host__about__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 3% 0;
|
||||
}
|
||||
|
||||
.host__stat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 3% 0;
|
||||
}
|
||||
|
||||
.stat {
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
border-radius: 5px;
|
||||
margin: 3% 0;
|
||||
padding: 10% 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.message {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
border-radius: 5px;
|
||||
margin: 3% 0;
|
||||
}
|
||||
|
||||
.userlogo {
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.about__adv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 23%;
|
||||
}
|
||||
|
||||
.about__adv__info {
|
||||
|
||||
}
|
||||
|
||||
.about__adv__descriptions {
|
||||
|
||||
}
|
||||
|
||||
.reviews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 23%;
|
||||
}
|
||||
|
||||
.reviews__blocks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.review {
|
||||
width: 730px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
border-radius: 5px;
|
||||
margin: 1% 0;
|
||||
}
|
||||
|
||||
.review__stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
533
frontend/raw/assets/css/catalog.css
Normal file
533
frontend/raw/assets/css/catalog.css
Normal file
@@ -0,0 +1,533 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("../../fonts/StapelS/style.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
background: black;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header__table {
|
||||
width: 1052px;
|
||||
height: 100px;
|
||||
border: 2px solid white;
|
||||
margin: 50px auto 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.header__image {
|
||||
width: 140px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: url("../images/metr.svg") center
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block {
|
||||
width: 145px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__search {
|
||||
width: 426px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search__block {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.search__img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.header__contacts {
|
||||
width: 46px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header__contacts__imgtop {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__contacts__img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.header__block__content {
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.header__block__contenttop {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block__contentbott {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.nav__link_tomsk {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.nav__link:hover, .nav__link_tomsk:hover {
|
||||
color: #389EEB;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
|
||||
/* Intro */
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content:center;
|
||||
padding-top: 250px;
|
||||
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
|
||||
"../images/intro.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.intro__text {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro__title {
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newhome {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.intro__subtitle {
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.intro_footer {
|
||||
width: 1050px;
|
||||
height: 80px;
|
||||
margin: 300px auto 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.intro__btn {
|
||||
width: 185px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
|
||||
}
|
||||
|
||||
.intro__button {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
margin: 0 auto;
|
||||
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.intro__button:hover {
|
||||
color: #0f171d;
|
||||
font-weight: 600;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
|
||||
.intro__odnushka {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.odnushka {
|
||||
font-size: 17px;
|
||||
color: black;
|
||||
background: white;
|
||||
text-decoration: none;
|
||||
padding: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.odnushka__price {
|
||||
width: 115px;
|
||||
font-size: 17px;
|
||||
text-decoration: none;
|
||||
padding: 2px;
|
||||
font-weight: 900;
|
||||
color: black;
|
||||
background: white;
|
||||
font-family: 'Inter';
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-family: 'Inter';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* About */
|
||||
|
||||
.about {
|
||||
height: 100vh;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.about__title {
|
||||
padding-left: 10%;
|
||||
padding-top: 50px;
|
||||
font-size: 40px;
|
||||
font-family: 'Stapel';
|
||||
}
|
||||
|
||||
.video {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 1300px;
|
||||
height: 590px;
|
||||
border: 1px solid black;
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
|
||||
"../images/video.jpg");
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
.about__us {
|
||||
margin-right: 5%;
|
||||
font-family: 'Inter';
|
||||
font-weight: 100;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* Suggestions */
|
||||
|
||||
.suggestions {
|
||||
padding-top: 10%;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.suggestions__title {
|
||||
font-size: 25px;
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.suggestions__images {
|
||||
margin: 2% 12%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sugg__img {
|
||||
flex-basis: 30%;
|
||||
height: 460px;
|
||||
margin: 4% 0 1% auto;
|
||||
background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
|
||||
transition: transform .2s linear;
|
||||
}
|
||||
|
||||
.afterword {
|
||||
margin: 0 5% 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.after__afterword {
|
||||
font-weight: 600;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.gradient:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.podlozhka {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.podlozhka:hover .sugg__img {
|
||||
transform: translate3d(-10px, -10px, 0);
|
||||
}
|
||||
|
||||
|
||||
.podlozhka:hover .sugg__img img {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sugg__img img {
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
.sugg__text {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
opacity: 1;
|
||||
transition: opacity .2s linear;
|
||||
padding-bottom: 20%;
|
||||
}
|
||||
|
||||
.sugg__text p {
|
||||
width: 220px;
|
||||
color: white;
|
||||
font-family: 'Inter';
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
margin: 0 auto 0 2%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sugg__text h2 {
|
||||
width: 200px;
|
||||
font-weight: 600;
|
||||
margin: 0 auto 0 2%;
|
||||
color: white;
|
||||
font-family: 'Inter';
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.parametrs__block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
margin: 2% 40% 2% 10%;
|
||||
}
|
||||
|
||||
.parametrs {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prm {
|
||||
width: 20%;
|
||||
height: 150%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-family: 'Inter';
|
||||
font-size: 10px;
|
||||
background-color: rgba(26, 137, 201, 1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.prm__inside {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.prm__text {
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
.prm__inside img {
|
||||
padding-top: 20%;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
|
||||
.footer {
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 1%;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
}
|
||||
|
||||
.footer__search {
|
||||
width: 300px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.footer__contacts {
|
||||
width: 165px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer__contacts__imgtop {
|
||||
width: 165px;
|
||||
height: 48px;
|
||||
border-bottom: 2px solid white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer__contacts__img {
|
||||
width: 166px;
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
}
|
||||
270
frontend/raw/assets/css/profile.css
Normal file
270
frontend/raw/assets/css/profile.css
Normal file
@@ -0,0 +1,270 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("../../fonts/StapelS/style.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: rgba(124, 173, 201, 1);
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
background: black;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.header__table {
|
||||
width: 1052px;
|
||||
height: 100px;
|
||||
border: 2px solid white;
|
||||
margin: 50px auto 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.header__image {
|
||||
width: 140px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: url("../images/metr.svg") center
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block {
|
||||
width: 145px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.header__search {
|
||||
width: 426px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
border-right: 2px solid white;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
padding-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search__block {
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 20px;
|
||||
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.search__img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.header__contacts {
|
||||
width: 46px;
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header__contacts__imgtop {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__contacts__img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.header__block__content {
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
padding-top: 35px;
|
||||
}
|
||||
|
||||
.header__block__contenttop {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.header__block__contentbott {
|
||||
width: 145px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.nav__link_tomsk {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.nav__link:hover, .nav__link_tomsk:hover {
|
||||
color: #389EEB;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
|
||||
/* Intro */
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 250px;
|
||||
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||
"../images/intro.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 0 10%;
|
||||
}
|
||||
|
||||
.user__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.user__logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding-left: 20%;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user__stat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2% 0 2% 5%;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 5%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
.user__hrefs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
width: 110%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.user__hrefs a{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__images {
|
||||
width: 105%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about_describtions {
|
||||
margin-top: 5%;
|
||||
}
|
||||
BIN
frontend/raw/assets/images/adv1.png
Normal file
BIN
frontend/raw/assets/images/adv1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
BIN
frontend/raw/assets/images/adv2.png
Normal file
BIN
frontend/raw/assets/images/adv2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
frontend/raw/assets/images/adv3.png
Normal file
BIN
frontend/raw/assets/images/adv3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
frontend/raw/assets/images/adv4.png
Normal file
BIN
frontend/raw/assets/images/adv4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
frontend/raw/assets/images/arrow.png
Normal file
BIN
frontend/raw/assets/images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
BIN
frontend/raw/assets/images/forcomment.png
Normal file
BIN
frontend/raw/assets/images/forcomment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
frontend/raw/assets/images/heart.png
Normal file
BIN
frontend/raw/assets/images/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
3
frontend/raw/assets/images/metr.svg
Normal file
3
frontend/raw/assets/images/metr.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="265" height="139" viewBox="0 0 265 139" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M264.708 0H0V139H264.708V0ZM127.614 71.5571V68.2211C127.614 63.7361 126.374 60.5113 123.894 58.5467C121.414 56.5822 117.656 55.5999 112.619 55.5999C107.201 55.5999 103.252 56.7119 100.772 58.9359C98.3295 61.1229 97.1085 64.9778 97.1085 70.5007C97.1085 75.8754 98.3486 79.6562 100.829 81.8431C103.309 83.993 107.258 85.0679 112.676 85.0679C117.56 85.0679 121.204 84.2525 123.608 82.6215C126.012 80.9906 127.347 78.1921 127.614 74.2259H117.999C117.732 76.7094 115.958 77.9511 112.676 77.9511C110.692 77.9511 109.204 77.4693 108.212 76.5055C107.258 75.5418 106.762 73.9294 106.724 71.6683V71.5571H127.614ZM106.724 68.6659V68.2211C106.8 66.2195 107.334 64.811 108.326 63.9955C109.318 63.143 110.73 62.7167 112.562 62.7167C114.355 62.7167 115.691 63.1801 116.568 64.1067C117.484 64.9963 117.942 66.5161 117.942 68.6659H106.724ZM62.2136 69.4999L70.1691 77.5619L78.1247 69.4999V84.2339H87.3966V56.4339H79.7272L70.1691 66.9423L60.611 56.4339H52.9416V84.2339H62.2136V69.4999ZM134.941 56.4339H162.871V63.5507H153.714V84.2339H144.098V63.5507H134.941V56.4339ZM181.922 78.5071C183.067 82.881 186.138 85.0679 191.137 85.0679C195.029 85.0679 197.89 84.0115 199.722 81.8987C201.553 79.7489 202.469 75.931 202.469 70.4451C202.469 64.9222 201.553 61.0673 199.722 58.8803C197.89 56.6934 195.029 55.5999 191.137 55.5999C188.695 55.5999 186.672 56.1745 185.07 57.3235C183.505 58.4726 182.456 60.085 181.922 62.1607H180.949V56.4339H171.334V94.2419H180.949V78.5071H181.922ZM180.949 67.7207C181.064 64.3847 182.971 62.7167 186.672 62.7167C189.038 62.7167 190.66 63.2357 191.537 64.2735C192.453 65.2743 192.911 67.3315 192.911 70.4451C192.911 73.4846 192.472 75.5047 191.595 76.5055C190.717 77.4693 189.076 77.9511 186.672 77.9511C182.857 77.9511 180.949 76.1905 180.949 72.6691V67.7207Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
frontend/raw/assets/images/star.png
Normal file
BIN
frontend/raw/assets/images/star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/raw/assets/images/star1.png
Normal file
BIN
frontend/raw/assets/images/star1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
BIN
frontend/raw/assets/images/starsmall.png
Normal file
BIN
frontend/raw/assets/images/starsmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/raw/assets/images/userlogo.png
Normal file
BIN
frontend/raw/assets/images/userlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
frontend/raw/assets/images/userlogosmall.png
Normal file
BIN
frontend/raw/assets/images/userlogosmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Reference in New Issue
Block a user