css grid update

yankovalenko94 · Aug 11, 2020 · 2713c21 · 2713c21
1 parent 290697c
commit 2713c21
Show file tree

Hide file tree

Showing 1,575 changed files with 124,991 additions and 5 deletions.
diff --git a/Grid_step_1/css/style.min.css b/Grid_step_1/css/style.min.css
diff --git a/Grid_step_1/css/style.min.css.map b/Grid_step_1/css/style.min.css.map
diff --git a/Grid_step_1/img/arabian-horse.jpg b/Grid_step_1/img/arabian-horse.jpg
diff --git a/Grid_step_1/img/cat.jpg b/Grid_step_1/img/cat.jpg
diff --git a/Grid_step_1/img/cherries.jpg b/Grid_step_1/img/cherries.jpg
diff --git a/Grid_step_1/img/fog.jpg b/Grid_step_1/img/fog.jpg
diff --git a/Grid_step_1/img/kyrgyzstan.jpg b/Grid_step_1/img/kyrgyzstan.jpg
diff --git a/Grid_step_1/img/mushroom.jpg b/Grid_step_1/img/mushroom.jpg
diff --git a/Grid_step_1/img/switzerland.jpg b/Grid_step_1/img/switzerland.jpg
diff --git a/Grid_step_1/index.html b/Grid_step_1/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.min.css">
+</head>
+<body>
+    <div class="grid-container">
+        <div class="news-item">
+            <img src="img/cherries.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/kyrgyzstan.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/cat.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/fog.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/switzerland.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/mushroom.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+        <div class="news-item">
+            <img src="img/arabian-horse.jpg" alt="img" class="news-item__img">
+            <div class="news-item__descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Grid_step_1/sass/style.scss b/Grid_step_1/sass/style.scss
@@ -0,0 +1,28 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+.grid-container {
+    width: 1140px;
+    margin: 82px auto 0 auto;
+    display: grid;
+    grid-template-columns: repeat(4, 240px);
+    grid-template-rows: repeat(2, 260px);
+    grid-auto-rows: 260px;
+    gap: 60px;
+}
+
+.news-item {
+    &__img {
+        width: 100%;
+    }
+    &__descr {
+        margin-top: 15px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+    }
+}
diff --git a/Portfolio_step_1/.gitignore b/Portfolio_step_1/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Portfolio_step_1/dist/css/style.min.css b/Portfolio_step_1/dist/css/style.min.css