Home Explore Help
Sign In
Helen
/
markup
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

lesson 3

Elena 3 years ago
parent
232ec56d17
commit
16d9bc461e
7 changed files with 134 additions and 0 deletions
Split View Show Diff Stats
  1. 55 0
      Markup Lesson 3/css/reset.css
  2. 35 0
      Markup Lesson 3/css/style.css
  3. BIN
      Markup Lesson 3/images/1.png
  4. BIN
      Markup Lesson 3/images/2.png
  5. 44 0
      Markup Lesson 3/index.html
  6. BIN
      Markup Lesson 3/screen-validator/css.png
  7. BIN
      Markup Lesson 3/screen-validator/html.png

+ 55 - 0
Markup Lesson 3/css/reset.css
View File 

@@ -0,0 +1,55 @@
 
+*,

+*::before,

+*::after {

+	box-sizing: border-box;

+}

+

+

+/* http://meyerweb.com/eric/tools/css/reset/ 

+    v2.0 | 20110126

+    License: none (public domain)

+*/

+

+html, body, div, span, applet, object, iframe,

+h1, h2, h3, h4, h5, h6, p, blockquote, pre,

+a, abbr, acronym, address, big, cite, code,

+del, dfn, em, img, ins, kbd, q, s, samp,

+small, strike, strong, sub, sup, tt, var,

+b, u, i, center,

+dl, dt, dd, ol, ul, li,

+fieldset, form, label, legend,

+table, caption, tbody, tfoot, thead, tr, th, td,

+article, aside, canvas, details, embed, 

+figure, figcaption, footer, header, hgroup, 

+menu, nav, output, ruby, section, summary,

+time, mark, audio, video {

+	margin: 0;

+	padding: 0;

+	border: 0;

+	font-size: 100%;

+	font: inherit;

+	vertical-align: baseline;

+}

+/* HTML5 display-role reset for older browsers */

+article, aside, details, figcaption, figure, 

+footer, header, hgroup, menu, nav, section {

+	display: block;

+}

+body {

+	line-height: 1;

+}

+ol, ul {

+	list-style: none;

+}

+blockquote, q {

+	quotes: none;

+}

+blockquote:before, blockquote:after,

+q:before, q:after {

+	content: '';

+	content: none;

+}

+table {

+	border-collapse: collapse;

+	border-spacing: 0;

+}

+ 35 - 0
Markup Lesson 3/css/style.css
View File 

@@ -0,0 +1,35 @@
 
+body {

+    font-size: 20px;

+}

+

+.box {

+    width: 350px;

+    height: 220px;

+    background-color: green;

+    padding: 15px 10px 20px;

+    margin-bottom: 30px;

+    border: 2px dotted red;

+}

+

+.float__box {

+    max-width: 900px;

+    margin: 50px auto 0;

+    text-align: justify;

+}

+

+.float__img-left,

+.float__img-right {

+    width: 300px;

+    height: 175px;

+}

+

+.float__img-left {

+    float: left;

+    margin: 0 25px 15px 0;

+}

+

+.float__img-right {

+    float: right;

+    margin: 25px 0 15px 25px;

+    

+}

BIN
Markup Lesson 3/images/1.png
View File


BIN
Markup Lesson 3/images/2.png
View File


+ 44 - 0
Markup Lesson 3/index.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>

+<html lang="zxx">

+<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>A-level</title>

+    <link rel="stylesheet" href="css/reset.css">

+    <link rel="stylesheet" href="css/style.css">

+</head>

+<body>

+    <main>

+        <!-- Второй уровень -->

+        <div class="box"></div>

+

+        <!-- Третий уровень -->

+        <div class="float__box">

+        <img class="float__img-left" src="images/1.png" alt="first picture">

+        <p>

+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem beatae obcaecati labore itaque? Officiis vel, 

+            soluta numquam ex odit minima animi nesciunt asperiores exercitationem dolorum. Odit ea iusto labore quia ipsa vero! 

+            Magni, quisquam quaerat molestias tempora ea, labore delectus obcaecati facilis soluta, consectetur dolores animi 

+            neque beatae atLorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem beatae obcaecati labore itaque? 

+            Officiis vel, soluta numquam ex odit minima animi nesciunt asperiores exercitationem dolorum. Odit ea iusto labore 

+            quia ipsa vero! Magni, quisquam quaerat molestias tempora ea, labore delectus obcaecati facilis soluta, consectetur 

+            dolores animi neque beatae at.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem beatae obcaecati 

+            labore itaque? 

+            <img class="float__img-right" src="images/2.png" alt="second picture"> 

+            Officiis vel, soluta numquam ex odit minima animi nesciunt asperiores exercitationem dolorum. Odit ea 

+            iusto labore quia ipsa vero! Magni, quisquam quaerat molestias tempora ea, labore delectus obcaecati facilis soluta, 

+            consectetur dolores animi neque beatae atLorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem beatae 

+            obcaecati labore itaque? Officiis vel, soluta numquam ex odit minima animi nesciunt asperiores exercitationem dolorum. 

+            Odit ea iusto labore quia ipsa vero! Magni, quisquam quaerat molestias tempora ea, labore delectus obcaecati facilis 

+            soluta, consectetur dolores animi neque beatae ats  Officiis vel, soluta numquam ex odit minima animi nesciunt asperiores 

+            exercitationem dolorum. Odit ea iusto labore quia ipsa vero! Magni, quisquam quaerat molestias tempora ea, labore delectus 

+            obcaecati facilis soluta, consectetur dolores animi neque beatae atLorem ipsum dolor, sit amet consectetur adipisicing elit. 

+            Ipsam quidem beatae obcaecati labore itaque? Officiis vel, soluta numquam ex odit minima animi nesciunt asperiores 

+            exercitationem dolorum. Odit ea iusto labore quia ipsa vero! Magni, quisquam quaerat molestias tempora ea, labore delectus 

+            obcaecati facilis soluta, consectetur dolores animi neque beatae ats.

+        </p>

+        </div>

+    </main>

+</body>

+</html>

BIN
Markup Lesson 3/screen-validator/css.png
View File


BIN
Markup Lesson 3/screen-validator/html.png
View File