CodeYourFuture · maxbmaapc · Jan 24, 2023 · Jan 24, 2023 · Jan 25, 2023 · Jan 26, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.history
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,115 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+ * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+ }
+ body {
+    max-width: 1600px;
+    width: 100%;
+    margin: 0 auto;
+    color: #fff;
+    background-color: #000;
+ }
+
+ .bar {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 3rem;
+    margin-bottom: 4rem;
+    align-items: center;
+ }
+ .navigation {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 4rem;
+    align-items: center;
+ }
+
+ input {
+    background: transparent;
+    border:none;
+    height: 2rem;
+    width: 10rem;
+ }
+
+ input::placeholder {
+    color: #fff;
+ }
+
+ h1 {
+    font-size: 200px;
+    margin-left: 2rem;
+ }
+
+ .header__p {
+    text-align: center;
+    font-size: 18px;
+ }
+ a {
+    text-decoration: none;
+    color: #fff;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: larger;
+ }
+ aside {
+   background-color: #000; 
+   position: fixed;
+   right: 0px;
+   top: 0%;
+   display: flex;
+   flex-direction: column;
+   width: 3rem;
+   height: 45rem;
+ }
+
+ a:hover {
+    cursor: pointer;
+    color: rgb(251, 52, 52);
+ }
+
+ article {
+   display: grid;
+   grid-template-columns: 547px 550px;
+   column-gap: 5rem;
+   margin-left: 3rem;
+ }
+ .article__interstellar {
+   max-width: 526px;
+   margin-top: 4rem;
+ }
+
+ h2 {
+   text-align: center;
+   margin-top: 3rem;
+   margin-bottom: 1rem;
+ }
+
+ .article__blade {
+   margin-top: 4rem;
+ }
+
+ .img__blade {
+   max-width: 547px;
+   height: 1000px;
+
+ }
+
+ .article__avatar {
+   max-width: 526px;
+ }
+
+ .article__arrival {
+   margin-top: 4rem;
+ }
+
+ .footer {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   margin: 3rem 10rem 0 10rem;
+   height: 150px;
+   border-top: #fff solid 1px;
+ }
diff --git a/files/.DS_Store b/files/.DS_Store
diff --git a/files/41289cropped.jpg b/files/41289cropped.jpg
diff --git a/files/608647.jpg b/files/608647.jpg
diff --git a/files/fb.webp b/files/fb.webp
diff --git a/files/insta.webp b/files/insta.webp
diff --git a/files/pp7985719.jpg b/files/pp7985719.jpg
diff --git a/files/twit.webp b/files/twit.webp
diff --git a/files/wp1818189cropped.jpg b/files/wp1818189cropped.jpg
diff --git a/index.html b/index.html
@@ -2,21 +2,60 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
     <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link rel="stylesheet" href="css/style.css" />
+    <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="/css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <nav>
+      <div class="bar">
+        <input type="text" placeholder="Search">
+        <a href="">My Blog</a>
+        <a href="">About</a>
+        <a href="">Contact</a>
+      </div>
+    </nav>
+    <header>
+      <div>
+        <h1>REVIEWS</h1>
+        <p class="header__p">Get a taste of an alternative way of life, travel to the future or experience space... Sci-fi can be a wild ride, so where will you go?</p>
+      </div>
+    </header>
+    <aside class="navigation">
+      <div>
+        <a href="https://www.instagram.com/mpanasetckiy"><img src="/files/insta.webp" alt=""></a>
+        <a href="https://www.facebook.com/mpanasetckiy"><img src="/files/fb.webp" alt=""></a>
+        <a href="https://twitter.com/Mpanasetckiy"><img src="/files/twit.webp" alt=""></a>
+      </div>
+    </aside>
+    <article>
+      <div class="article__interstellar">
+        <img style="width: 540px;" src="/files/wp1818189cropped.jpg" alt="Interstellar">
+        <h2>Interstellar</h2>
+        <p>A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.</p>
+      </div>
+      <div class="article__blade">
+        <img class="img__blade" src="/files/pp7985719.jpg" alt="Bladerunner">
+        <h2>Blade Runner 2049</h2>
+        <p>Young Blade Runner K's discovery of a long-buried secret leads him to track down former Blade Runner Rick Deckard, who's been missing for thirty years.</p>
+      </div>
+      <div class="article__avatar">
+        <img src="/files/608647.jpg" alt="Avatar">
+        <h2>Avatar</h2>
+        <p>A paraplegic Marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.</p>
+      </div>
+      <div class="article__arrival">
+        <img style="max-width: 547px;" src="/files/41289cropped.jpg" alt="Arrival">
+        <h2>Arrival</h2>
+        <p>A linguist works with the military to communicate with alien lifeforms after twelve mysterious spacecraft appear around the world.</p>
+      </div>
+    </article>
+    <footer>
+      <div class="footer">
+        <span>© 2023 by Maksim Lukianenko for CYF.</span>
+      </div>
+    </footer>
   </body>
 </html>