macloo · Janith96 · Oct 1, 2019 · Oct 1, 2019 · Oct 1, 2019 · Oct 1, 2019
diff --git a/Columns.html b/Columns.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <title>Ekanayaka EMTP</title>
+    </head>
+    <body>
+
+<div class="row">
+    <!--Left Side column-->
+    <div class="column" style="background-color:rgb(255, 255, 255);">
+        <img src="image.png" alt="My photo" width="400" height="300" class="center"> 
+    </div>
+
+    <!--Right side column-->
+    <div class="column" style="background-color:rgb(255, 255, 255);">
+        <H2>Name : Ekanayaka EMTP</H2>
+        <p>
+        BSC Management (UG), RUSL</br><!--br tag is for line breaks-->
+        MAAT
+        </p>
+        <p>Theme : Nature Lover</p>
+        <p>Address : No 117/A Malwatta road,</br>
+        Godakawela</p>
+        <p>Education : Primary and Secondary</br>
+            - R/Dharmapala Navodya School</br>
+        </br>
+        Tertiary </br>
+            - Rajarata University of Sri Lanka
+        </p>
+        <p>
+            Passion : Become the leading Entrepreneur in flowery plantation industry in Sri Lanka
+        </p>
+    </div>
+  </div> 
+
+    </body>
+</html>
diff --git a/README.md b/README.md
@@ -6,21 +6,21 @@ Below is an overview of the terms. Open the similarly named HTML file and its CS
 
 Videos (2018): [Intro to Web Apps](https://www.youtube.com/channel/UCxbfCtXxHRLvN5cfnehpFLg/videos)
 
-## basic
+## Basic
 
 A plain vanilla HTML page with no CSS.
 
 [Example page](http://macloo.github.io/html_css_templates/basic.html)
 
 File: basic.html
 
-## simple
+## Simple
 
 This page has a CSS file attached. [View page.](http://macloo.github.io/html_css_templates/simple2.html)
 
 File: simple2.html
 
-## box-sizing
+## Box-Sizing
 
 Web pages by beginners often look horribly different in different Web browsers. Often this can be traced back to the ways in which `margin` and `padding` are specified in the CSS. Some web browsers interpret some aspects of `margin` and `padding` differently from other browsers.
 
@@ -32,7 +32,7 @@ Video: [How box-sizing fixes a width problem (demo)](https://www.youtube.com/wat
 
 [Example page](http://macloo.github.io/html_css_templates/boxsizing.html)
 
-## flexbox
+## Flexbox
 
 Beginners can get very confused about the differences among `flex`, `float`, `grid`, and `inline-block` (all covered below). Think of `flex` as the modern solution to solving challenges with a set of small items (or boxes) on a page. However, for a full-page layout solution, look to `grid` instead.
 
@@ -46,7 +46,7 @@ Resource 3 (video): [Flexbox Tutorial: Real Layout Examples](https://www.youtube
 
 [Example page](http://macloo.github.io/html_css_templates/flexbox.html)
 
-## floats
+## Floats
 
 In CSS, float declarations are commonly used to place elements (such as images, or sidebars) on a page. They pose challenges for beginners, in large part because usually they must be "cleared" after use.
 
@@ -60,7 +60,7 @@ Video: [Clearing floats](https://www.youtube.com/watch?v=cEgwqCWuJXs&list=PLZFU-
 
 Video: [Comparing floats with positioning (demo)](https://www.youtube.com/watch?v=LaQZj1pXxG4&index=28&list=PLZFU-W6LLeecJuSQh20QUU_gCmS30sLTB) Relative, absolute, and fixed position are discussed after floats.
 
-## grid
+## Grid
 
 The CSS grid has revolutionized grid-style page layouts, making floats and inline-block styles unnecessary in many cases (but not all). Good planning is required before you can implement the grid effectively. See also `flexbox` above.
 
@@ -76,7 +76,7 @@ Resource 4: [Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROt
 
 Resource 5: [Grid by Example](https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR) &mdash; super-short videos that each show how to do just one thing, by Rachel Andrew (check out her [website](https://gridbyexample.com/) too)
 
-## inline-block
+## Inline-Block
 
 It's possible to replace the `float` techniques with `display: inline-block`. Each method has issues, and each method requires that we use `box-sizing` to make it work properly. Beginners must understand that they cannot use the two together; it's an either/or choice.
 
@@ -90,16 +90,22 @@ This stylesheet is widely used throughout the web design community to smooth out
 
 Resource: [Normalize.css](https://necolas.github.io/normalize.css/)
 
-## universal selector
+## Universal Selector
 
 The web design community expresses various opinions about use of the universal selector (\*) in CSS. It should not be overused. I use it for `box-sizing` in most of my CSS stylesheets.
 
 Resource: [Universal selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) (MDN)
 
-## viewport / responsive pages
+## Viewport / Responsive Pages
 
 All the pages here use the <em>viewport meta tag</em> in the HTML `head` element. It helps to make your pages look good on small screens, i.e. mobile. However, just slapping the tag on your page does not instantly fix everything.
 
 Resource 1: [Stop using the viewport meta tag (until you know how to use it)](http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho)
 
 Resource 2: [Use CSS media queries for responsiveness](https://developers.google.com/web/fundamentals/design-and-ui/responsive/#css-media-queries)
+
+## HTML Two Column Layout
+
+When creating simple html sites very often you have to create two or more column layouts. In this file you can see how to create two column layouts with the help of html and css.
+
+Resource 1: [How to create columns in HTML](https://www.educative.io/edpresso/how-to-create-columns-in-html)
diff --git a/css/column.css b/css/column.css
@@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+}
+
+/* Create two equal columns that floats next to each other */
+.column {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/simple.html b/simple.html
@@ -3,27 +3,21 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="Simple HTML Tutorials">
+        <meta name="keywords" content="HTML, CSS, Responsive">
 	<title> Simple page for all device sizes </title>
 	<link rel="stylesheet" href="css/normalize.min.css">
 	<link rel="stylesheet" href="css/simple.css">
 </head>
 
 <body>
 
-	<h1>A simple page for all device sizes</h1>
+	<h1>A simple page for all device sizes.</h1>
 
-	<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">max-width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.</p>
+	<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">Max-Width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.</p>
 
 	<p>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a> is required here, because the CSS adapts to any screen size.</p>
 
-	<img src="images/sita.jpg" alt="Sita">
-
-	<p>Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.*</p>
-
-	<img src="images/rama.jpg" alt="Rama">
-
-	<p>Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.*</p>
-
 	<p>Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.</p>
 
 	<img src="images/screenshot.png" alt="Screenshot">