more studies

f2acode · Nov 10, 2017 · 37bd255 · 37bd255
1 parent d7fde2b
commit 37bd255
Show file tree

Hide file tree

Showing 15 changed files with 394 additions and 11 deletions.
diff --git a/...o HTML elements programmatically/1 - change the location of an element/flexible_boxes.css b/...o HTML elements programmatically/1 - change the location of an element/flexible_boxes.css
@@ -0,0 +1,28 @@
+html{
+    font-family: sans-serif;
+}
+
+section{
+    width: 93%;
+    height: 240px;
+    margin: 20px auto;
+    background: purple;
+    display: flex;
+}
+
+div{
+    color: white;
+    background: orange;
+    flex: 1;
+    margin-right: 10px;
+    text-shadow: 1px 1px 1px black;
+}
+
+div:last-child{
+    margin-right: 0;
+}
+
+section, div{
+    border: 5px solid rgba(0, 0, 0, 0, 0.85);
+}
+
diff --git a/... HTML elements programmatically/1 - change the location of an element/flexible_boxes.html b/... HTML elements programmatically/1 - change the location of an element/flexible_boxes.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./flexible_boxes.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <section>
+        <div>This is a box</div>
+        <div>This is a box</div>
+        <div>This is a box</div>
+    </section>
+
+    <button class="create">Create box</button>
+    <button class="reset">Reset demo</button>
+</body>
+
+</html>
diff --git a/...tyling to HTML elements programmatically/1 - change the location of an element/floats.css b/...tyling to HTML elements programmatically/1 - change the location of an element/floats.css
@@ -0,0 +1,18 @@
+img:nth-of-type(1){
+    float: left;
+}
+
+h1:nth-of-type(2){
+    clear: both;
+}
+
+/* get the first div element */
+div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
diff --git a/...yling to HTML elements programmatically/1 - change the location of an element/floats.html b/...yling to HTML elements programmatically/1 - change the location of an element/floats.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./floats.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <h1>Image + text example + columns</h1>
+    <img height="200" src="http://i0.kym-cdn.com/entries/icons/original/000/017/471/MEGAS_XLR___Action_pose_by_wilkowwc.jpg">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+    </p>
+    <h1>2 column layout example</h1>
+    <div>
+        <h2>First column</h2>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+        </p>
+    </div>
+
+    <div>
+        <h2>Second column</h2>
+        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere
+            sit amet dapibus ut.</p>
+    </div>
+</body>
+
+</html>
diff --git a/...g to HTML elements programmatically/1 - change the location of an element/positioning.css b/...g to HTML elements programmatically/1 - change the location of an element/positioning.css
@@ -0,0 +1,25 @@
+body {
+    width: 500px;
+    margin: 0 auto;
+  }
+
+  p {
+    background: aqua;
+    border: 3px solid blue;
+    padding: 10px;
+    margin: 10px;
+  }
+
+  .positioned1{
+      position: relative;
+      background: yellow;
+      top: 30px;
+      left: 30px;
+  }
+
+  .positioned2{
+      position: absolute;
+      background: yellow;
+      top: 30px;
+      left: 30px;
+  }
diff --git a/... to HTML elements programmatically/1 - change the location of an element/positioning.html b/... to HTML elements programmatically/1 - change the location of an element/positioning.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./positioning.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <h1>Positioning</h1>
+
+    <p>I am a basic block level element.</p>
+    <p class="positioned1">I am a basic block level element.</p>
+    <p>I am a basic block level element.</p>
+
+    <h1>Positioning</h1>
+
+    <p>I am a basic block level element.</p>
+    <p class="positioned2">I am a basic block level element.</p>
+    <p>I am a basic block level element.</p>
+
+</body>
+
+</html>
diff --git a/...tyling to HTML elements programmatically/1 - change the location of an element/tables.css b/...tyling to HTML elements programmatically/1 - change the location of an element/tables.css
@@ -0,0 +1,35 @@
+html{
+    font-family: sans-serif;
+}
+
+form{
+    display: table;
+    margin: 0 auto;
+}
+
+form div {
+    display: table-row;
+}
+
+form label, form input{
+    display: table-cell;
+    margin-bottom: 10px;
+}
+
+form label{
+    width: 200px;
+    padding-right: 5%;
+    text-align: right;
+}
+
+form input{
+    width: 300px;
+}
+
+form p{
+    display: table-caption;
+    caption-side: bottom;
+    width: 300px;
+    color: #999;
+    font-style: italic;
+}
diff --git a/...yling to HTML elements programmatically/1 - change the location of an element/tables.html b/...yling to HTML elements programmatically/1 - change the location of an element/tables.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./tables.css">
+    <title>Document</title>
+</head>
+
+<body>
+<form>
+    <p>First of all, tell us your name and age.</p>
+    <div>
+        <label for="fname">First name:</label>
+        <input type="text" id="fname">
+    </div>
+    <div>
+        <label for="lname">Last name:</label>
+        <input type="text" id="lname">
+    </div>
+    <div>
+        <label for="age">Age:</label>
+        <input type="text" id="age">
+    </div>
+</form>
+</body>
+
+</html>
diff --git a/...s and secure data/3 - Apply styling to HTML elements programmatically/readme.md b/...s and secure data/3 - Apply styling to HTML elements programmatically/readme.md
@@ -0,0 +1,27 @@
+# 1 - change-the-location-of-an-element
+Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
+
+## Introduction to CSS layout
+
+* Float
+* Positioning
+* CSS tables
+* Flexbox
+* Grid
+
+## Floats
+
+* Float
+* Clear
+* Brokes adding padding, etc
+    * Can be solved using ```box-sizing: border-box;```
+
+## Positioning
+
+## Practical positioning examples
+
+## Flexbox
+
+## Grids
+
+# 2 - apply-tranform
diff --git a/...se CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/index.html b/...se CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    teste
+</body>
+
+</html>
diff --git a/...Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/style.css b/...Use CSS3 in applications/5 - create-an-animated-and-adaptative-UI/media-queries/style.css
@@ -0,0 +1,47 @@
+/* Simple example */
+
+@media (max-width: 800px)
+{
+    body{
+        background-color: lightgoldenrodyellow;
+    }
+}
+
+@media (min-width: 800px)
+{
+    body{
+        background-color: lightblue;
+    }
+}
+
+/* Operadores and, or, not and only */
+
+@media (min-width: 800px) and (orientation: landscape){
+    body{
+        background: lightseagreen;
+    }
+}
+
+@media screen and (min-width: 800px) and (orientation: landscape){
+    body{
+        background: lightgreen;
+    }
+}
+
+@media(min-width: 800px), handheld and (orientation: landscape){
+    body{
+        background: lightslategrey;
+    }
+}
+
+@media not all and (orientation: portrait){
+    body{
+        background: yellowgreen;
+    }
+}
+
+@media only screen{
+    body{
+        background: lightcyan;
+    }
+}
diff --git a/...ions/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/index.html b/...ions/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <a href="https://developer.mozilla.org" target="_blank">Mozilla Developer Network
+    </a>
+
+    <ul>
+        <li>
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
+        <li>
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
+    </ul>
+
+</body>
+
+</html>
diff --git a/...tions/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/style.css b/...tions/5 - create-an-animated-and-adaptative-UI/pseudo-class-and-pseudo-elements/style.css
@@ -0,0 +1,22 @@
+/* pseudo-class */
+
+a{
+    color: blue;
+}
+
+a:visited{
+    color: blue;
+}
+
+a:hover,
+a:active,
+a:focus {
+    color: darkred;
+    text-decoration: none;
+}
+
+/* pseudo-element */
+
+[href^=http]::after{
+    content: ' ⤴';
+}