Template: add capsules, try maps, move header to picture, add back bu…

…tton, back header in pc ver
slenderik · Feb 10, 2024 · 965487c · 965487c
1 parent a435238
commit 965487c
Show file tree

Hide file tree

Showing 7 changed files with 311 additions and 38 deletions.
diff --git a/assets/images/back.svg b/assets/images/back.svg
diff --git a/assets/places_images/terra x1.png b/assets/places_images/terra x1.png
diff --git a/assets/places_images/terra x2.png b/assets/places_images/terra x2.png
diff --git a/index.html b/index.html
@@ -92,19 +92,23 @@ <h2>Лучшие кафе сегодня</h2>
             <div class="places-list">
 
                 <article class="place-card">
-                    <div class="place-card__image">
-                        <img class="place-card__image" src="content/cafe-mesto-pro-testo.png"
-                        alt="Кафе место про тесто изнутри" loading="lazy">
-                    </div>
-                    <p>Место про тесто</p>
+                    <a class="no-link" href="template.html">
+                        <div class="place-card__image">
+                            <img class="place-card__image" src="content/cafe-mesto-pro-testo.png"
+                            alt="Кафе место про тесто изнутри" loading="lazy">
+                        </div>
+                        <p>Место про тесто</p>
+                    </a>
                 </article>
 
                 <article class="place-card">
-                    <div class="place-card__image">
-                        <img class="place-card__image" src="content/cafe-mesto-pro-testo.png"
-                        alt="Кафе место про тесто изнутри"loading="lazy">
-                    </div>
-                    <p>Место про тесто</p>
+                    <a class="no-link" href="template.html">
+                        <div class="place-card__image">
+                            <img class="place-card__image" src="content/cafe-mesto-pro-testo.png"
+                            alt="Кафе место про тесто изнутри"loading="lazy">
+                        </div>
+                        <p>Место про тесто</p>
+                    </a>
                 </article>
 
                 <article class="place-card">
@@ -188,22 +192,27 @@ <h2>Помните памятники?</h2>
 
             </div>
             <!-- Places list  -->
-
-            <hr>
-
         </div>
     </main>
 
     <footer>
-        <div class="wrapper footer-inner">
-            <p>К сожалению мы могли использовать чужие изображения.
-                Если хотите чтобы мы убрать изобрежение сообщите нам
-                <a class="no-link" href="https://vk.com/myomsk_app"><span class="color-telegram">в телеграмме</span></a> или
-                <a class="no-link" href="https://vk.com/myomsk_app"><span class="color-vkontakte">ВКонтакте</span></a>.</p>
-            <ul class="social-media"> 
-                <li><a class="social-media__item no-link" href="https://vk.com/myomsk_app" target="_blank"><img src="assets/images/VK Logo.svg" alt="Наша ВКонтакте страница"/></a></li>
-                <li><a class="social-media__item no-link" href="https://t.me/myomsk_app" target="_blank"><img src="assets/images/telegram logo.svg" alt="Наша Telegram канал"/></a></li>
-            </ul>
+        <div class="wrapper">
+            <hr>
+
+            <div class="footer-inner">
+                <p>К сожалению мы могли использовать чужие изображения.
+                    Если хотите чтобы мы убрать изобрежение сообщите нам
+                    <a class="" href="https://vk.com/myomsk_app"><span class="color-telegram">в телеграмме</span></a> или
+                    <a class="no-link" href="https://vk.com/myomsk_app"><span class="color-vkontakte">ВКонтакте</span></a>.
+                </p>
+                <p>
+                    Что-то работает ни так? Получили плохой опыт от места из нашего приложения? Сообщите нам — мы разберёмся.
+                </p>
+                <ul class="social-media"> 
+                    <li><a class="social-media__item no-link" href="https://vk.com/myomsk_app" target="_blank"><img src="assets/images/VK Logo.svg" alt="Наша ВКонтакте страница"/></a></li>
+                    <li><a class="social-media__item no-link" href="https://t.me/myomsk_app" target="_blank"><img src="assets/images/telegram logo.svg" alt="Наша Telegram канал"/></a></li>
+                </ul>
+            </div>
         </div>
     </footer>
 </body>

diff --git a/place.css b/place.css
diff --git a/styles.css b/styles.css
@@ -5,10 +5,12 @@
     font-style: normal;
 }
 
+
 *, *::before, *::after {
     margin: 0px;
 }
 
+
 :root {
     --color-black: black;
     --color-white: white;
@@ -18,6 +20,7 @@
     --color-vkontakte: #0077FF;
 }
 
+
 .light-blue {background-color: #C1E0FD;}
 .light-green {background-color: #DAFFCD;}
 .light-yellow {background-color: #FFF8BE;}
@@ -26,12 +29,22 @@
 .color-telegram {color: var(--color-telegram)}
 
 
+/*.name {
+    По умолчанию настройки под телефон
+
+    @media (min-width: 1000px) {
+        Адаптации под компьютер     
+    }
+*/
+
+
+/* Default elements */
 body {
     font-family: 'Inter', sans-serif;
 
-    font-size: 32px;
+    font-size: 17px;
     @media (min-width: 1000px) {
-        font-size: 17px;
+        font-size: 24px;
     }
 }
 
@@ -56,34 +69,35 @@ h2 {
     }
 }
 
-.no-link {
+
+a {
     text-decoration: none;
     color: var(--color-black);
 }
 
-.white-text {
-    color: var(--color-white);
-}
-
 img {
     width: 100%;
 
     @media (min-width: 1000px) {
         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) {
-        display: none;
     }
 }
 
+
 .wrapper {
     width: 95%;
     margin: auto;
@@ -94,6 +108,8 @@ header  {
 }
 
 
+
+/* Place of the day */
 .day-place {
 
 }
@@ -112,34 +128,65 @@ header  {
 .day-place__inner-container {
 
 }
+/* Place of the day */
 
 
+
+/* Design system elements */
 .chips-container {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: scroll;
     gap: 10px
 }
-
 .chips-container::-webkit-scrollbar {
     width: 0;
 }
-
 .chip {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 
     height: 49px;
-    min-width: 146px;
     font-size: 20px;
+    min-width: 146px;
     border-radius: 15px;
 }
 
-.title-container {
+.button-black {
+    color: var(--color-white);
+    background-color: var(--color-black);
+
+    height: 52px;
+    min-width: 300px;
+    border-radius: 15px;
+}
+.button-black:hover {
+    cursor: pointer;
+    background-color: var(--color-gray);
+    font-style: bold;
+}
+
+.capsule-container {
     display: flex;
-    justify-content: center; 
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 20px;
+    padding: 8px 15px 8px 15px;
+
+    color: var(--color-black);
+    background-color: var(--color-white);
+
+    @media (min-width: 1000px) {
+        /* Адаптация под телефон */
+
+        border-radius: 20px;
+        padding: 4px 10px 4px 10px;
+    }
 }
+/* End of design system elements  */
+
 
 
 .category-container {
@@ -191,8 +238,6 @@ header  {
 }
 
 
-
-
 hr {    
     color: var(--color-gray);
     margin-top: 30px;
@@ -221,3 +266,93 @@ hr {
         height: 40px;
     }
 }
+
+
+/* PLACE STYLES */
+
+.work-time-container {
+    gap: 8px;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+
+
+    position: absolute;
+    right: 40px;
+    bottom: 25px;
+
+    @media (max-width: 1000px) {
+        right: 12px;
+        bottom: 8px;
+    }
+}
+
+.place-title-container {
+    display: flex;
+    justify-content: center;
+
+
+    width: 100%;
+    bottom: 25px;
+    position: absolute;
+}
+
+.place-title-container__text {
+    font-size: 40px;
+    color: var(--color-white);
+
+    @media (max-width: 1000px) {
+        font-size: 30px;
+        content: "Terra Coffe";
+    }
+}
+
+
+.place-image-container {
+    position: relative;
+}
+
+.place-image-container__image {
+    z-index: -1;
+    width: 100%;
+}
+
+.place-information {
+    z-index: 2;
+    position: relative;
+    border-radius: 10px;
+    background-color: var(--color-white);
+
+    margin-top: 0px;
+    margin-left: 2%;
+    margin-right: 2%;
+
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.place-description {
+    padding-top: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 15px;
+    border-radius: 25px;
+    background-color: var(--color-gray);
+}
+
+
+.button-back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-white);
+
+    left: 33px;
+    top: 20px;
+    position: absolute;
+
+    width: 67px;
+    height: 46px;
+    border-radius: 20px;
+}
+/* PLACE STYLES */