First commit

prosto-lapsha · Oct 19, 2016 · 84867bb · 84867bb
commit 84867bb
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+*.log
+npm-debug.log*
+node_modules/
+.editorconfig
+.git/
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,113 @@
+body {
+  min-width: 320px;
+  margin: 0;
+  font-family: "Arial";
+  font-size: 12px;
+  line-height: 16px;
+  color: #5798b4;
+  background-color: #ffffe1;
+}
+
+p,
+h1 {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.block {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.block::after {
+  content: "";
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  width: 235px;
+  height: 276px;
+  border-radius: 13px;
+  background-color: #cc0000;
+  z-index: 0;
+}
+
+.wrapper {
+  position: relative;
+  width: 236px;
+  padding-top: 15px;
+  padding-right: 18px;
+  padding-bottom: 20px;
+  padding-left: 18px;
+  box-sizing: border-box;
+  border: 1px solid #cc0000;
+  background-color: #fff;
+  z-index: 10;
+}
+
+.wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: -17px;
+  right: -17px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #cc0000;
+  clip: rect(auto, 16px, 16px, auto);
+}
+
+.title {
+  position: relative;
+}
+
+.title-text {
+  font-size: 16px;
+  line-height: 18px;
+  color: #cc0000;
+  font-weight: bold;
+}
+
+.title-img {
+  position: absolute;
+  right: -10px;
+  top: -9px;
+}
+
+.description {
+  text-indent: 20px;
+}
+
+.link {
+  position: relative;
+  color: #cc0000;
+}
+
+.icon-link {
+  display: inline-block;
+  vertical-align: top;
+  width: 12px;
+  height: 16px;
+  background-image: url(" data:image/svg+xml,%3Csvg%20fill%3D%22%23cc0000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M14%2016V5l-1%201v9H1V3h9l1-1H0v14z%22%2F%3E%3Cpath%20d%3D%22M16%200h-5l1.8%201.8L6%208.6%207.4%2010l6.8-6.8L16%205z%22%2F%3E%3C%2Fsvg%3E%0D%0A");
+  background-repeat: no-repeat;
+}
+
+.icon-link::before {
+  content: "";
+  position: absolute;
+  bottom: 1px;
+  right: 1px;
+  width: 12px;
+  height: 1px;
+  background-color: #cc0000;
+}
+
+.cite-img {
+  float: left;
+  margin-right: 5px;
+}
+
+.text-underline {
+  border-bottom: 1px dashed #5798b4;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Тестовое задание. Лапшина</title>
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+  <body>
+    <section class="block">
+      <div class="wrapper">
+        <div class="title">
+          <h1 class="title-text">Можно попробовать</h1>
+          <svg class="title-img" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 114 108.4">
+            <path fill="#FCD116" d="M57 0l17.6 35.7 39.4 5.7-28.5 27.8 6.7 39.2L57 89.9l-35.2 18.5 6.7-39.2L0 41.4l39.4-5.7"/>
+          </svg>
+        </div>
+        <p class="description">
+          Бы делают стратегические биг, его их меня труда запускали. Черт крыша уровня мы фон, ну большим <a class="link" href="#">хороший <span class="icon-link"></span></a> нас, ставить полвосьмого мои во.
+        </p>
+        <div class="cite">
+          <svg class="cite-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.144 137.144" width="45" height="45">
+            <path d="M34.286 48v27.43H48c-.106 12.274-13.714 13.713-13.714 13.713L41.142 96s19.81-2.236 20.572-20.57V48H34.286zm27.46 26.685c-.012.258-.02.42-.032.744l.03-.745zm.074-1.8l-.013.32.013-.32zM109.715 0H27.43C12.28 0 0 12.28 0 27.43v82.286c0 15.148 12.28 27.428 27.43 27.428h82.285c15.148 0 27.43-12.28 27.43-27.428V27.43c0-15.15-12.28-27.43-27.43-27.43zm13.715 102.858c0 11.36-9.21 20.572-20.572 20.572H34.286c-11.36 0-20.57-9.21-20.57-20.572V34.286c0-11.36 9.21-20.572 20.57-20.572h68.572c11.362 0 20.572 9.21 20.572 20.572v68.572zm-48-27.43h13.713C89.037 87.705 75.43 89.144 75.43 89.144L82.285 96s19.808-2.236 20.572-20.57V48h-27.43v27.43zm27.533-2.544l-.013.32.013-.32z" fill="#FFDA44"/>
+          </svg>
+          <p class="cite-text">
+            Был раздутое найденных&nbsp;за. Код работа <b>неоригинальные</b> на, нью собой будет по. Три ты сказать получат <em>сохранение</em>, фон во <span class="text-underline">делают уровней</span> интервью, нас вы работы знания означает?
+          </p>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>