Add basic styles

alexbaumgertner · alexbaumgertner · commit 74c868c8cf36 · 2017-06-17T12:05:24.000+03:00
diff --git a/index.html b/index.html
@@ -1,4 +1,13 @@
-<h1>Easy-deep-learning</h1>
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Easy deep learning</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<h1>Образование спасет мир!</h1>
 
 <p><a href="https://github.com/easy-deep-learning">github</a></p>
 
@@ -16,7 +25,7 @@ <h2>Проекты</h2>
 </ul>
 
 <h2>Выступления и презентации</h2>
-<ul>
+<ul class="presentations">
   <li>
     <p>
       <a href="https://www.slideshare.net/yandex/ss-29879522">
@@ -25,13 +34,14 @@ <h2>Выступления и презентации</h2>
       (BEMup в рамках YaC, Москва, 2013)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/7xBGaPFu1v4"
         frameborder="0"
         allowfullscreen
     ></iframe>
   </li>
+
   <li>
     <p>
       <a href="http://alexbaumgertner.github.io/presentation-bem-stack/">
@@ -40,8 +50,8 @@ <h2>Выступления и презентации</h2>
       (PiterJS #6, Санкт-Петербург, 2016)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/VsGl-xZtxFg"
         frameborder="0"
         allowfullscreen
@@ -54,8 +64,8 @@ <h2>Выступления и презентации</h2>
       (PiterJS #8, Санкт-Петербург, 2016)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/dsejpRhmRFo"
         frameborder="0"
         allowfullscreen
@@ -70,8 +80,8 @@ <h2>Выступления и презентации</h2>
       (PiterJS #13, Санкт-Петербург, 2017)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/0lu3WYLW4ps"
         frameborder="0"
         allowfullscreen
@@ -89,15 +99,14 @@ <h2>Выступления и презентации</h2>
       (PiterJS #14, Санкт-Петербург, 2017)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/2uWh7V70_d8"
         frameborder="0"
         allowfullscreen
     ></iframe>
   </li>
 
-
   <li>
     <p>
       <a href="https://easy-deep-learning.github.io/structure-and-Interpretation-of-js/">
@@ -106,16 +115,17 @@ <h2>Выступления и презентации</h2>
       (PiterJS 15, Санкт-Петербург, 2017)
     </p>
     <iframe
-        width="560"
-        height="315"
+        width="300"
+        height="169"
         src="https://www.youtube.com/embed/Kh7s5he0Yto"
         frameborder="0"
         allowfullscreen
     ></iframe>
   </li>
 
-
   <li><a href="./es2015-in-practice/">es2015-in-practice</a></li>
 
   <li><a href="./event-emitter/">event-emitter</a></li>
 </ul>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,25 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+}
+
+body {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.presentations {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.presentations li {
+  width: 30%;
+  min-width: 330px;
+  margin-top: 25px;
+}
