Skip to content

Commit

Permalink
Little changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@slenderik
slenderik committed Feb 15, 2024
1 parent 965487c commit 71bf3d0
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 85 deletions.
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@
<body>
<header>
<a href="index.html">
<img src='assets/images/logo.svg' alt=''>
<img src='assets/images/logo.svg' alt='Логотип My-Omsk ✨' aria-hidden="true">
</a>
</header>

<div class="wrapper">
<div class="title-container ">
<div class="title-container centered-container">
<h1>Куда сегодня сходить в Омске?</h1>
</div>

Expand Down Expand Up @@ -82,7 +82,7 @@ <h2>Категории</h2>
<!-- Category header -->
<div class="category-container">
<h2>Лучшие кафе сегодня</h2>
<a class="no-link category-container-all" href="categories/cafe">
<a class="no-link category-container__all-link" href="categories/cafe">
<p>Все ></p>
</a>
</div>
Expand Down Expand Up @@ -141,7 +141,7 @@ <h2>Лучшие кафе сегодня</h2>
<!-- Category header -->
<div class="category-container">
<h2>Помните памятники?</h2>
<a class="no-link category-container-all" href="categories/cafe">
<a class="no-link category-container__all-link" href="categories/cafe">
<p>Все ></p>
</a>
</div>
Expand Down
177 changes: 118 additions & 59 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
}


/*
small android 300+ px
big android 400+ px
*/

:root {
--color-black: black;
--color-white: white;
Expand Down Expand Up @@ -39,12 +44,25 @@


/* Default elements */

body {
font-family: 'Inter', sans-serif;

font-size: 17px;
@media (min-width: 1000px) {
font-size: 24px;
font-size: 20px;
}
}

header {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 15px;
height: 50px;

@media (max-width: 1000px) {
height: 30px;
}
}

Expand All @@ -53,7 +71,7 @@ h1 {
font-weight: normal;

@media (min-width: 1000px) {
font-size: 64px;
font-size: 40px;
}
}

Expand All @@ -69,7 +87,6 @@ h2 {
}
}


a {
text-decoration: none;
color: var(--color-black);
Expand All @@ -82,33 +99,26 @@ img {
width: auto;
}
}
/* End of default elements */



header {
display: flex;
align-items: center;
justify-content: center;
padding: 0px 15px 0px 15px;
height: 50px;

@media (min-width: 1000px) {
}
hr {
color: var(--color-gray);
margin-top: 30px;
margin-bottom: 10px;
}

/* End of default elements */


.wrapper {
width: 95%;
margin: auto;

@media (min-width: 1000px) {
@media (min-width: 1250px) {
width: 1200px;
}
}



/* Place of the day */
.day-place {

Expand Down Expand Up @@ -158,7 +168,7 @@ header {
background-color: var(--color-black);

height: 52px;
min-width: 300px;
width: 100%;
border-radius: 15px;
}
.button-black:hover {
Expand All @@ -173,29 +183,37 @@ header {
justify-content: center;

border-radius: 20px;
padding: 8px 15px 8px 15px;
padding: 8px 15px;

color: var(--color-black);
background-color: var(--color-white);

@media (min-width: 1000px) {
/* Адаптация под телефон */

border-radius: 20px;
padding: 4px 10px 4px 10px;
padding: 4px 10px;
}

@media (max-width: 400px) {
display: none;
}
}
/* End of design system elements */


.centered-container {
display: flex;
align-items: center;
justify-content: center;
}

.category-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.category-container-all {
.category-container__all-link {
display: none;
color: var(--color-gray);

Expand All @@ -206,6 +224,7 @@ header {
}


/* PLACE LIST ON MAIN */

.places-list {
/* По умолчанию настройки под телефон */
Expand Down Expand Up @@ -237,40 +256,12 @@ header {
border-radius: 20px;
}


hr {
color: var(--color-gray);
margin-top: 30px;
margin-bottom: 10px;
}


.footer-inner {
display: flex;
justify-content: space-between;
}


.social-media {
list-style: none;
padding-inline-start: 0px;
}

.social-media__item > img, li {
width: 40px;
height: 40px;
display: inline;

@media (min-width: 1000px) {
width: 40px;
height: 40px;
}
}
/* END OF PLACE LIST ON MAIN */


/* PLACE STYLES */

.work-time-container {
.place-image__left-container {
gap: 8px;
display: flex;
align-items: flex-end;
Expand All @@ -295,15 +286,21 @@ hr {
width: 100%;
bottom: 25px;
position: absolute;

@media (max-width: 600px) {
display: block;
justify-content: none;
bottom: 10px;
left: 5px;
}
}

.place-title-container__text {
font-size: 40px;
color: var(--color-white);

@media (max-width: 1000px) {
font-size: 30px;
content: "Terra Coffe";
font-size: 25px;
}
}

Expand All @@ -317,7 +314,11 @@ hr {
width: 100%;
}

.place-information {
.place-information-container {
gap: 20px;
display: flex;
flex-direction: column;

z-index: 2;
position: relative;
border-radius: 10px;
Expand All @@ -340,19 +341,77 @@ hr {
background-color: var(--color-gray);
}


.button-back {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-white);

left: 33px;
top: 20px;
top: 1vw;
left: 1.75vw;
position: absolute;

width: 67px;
height: 46px;
border-radius: 20px;

@media (max-width: 1000px) {


width: 45px;
height: 30px;
}

@media (max-width: 400px) {
top: 5px;
left: 10px;

width: 45px;
height: 30px;
}
}

.button-back__image {
width: 34px;
height: 30px;

@media (max-width: 1000px) {
width: 25px;
height: 20px;
}

@media (max-width: 400px) {
width: 25px;
height: 20px;
}
}
/* PLACE STYLES */
/* END OF PLACE */



/* FOOTER StYLES */

.footer-inner {
display: flex;
justify-content: space-between;
}


.social-media {
list-style: none;
padding-inline-start: 0px;
font-size: 16px;
}

.social-media__item > img, li {
width: 40px;
height: 40px;
display: inline;

@media (min-width: 1000px) {
width: 40px;
height: 40px;
}
}

/* END FOOTER */
Loading

0 comments on commit 71bf3d0

Please sign in to comment.