Микросетки на флексах для всех страниц #6

Alexandra0107 · 2024-11-12T15:15:06Z

…", разметка отображения карточек+нумерация страниц

🎓 Графика для всех страниц

🎓 Базовая стилизация всех страниц

💥 https://htmlacademy-htmlcss.github.io/2468767-sedona-1/6/

🎓 Сетка страниц и крупных блоков на флексах

🎓 Микросетки на флексах для всех страниц

…", разметка отображения карточек+нумерация страниц

Alexandra0107 · 2024-11-12T15:47:54Z

Оптимизация картинок

ustimenko-andrew · 2024-11-15T15:45:32Z

Catalog.html

            <div class="infrastructure">
-              <input type="checkbox" name="infrastructure" value="pool" id="infrastructure-pool" checked>
+              <input type="checkbox" name="infrastructure-pool" value="pool" id="infrastructure-pool" checked>


В checkbox используй один name, при выборе значений, будет происходит группировка по имени, то есть конечный результат name = [ список значений ]

ustimenko-andrew · 2024-11-15T15:50:10Z

Catalog.html

    </main>
    <footer class="main-footer">
      <ul class="social-list">
        <li class="social-list-item">
          <a href="https://vk.com/htmlacademy"><img src="./img/social_vk.svg" width="24.0001" height="14" alt="VK"></a>
        </li>
        <li class="social-list-item">
-          <a href="https://t.me/htmlacademy"><img src="./img/social _tg.svg" width="22" height="17" alt="Telegram"></a>
+          <a href="https://t.me/htmlacademy"><img src="./img/social_tg.svg" width="22" height="17" alt="Telegram"></a>


Названия картинок через дефис

ustimenko-andrew · 2024-11-15T15:51:07Z

index.html

+      <div class="welcome">
+        <div class="welcome2">
+          <div class="welcome3">
+          </div>
+        </div>
+      </div>


Чутка перебор с вложеностью, тут мы будет использовать img, так что нам будет достаточно 1 секции и нужного тега внутри

keksobot · 2024-11-19T05:21:26Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

добавление внутренних отступов

ustimenko-andrew · 2024-11-23T19:28:37Z

Catalog.html

@@ -181,14 +188,36 @@ <h2>Подпишитесь на рассылку</h2>
          <input type="submit" value="Подписаться">
        </form>
      </section>
+      <section>


Это больше будет nav, так как тут у нас навигация

ustimenko-andrew · 2024-11-23T19:29:51Z

css/style.css

+  text-decoration: none;
+}
+
+h1 {


Избегай селекторы по тегам, академия это бракует, лучше заведи общий класс

ustimenko-andrew · 2024-11-23T19:30:05Z

css/style.css

+
+}
+.features-list-item{
+  padding: 80px 85px 80px 85px;



Стиль кода

ustimenko-andrew · 2024-11-24T11:43:54Z

index.html

+        <p class="reasons"> Опытный персонал и качественное обслуживание!</p>
+        <ul class="features-list">
+          <li class="features-list-item">
+            <img src="./img/advantage-icon-1.svg" alt="Жилье">


Это будут иконки, то есть декоративные изображения, а не img

ustimenko-andrew · 2024-11-24T11:44:48Z

index.html

        </li>
        <li class="social-list-item">
-          <a href="https://www.youtube.com/user/htmlacademyru"><img src="./img/youtube.svg" width="22" height="17"
+          <a contenteditable="youtube" href="https://www.youtube.com/user/htmlacademyru"><img src="./img/youtube.svg" width="22" height="17"


Так же будут иконки

keksobot · 2024-12-02T01:02:16Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

ustimenko-andrew · 2024-12-02T13:09:01Z

css/style.css

+}
+
+.page-footer-container {
+  width: 1200px;


Ты можешь поставить ограничения на самом верхнем уровне, чтобы не прописывать каждому элементу + выравнивание по центру

ustimenko-andrew · 2024-12-02T13:09:49Z

css/style.css

+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;


Используй лучше 100dvh вместо %

ustimenko-andrew · 2024-12-02T13:10:21Z

css/style.css

+}
+
+.blok-1 {
+  color: #FFFFFF;


В обном стиле, у тебя где-то верхний регистр, а где-то нижний

ustimenko-andrew · 2024-12-02T13:11:14Z

css/style.css

+  display: flex;
+  flex-wrap: wrap;
+  background-color: #82B3D3;
+  height: 384px;


Не здавай фиксированные значения высоты контентным блокам, они не пройдут проверку на переполнение, отдавай приоритет min-height, только декоративным элементам фиксируй height

ustimenko-andrew · 2024-12-02T13:12:15Z

css/style.css

+  text-transform: uppercase;
+}
+
+a {


Старайся избегать теги, академия это не любит, лучше класс + все общие стили на верх перенеси

ustimenko-andrew · 2024-12-02T13:12:47Z

img/advantage-icon3.svg

*-icon-3, проверь именования

ustimenko-andrew · 2024-12-02T13:13:07Z

index.html

+      <div class="page-container">
+        <div class="welcome">
+          <div class="welcome2">
+            <div class="welcome3">
+            </div>
+          </div>
+        </div>


Зачем такая вложенность?

ustimenko-andrew · 2024-12-02T13:13:49Z

index.html

+          </div>
+          <ul class="features-list">
+            <li class="features-list-item">
+              <img src="./img/advantage-icon-1.svg" alt="Жилье">


Сейчас это не критично, но к концу, нужно переделать на иконку, и убрать тег img, академия придерется

ustimenko-andrew · 2024-12-02T13:14:34Z

index.html

+            <svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M18.9402 0.356445H3.50738C1.64668 0.356445 0.333252 1.9502 0.333252 3.75645V13.8502C0.333252 15.7627 1.64668 17.3564 3.50738 17.3564H19.1591C20.8009 17.3564 22.3333 15.7627 22.3333 13.9564V3.75645C22.1143 1.9502 20.8009 0.356445 18.9402 0.356445ZM7.99494 12.8939V4.81894L15.3283 8.85645L7.99494 12.8939Z"
+                fill="#83B3D3" />


Во всех svg используй для цвета fill currentColor, это нам прогодится, при изменении состояний

keksobot · 2024-12-11T20:43:19Z

♻️ Я собрал ваш пулреквест. Посмотреть можно здесь.

Корректировка названия картинка ТГ, корректировка тег form в "Каталог…

d359f8a

…", разметка отображения карточек+нумерация страниц

keksobot changed the title ~~Корректировка названия картинка ТГ, корректировка тег form в "Каталог…~~ Графика для всех страниц Nov 12, 2024

Оптимизация картинок

1ab0f37

добавление класса списку с удобствами

436696d

ustimenko-andrew reviewed Nov 15, 2024

View reviewed changes

Alexandra0107 added 4 commits November 18, 2024 18:40

Подключение стилей в index

90d5153

Добавление стилей каталогу

38758bf

правка названия картинок + checkbox

433057a

корректировка header

b9439fd

keksobot changed the title ~~Графика для всех страниц~~ Базовая стилизация всех страниц Nov 19, 2024

keksobot pushed a commit that referenced this pull request Nov 19, 2024

✔️ Сборка #6

8f7de37

Alexandra0107 added 3 commits November 20, 2024 16:00

Добавление grid в шапку

6d0f1ba

header и footer внесение flex

1c09893

удаление стилей шапки (куда то все поехало)

e498840

добавление внутренних отступов

ustimenko-andrew reviewed Nov 24, 2024

View reviewed changes

Alexandra0107 added 3 commits November 26, 2024 18:48

подклбчение иконок через cvg

4f65c11

зазметка крупной сетки

28a5649

Сетка catalog

2f8773d

keksobot changed the title ~~Базовая стилизация всех страниц~~ Сетка страниц и крупных блоков на флексах Nov 28, 2024

Alexandra0107 added 2 commits November 28, 2024 13:06

Сетка блока "Преимущества"

e41d88b

Сетка блока advantages

4081106

keksobot pushed a commit that referenced this pull request Dec 2, 2024

✔️ Сборка #6

18dd84e

ustimenko-andrew reviewed Dec 2, 2024

View reviewed changes

Alexandra0107 added 4 commits December 3, 2024 18:57

Cмещение блока advantages

e198a81

header правки

8987f97

Микросетка на главной странице

ba63b57

Форма отправки

5a70e31

keksobot changed the title ~~Сетка страниц и крупных блоков на флексах~~ Микросетки на флексах для всех страниц Dec 9, 2024

Alexandra0107 added 3 commits December 11, 2024 16:13

нумерация отелей

9e7f2e6

оформление отеля amara

42cd548

Добавление классов отелям

0331899

keksobot pushed a commit that referenced this pull request Dec 11, 2024

✔️ Сборка #6

0ff4124

Alexandra0107 added 3 commits December 13, 2024 15:22

каталог гостиниц

bf5ab6a

сетка карточки отеля

f1b2806

правка формата названия картинок

7a6c86c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Микросетки на флексах для всех страниц #6

Микросетки на флексах для всех страниц #6

Alexandra0107 commented Nov 12, 2024 •

edited by keksobot

Loading

Alexandra0107 commented Nov 12, 2024

ustimenko-andrew Nov 15, 2024

ustimenko-andrew Nov 15, 2024

ustimenko-andrew Nov 15, 2024

keksobot commented Nov 19, 2024

ustimenko-andrew Nov 23, 2024

ustimenko-andrew Nov 23, 2024

ustimenko-andrew Nov 23, 2024

ustimenko-andrew Nov 24, 2024

ustimenko-andrew Nov 24, 2024

keksobot commented Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

ustimenko-andrew Dec 2, 2024

keksobot commented Dec 11, 2024

Микросетки на флексах для всех страниц #6

Are you sure you want to change the base?

Микросетки на флексах для всех страниц #6

Conversation

Alexandra0107 commented Nov 12, 2024 • edited by keksobot Loading

Alexandra0107 commented Nov 12, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Nov 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Dec 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

keksobot commented Dec 11, 2024

Alexandra0107 commented Nov 12, 2024 •

edited by keksobot

Loading