Repository: js-tasks-ru/htmlcss-20250313_d-a-fayl
Pull request #9: 04-lection/page_with_flex: solution
Author: login: dfajl
Created: 2025-03-29T08:40:13Z | Merged: 2025-03-31T19:50:06Z



Diff:
diff --git a/assets/css/index.css b/assets/css/index.css
index e24fbdf..9f4708b 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -5,6 +5,7 @@
 @import '../../components/main/main.css';
 @import '../../components/page/page.css';
 @import '../../components/container/container.css';
+@import '../../components/card/card.css';
 
 :root {
   --white: #ffffff;
@@ -17,6 +18,7 @@
   --grey-2: #dde2e5;
   --grey-3: #acb5bd;
   --grey-4: #495057;
+  --grey-4-rgb: 73, 80, 87;
 
   --error: var(--red);
   --success: var(--blue);
@@ -24,9 +26,15 @@
   --primary: var(--blue);
   --secondary: var(--purple);
 
-  --container-width: 1100px;
+  --container-width: 1110px;
 }
 
 body {
   font-family: 'Roboto', sans-serif;
 }
+
+html,
+body {
+  height: 100%;
+}
+
diff --git a/assets/css/normalize.css b/assets/css/normalize.css
index 867a0d0..3a3c3c4 100644
--- a/assets/css/normalize.css
+++ b/assets/css/normalize.css
@@ -9,16 +9,25 @@
 
 /* Remove default margin and padding */
 body,
-h1, h2, h3, h4, h5, h6,
-p, figure, blockquote,
-dl, dd {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
   margin: 0;
   padding: 0;
 }
 
 /* Improve text rendering */
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -32,7 +41,8 @@ html:focus-within {
 }
 
 /* Remove default list styles */
-ul, ol {
+ul,
+ol {
   list-style: none;
   padding: 0;
 }
@@ -44,19 +54,26 @@ a {
 }
 
 /* Ensure images are responsive */
-img, svg, video, canvas {
+img,
+svg,
+video,
+canvas {
   max-width: 100%;
   height: auto;
   display: block;
 }
 
 /* Improve button styles */
-button, input, textarea, select {
+button,
+input,
+textarea,
+select {
   font: inherit;
 }
 
 /* Prevent text overflows */
-pre, code {
+pre,
+code {
   overflow-x: auto;
 }
 
@@ -71,11 +88,18 @@ legend {
 }
 
 /* Prevent iOS zooming on form elements */
-input, select, textarea, button {
+input,
+select,
+textarea,
+button {
   font-size: 100%;
 }
 
 /* Improve focus styles */
-a, button, input, textarea, select {
+a,
+button,
+input,
+textarea,
+select {
   outline-offset: 2px;
 }
diff --git a/components/card/card.css b/components/card/card.css
new file mode 100644
index 0000000..ca0e8d6
--- /dev/null
+++ b/components/card/card.css
@@ -0,0 +1,18 @@
+.card {
+  width: 350px;
+  height: 367px;
+  background: var(--white);
+  border-radius: 12px;
+  padding-bottom: 32px;
+  font-weight: 500;
+  font-size: 21px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.card__content {
+  margin-top: auto;
+}
diff --git a/components/main/main.css b/components/main/main.css
index 7ec6de9..afad25d 100644
--- a/components/main/main.css
+++ b/components/main/main.css
@@ -1,4 +1,10 @@
 .main {
-  height: 400px;
   background: #f9fafc;
+  padding: 68px 0;
+}
+
+.main__cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
 }
diff --git a/components/page/page.css b/components/page/page.css
index e69de29..4344012 100644
--- a/components/page/page.css
+++ b/components/page/page.css
@@ -0,0 +1,9 @@
+.page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.page__main {
+  flex-grow: 1;
+}
diff --git a/index.html b/index.html
index c71fb49..ebabfef 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <!-- Главная страница -->
 <html lang="ru">
   <head>
-    <link rel="stylesheet" href="./assets/css/main.css" />
+    <link rel="stylesheet" href="./assets/css/index.css" />
   </head>
   <body>
     <div class="page">
@@ -11,7 +11,30 @@
           <h1 class="header__title">Reusable component library</h1>
         </div>
       </header>
-      <main class="main"></main>
+      <main class="main page__main">
+        <div class="container">
+          <div class="main__cards">
+            <div class="card">
+              <div class="card__content">Tooltip</div>
+            </div>
+            <div class="card">
+              <div class="card__content">Custom form elements</div>
+            </div>
+            <div class="card">
+              <div class="card__content">Calendar</div>
+            </div>
+            <div class="card">
+              <div class="card__content">Modal dialog</div>
+            </div>
+            <div class="card">
+              <div class="card__content">Histogram</div>
+            </div>
+            <div class="card">
+              <div class="card__content">Avatar</div>
+            </div>
+          </div>
+        </div>
+      </main>
       <footer class="footer">
         <div class="container">
           <h2 class="footer__title">About</h2>


Reviews:
user: login: GSemikozov
body: надо исправить конфликт
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-30T06:40:00Z
user: login: dfajl
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-30T12:08:47Z
user: login: GSemikozov
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-30T13:15:51Z
user: login: GSemikozov
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-30T13:17:09Z
user: login: GSemikozov
state: APPROVED
author_association: NONE
submitted_at: 2025-03-31T19:50:02Z

Review comments:
diff_hunk: @@ -0,0 +1,12 @@
+.card {
+  width: 350px;
+  height: 367px;
+  background: var(--white);
+  border-radius: 12px;
+  padding: 312px 65px 30px 69px;
path: components/card/card.css
user: login: GSemikozov
body: если высота фиксированная, то сверху нам явно не нужен такой большой паддинг)
created_at: 2025-03-30T06:38:58Z
author_association: NONE
diff_hunk: @@ -0,0 +1,12 @@
+.card {
+  width: 350px;
+  height: 367px;
+  background: var(--white);
+  border-radius: 12px;
+  padding: 312px 65px 30px 69px;
path: components/card/card.css
user: login: dfajl
body: Переделал компонент карточки на flex и прижал к низу через margin-top: auto;
Полностью ушел от паддингов.

Но все-равно не понял, как тут быть: ведь такой формат карточки с контентом внизу - это временный вариант. Поэтому я пошел самым простым путем и задал padding-top. Или это считается антипаттерном?

Если да, то подскажи, пжл, как быть в таких случаях, когда контент прижать надо к низу? через position absolute ведь тоже не есть хорошо?
created_at: 2025-03-30T12:08:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,18 @@
+.card {
+  width: 350px;
+  height: 367px;
+  background: var(--white);
+  border-radius: 12px;
+  padding-bottom: 30px;
path: components/card/card.css
user: login: GSemikozov
body: `32 25` - если следовать макету :)
created_at: 2025-03-30T13:15:06Z
author_association: NONE
diff_hunk: @@ -0,0 +1,12 @@
+.card {
+  width: 350px;
+  height: 367px;
+  background: var(--white);
+  border-radius: 12px;
+  padding: 312px 65px 30px 69px;
path: components/card/card.css
user: login: GSemikozov
body: здесь нет анти-паттерна, просто очевидно, что такой большой паддинг при использовании реальных данных мы ставить не будем, поэтому раз уж высота зафиксированы и мы начали выставлять паддинги - лучше уж указать сразу верные значения и разместить текстовый контент снизу
created_at: 2025-03-30T13:17:09Z
author_association: NONE

PR comments:
user: login: jsru-1
created_at: 2025-03-29T08:40:40Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR
user: login: jsru-1
created_at: 2025-03-31T06:26:30Z
body: Добавляю преподавателя (@GSemikozov) для код-ревью.
author_association: CONTRIBUTOR