PCR-JS-2022 · Daniella-Abdimalik-kyzy · Mar 10, 2022
diff --git a/images/1.jpg b/images/1.jpg
diff --git a/images/10.jpg b/images/10.jpg
diff --git a/images/11.jpg b/images/11.jpg
diff --git a/images/12.jpg b/images/12.jpg
diff --git a/images/13.jpg b/images/13.jpg
diff --git a/images/14.jpg b/images/14.jpg
diff --git a/images/15.jpg b/images/15.jpg
diff --git a/images/16.jpg b/images/16.jpg
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.jpg b/images/3.jpg
diff --git a/images/4.jpg b/images/4.jpg
diff --git a/images/5.jpg b/images/5.jpg
diff --git a/images/6.jpg b/images/6.jpg
diff --git a/images/7.jpg b/images/7.jpg
diff --git a/images/8.jpg b/images/8.jpg
diff --git a/images/9.jpg b/images/9.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+ <html lang="en">
+   <head>
+     <meta charset="UTF-8" />
+     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+     <title>HTML-CSS#2</title>
+     <link rel="stylesheet" href="style.css">
+   </head>
+
+   <body>
+     <header class="header">
+       <h1 class="header-content">МОЕ ПОРТФОЛИО</h1>
+     </header>
+     <main class="main">
+         <nav class="menu">
+             <a class="menu-tag" href="#">Животные</a>
+             <a class="menu-tag" href="#">Машины</a>
+             <a class="menu-tag" href="#">Дома</a>
+             <a class="menu-tag" href="#">Технологии</a>
+         </nav>
+
+         <article class="content">
+          <h2 class="main-content">Карточки</h2>
+          <figure class="block">
+              <img class="img" src="images/1.jpg" alt="котяточки"/>
+              <section>
+                <p class="block-description">Краткое описание: котяточки</p>
+                <time>Дата съёмки: 05.19.2019</time>
+                <p>Локация: Казань</p>
+                <p class="tags">#животные #котики #кошки #залень </p>
+              </section>
+          </figure>
+
+          <figure class="block">
+              <img class="img" src="images/3.jpg" alt="машиночка"/>
+              <section>
+                <p class="block-description">Краткое описание: машина</p>
+                <time>Дата съёмки: 04.01.2010</time>
+                <p>Локация: Москва</p>
+                <p class="tags">#машины #ночь #скорость</p>
+              </section>
+          </figure>
+        </article>
+     </main>
+    <footer class="footer"></footer>
+   </body>
+ </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
+}
+
+.header {
+  height: 50px;
+  border-bottom: solid 1px #bbb;
+  line-height: 20px;
+}
+
+.header-content {
+  text-align: center;
+  font-weight: 400;
+  color: #000;
+  margin: 200;
+}
+
+.footer {
+  height: 70px;
+  border-top: solid 1px #bbb;
+  margin-top: auto;
+}
+
+.main {
+  display: flex;
+}
+
+.main-content {
+  text-align: center;
+  font-weight: 400;
+  margin: 40px 0;
+}
+
+.menu {
+  padding: 20px;
+  border-right: solid 1px #bbb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.menu-tag {
+  background-color: grey;
+  width: 250px;
+  text-align: center;
+  align-self: center;
+  margin: 20px 10px;
+}
+
+.content {
+  margin: 20px;
+  background-color: #c4c4c44d;
+  width: 100%;
+}
+
+.block {
+  background: #c4c4c480;
+  margin: 20px;
+  padding: 20px;
+  display: flex;
+  column-gap: 20px;
+}
+
+.block-description {
+  margin-top: 0;
+}
+
+.tags {
+  margin-top: 50px;
+} 
+
+.img {
+  width: 320px;
+  height: 240px;
+}