joeolaoye · May 24, 2019 13:20
diff --git a/chat.css b/chat.css
 /*
 HTML is the language that describes how web content is formatted and presented.
 CSS is the language that describes the appearance of that content.

 The two languages—HTML and CSS—are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa.

 There are a few common terms to CSS and how it targets elements in HTML and sets their appearance.

 Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>. Once an element is selected, a property determines the styles that will be applied to that element. So far we’ve selected an element with a selector and determined what style we’d like to apply with a property. Now we can determine the behavior of that property with a value. 

 p {
  color: orange;
  font-size: 16px;
 }

 The above example is telling the browser to find every paragraph <p></p> in the HTML file and apply the color orange to it's content i.e. text and use the font size 16px, everything in the HTML that matches that selection would be affected by this CSS rule.
 */

 * {
    box-sizing: border-box;
 }

 body {
    background-color: #abd9e9;
    font-family: Arial;
 }

 #container {
    width: 750px;
    height: 800px;
    background: #eff3f7;
    margin: 0 auto;
    font-size: 0;
    border-radius: 5px;
    overflow: hidden;
 }

 aside {
    width: 260px;
    height: 800px;
    background-color: #3b3e49;
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
 }

 main {
    width: 490px;
    height: 800px;
    display: inline-block;
    font-size: 15px;
    vertical-align: top;
 }

 aside header {
    padding: 30px 20px;
 }

 aside input {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 50px 0 20px;
    background-color: #5e616a;
    border: none;
    border-radius: 3px;
    color: #fff;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_search.png);
    background-repeat: no-repeat;
    background-position: 170px;
    background-size: 40px;
 }

 aside input::placeholder {
    color: #fff;
 }

 aside ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: scroll;
    height: 690px;
 }

 aside li {
    padding: 10px 0;
 }

 aside li:hover {
    background-color: #5e616a;
 }

 h2,
 h3 {
    margin: 0;
 }

 aside li img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 20px;
    margin-right: 8px;
 }

 aside li div {
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
 }

 aside li h2 {
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    margin-bottom: 5px;
 }

 aside li h3 {
    font-size: 12px;
    color: #7e818a;
    font-weight: normal;
 }

 .active {
    background-color: #5e616a;
 }

 .status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
 }

 .green {
    background-color: #58b666;
 }

 .orange {
    background-color: #ff725d;
 }

 .blue {
    background-color: #6fbced;
    margin-right: 0;
    margin-left: 7px;
 }

 main header {
    height: 110px;
    padding: 30px 20px 30px 40px;
 }

 main header>* {
    display: inline-block;
    vertical-align: top;
 }

 main header img:first-child {
    border-radius: 50%;
    width: 50px;
    height: 50px;
 }

 main header img:last-child {
    width: 24px;
    margin-top: 8px;
 }

 main header div {
    margin-left: 10px;
    margin-right: 145px;
 }

 main header h2 {
    font-size: 16px;
    margin-bottom: 5px;
 }

 main header h3 {
    font-size: 14px;
    font-weight: normal;
    color: #7e818a;
 }

 #chat {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: scroll;
    height: 535px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
 }

 #chat li {
    padding: 10px 30px;
 }

 #chat h2,
 #chat h3 {
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
 }

 #chat h3 {
    color: #bbb;
 }

 #chat .entete {
    margin-bottom: 5px;
 }

 #chat .message {
    padding: 20px;
    color: #fff;
    max-width: 90%;
    display: inline-block;
    text-align: left;
    border-radius: 5px;
 }

 #chat .me {
    text-align: right;
 }

 #chat .you .message {
    background-color: #58b666;
 }

 #chat .me .message {
    background-color: #6fbced;
 }

 #chat .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
 }

 #chat .you .triangle {
    border-color: transparent transparent #58b666 transparent;
    margin-left: 15px;
 }

 #chat .me .triangle {
    border-color: transparent transparent #6fbced transparent;
    margin-left: 375px;
 }

 main footer {
    height: 155px;
    padding: 20px 30px 10px 20px;
 }

 main footer textarea {
    resize: none;
    border: none;
    display: block;
    width: 100%;
    height: 80px;
    border-radius: 3px;
    padding: 20px;
    font-size: 13px;
    margin-bottom: 13px;
 }

 main footer textarea::placeholder {
    color: #ddd;
 }

 main footer img {
    height: 30px;
    cursor: pointer;
 }

 main footer a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #6fbced;
    vertical-align: top;
    margin-left: 333px;
    margin-top: 5px;
    display: inline-block;
 }
diff --git a/chat.html b/chat.html
 <!--
    HTML and CSS give us the ability to leave comments within our code, and any content wrapped within a comment will not be displayed on the web page. Comments help keep our files organized, allow us to set reminders, and provide a way for us to more effectively manage our code. Comments become especially useful when there are multiple people working on the same files.

 HTML comments are just like this one you're reading and CSS comments start with /* and end with */.

 <!DOCTYPE html>

    Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
 Elements are identified by the use of less-than and greater-than angle brackets, < >, surrounding the element name. Thus, an element will look like the following:
 <html> </html>
 <head> </head>
 -->
 <html>

 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--
        Below is a reference to the CSS file that is used on this file.
    -->
    <link rel="stylesheet" href="chat.css">
 </head>

 <body>
    <!--
        The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.
 An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.
 A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.
 The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>. What falls between these two tags will be the content of the anchor link.
 So, anchor tags will look a bit like this:
    -->
    <div id="container">
        <!--
            So what exactly are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element. Semantic code describes the value of content on a page, regardless of the style or appearance of that content. There are several benefits to using semantic elements, including enabling computers, screen readers, search engines, and other devices to adequately read and understand the content on a web page. Additionally, semantic HTML is easier to manage and work with, as it shows clearly what each piece of content is about. Moving forward, as new elements are introduced, we’ll talk about what those elements actually mean and the type of content they best represent. Before we do that, though, let’s look at two elements—<div>s and <span>s—that actually don’t hold any semantic value. They exist for styling purposes only.
            
            Both <div>s and <span>s, however, are extremely valuable when building a website in that they give us the ability to apply targeted styles (css) to a contained set of content.       
        -->
        <aside>
            <header>
                <!--
                    Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource. Attributes are defined within the opening tag, after an element’s name. Generally attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value. For example, an <a> element including an href attribute would look like the following: <input type="text" placeholder="search"> type is an attribute of the input element, it describes it.
                -->
                <input type="text" placeholder="search">
            </header>
            <ul>
                <li class="active">
                    <img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/54515342_10216936563378758_8967387055390720000_o.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=10e88da94ff82b6a7e8135f615c2ca94&oe=5D609EA0"
                        alt="">
                    <div>
                        <!--
                            Headings are block-level elements, and they come in six different rankings, <h1> through <h6>. Headings help to quickly break up content and establish hierarchy, and they are key identifiers for users reading a page. They also help search engines to index and determine the content on a page. Headings should be used in an order that is relevant to the content of a page. The primary heading of a page or section should be marked up with an <h1> element, and subsequent headings should use <h2>, <h3>, <h4>, <h5>, and <h6> elements as necessary. Each heading level should be used where it is semantically valued, and should not be used to make text bold or big—there are other, better ways to do that.
                        -->
                        <h2>Olaoye Joseph</h2>
                        <h3>
                            <span class="status green"></span>
                            online
                        </h3>
                    </div>
                </li>
                <li>
                    <img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/55842800_2156360364440840_8578631702660775936_n.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=3afadb40493cccfa5fc1d2a46e791ed6&oe=5D6CA0E4"
                        alt="">
                    <div>
                        <h2>Brad Pitt</h2>
                        <h3>
                            <span class="status green"></span>
                            online
                        </h3>
                    </div>
                </li>
                <li>
                    <img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/52719266_10161398655985161_4737563461104435200_o.png?_nc_cat=109&_nc_ht=scontent.flos7-1.fna&oh=0a70ffbebf8cedc972200409fb5b5f7b&oe=5D63BE44"
                        alt="">
                    <div>
                        <h2>Will Smith</h2>
                        <h3>
                            <span class="status orange"></span>
                            last seen yesterday
                        </h3>
                    </div>
                </li>
                <li>
                    <img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/14568210_103917136753586_5604769658067258966_n.jpg?_nc_cat=109&_nc_ht=scontent.flos7-1.fna&oh=6ae4a742c859b4dfe7792b234e2f6a2a&oe=5D63B097"
                        alt="">
                    <div>
                        <h2>Omotola Jolade</h2>
                        <h3>
                            <span class="status green"></span>
                            online
                        </h3>
                    </div>
                </li>
            </ul>
        </aside>
        <main>
            <header>
                <img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/54515342_10216936563378758_8967387055390720000_o.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=10e88da94ff82b6a7e8135f615c2ca94&oe=5D609EA0"
                    alt="">
                <div>
                    <h2>Olaoye Joseph</h2>
                    <h3>last seen 2:16AM</h3>
                </div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
            </header>
            <ul id="chat">
                <li class="you">
                    <div class="entete">
                        <span class="status green"></span>
                        <h2>Joseph</h2>
                        <h3>10:12AM, Today</h3>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        Hey hi, will I see you later today?
                    </div>
                </li>
                <li class="me">
                    <div class="entete">
                        <h3>10:12AM, Today</h3>
                        <h2>Tola</h2>
                        <span class="status blue"></span>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        Hello Joseph
                    </div>
                </li>
                <li class="me">
                    <div class="entete">
                        <h3>10:12AM, Today</h3>
                        <h2>Tola</h2>
                        <span class="status blue"></span>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        OK
                    </div>
                </li>
                <li class="you">
                    <div class="entete">
                        <span class="status green"></span>
                        <h2>Joseph</h2>
                        <h3>10:12AM, Today</h3>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        I'll come directly after work, we can see a movie.
                    </div>
                </li>
                <li class="me">
                    <div class="entete">
                        <h3>10:12AM, Today</h3>
                        <h2>Tola</h2>
                        <span class="status blue"></span>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        I should be home by then, will be ready.
                    </div>
                </li>
                <li class="me">
                    <div class="entete">
                        <h3>10:12AM, Today</h3>
                        <h2>Tola</h2>
                        <span class="status blue"></span>
                    </div>
                    <div class="triangle"></div>
                    <div class="message">
                        See you.
                    </div>
                </li>
            </ul>
            <footer>
                <textarea placeholder="Type your message"></textarea>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
                <a href="#">Send</a>
            </footer>
        </main>
    </div>
 </body>

 </html>

 <!--
    <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
 </html>


 Every website regardless of complexity, looked like this in the beginning.

 A document type declaration, <!DOCTYPE html> that lets browsers know what type of file it is. followed directly by the <html> element. Inside the <html> element come the <head> and <body> elements. The <head> element includes the character encoding of the page via the <meta charset="utf-8"> tag and the title of the document via the <title> element. The <body> element includes a heading via the <h1> element and a paragraph via the <p> element. Because both the heading and paragraph are nested within the <body> element, they are visible on the web page.

 Understanding this page is avery important first step in knowing web development.
 -->
	/*
	HTML is the language that describes how web content is formatted and presented.
	CSS is the language that describes the appearance of that content.

	The two languages—HTML and CSS—are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa.

	There are a few common terms to CSS and how it targets elements in HTML and sets their appearance.

	Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>. Once an element is selected, a property determines the styles that will be applied to that element. So far we’ve selected an element with a selector and determined what style we’d like to apply with a property. Now we can determine the behavior of that property with a value.

	p {
	color: orange;
	font-size: 16px;
	}

	The above example is telling the browser to find every paragraph <p></p> in the HTML file and apply the color orange to it's content i.e. text and use the font size 16px, everything in the HTML that matches that selection would be affected by this CSS rule.
	*/

	* {
	box-sizing: border-box;
	}

	body {
	background-color: #abd9e9;
	font-family: Arial;
	}

	#container {
	width: 750px;
	height: 800px;
	background: #eff3f7;
	margin: 0 auto;
	font-size: 0;
	border-radius: 5px;
	overflow: hidden;
	}

	aside {
	width: 260px;
	height: 800px;
	background-color: #3b3e49;
	display: inline-block;
	font-size: 15px;
	vertical-align: top;
	}

	main {
	width: 490px;
	height: 800px;
	display: inline-block;
	font-size: 15px;
	vertical-align: top;
	}

	aside header {
	padding: 30px 20px;
	}

	aside input {
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 50px 0 20px;
	background-color: #5e616a;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_search.png);
	background-repeat: no-repeat;
	background-position: 170px;
	background-size: 40px;
	}

	aside input::placeholder {
	color: #fff;
	}

	aside ul {
	padding-left: 0;
	margin: 0;
	list-style-type: none;
	overflow-y: scroll;
	height: 690px;
	}

	aside li {
	padding: 10px 0;
	}

	aside li:hover {
	background-color: #5e616a;
	}

	h2,
	h3 {
	margin: 0;
	}

	aside li img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-left: 20px;
	margin-right: 8px;
	}

	aside li div {
	display: inline-block;
	vertical-align: top;
	margin-top: 12px;
	}

	aside li h2 {
	font-size: 14px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 5px;
	}

	aside li h3 {
	font-size: 12px;
	color: #7e818a;
	font-weight: normal;
	}

	.active {
	background-color: #5e616a;
	}

	.status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 7px;
	}

	.green {
	background-color: #58b666;
	}

	.orange {
	background-color: #ff725d;
	}

	.blue {
	background-color: #6fbced;
	margin-right: 0;
	margin-left: 7px;
	}

	main header {
	height: 110px;
	padding: 30px 20px 30px 40px;
	}

	main header>* {
	display: inline-block;
	vertical-align: top;
	}

	main header img:first-child {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	}

	main header img:last-child {
	width: 24px;
	margin-top: 8px;
	}

	main header div {
	margin-left: 10px;
	margin-right: 145px;
	}

	main header h2 {
	font-size: 16px;
	margin-bottom: 5px;
	}

	main header h3 {
	font-size: 14px;
	font-weight: normal;
	color: #7e818a;
	}

	#chat {
	padding-left: 0;
	margin: 0;
	list-style-type: none;
	overflow-y: scroll;
	height: 535px;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	}

	#chat li {
	padding: 10px 30px;
	}

	#chat h2,
	#chat h3 {
	display: inline-block;
	font-size: 13px;
	font-weight: normal;
	}

	#chat h3 {
	color: #bbb;
	}

	#chat .entete {
	margin-bottom: 5px;
	}

	#chat .message {
	padding: 20px;
	color: #fff;
	max-width: 90%;
	display: inline-block;
	text-align: left;
	border-radius: 5px;
	}

	#chat .me {
	text-align: right;
	}

	#chat .you .message {
	background-color: #58b666;
	}

	#chat .me .message {
	background-color: #6fbced;
	}

	#chat .triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	}

	#chat .you .triangle {
	border-color: transparent transparent #58b666 transparent;
	margin-left: 15px;
	}

	#chat .me .triangle {
	border-color: transparent transparent #6fbced transparent;
	margin-left: 375px;
	}

	main footer {
	height: 155px;
	padding: 20px 30px 10px 20px;
	}

	main footer textarea {
	resize: none;
	border: none;
	display: block;
	width: 100%;
	height: 80px;
	border-radius: 3px;
	padding: 20px;
	font-size: 13px;
	margin-bottom: 13px;
	}

	main footer textarea::placeholder {
	color: #ddd;
	}

	main footer img {
	height: 30px;
	cursor: pointer;
	}

	main footer a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	color: #6fbced;
	vertical-align: top;
	margin-left: 333px;
	margin-top: 5px;
	display: inline-block;
	}
	<!--
	HTML and CSS give us the ability to leave comments within our code, and any content wrapped within a comment will not be displayed on the web page. Comments help keep our files organized, allow us to set reminders, and provide a way for us to more effectively manage our code. Comments become especially useful when there are multiple people working on the same files.

	HTML comments are just like this one you're reading and CSS comments start with /* and end with */.

	<!DOCTYPE html>

	Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
	Elements are identified by the use of less-than and greater-than angle brackets, < >, surrounding the element name. Thus, an element will look like the following:
	<html> </html>
	<head> </head>
	-->
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--
	Below is a reference to the CSS file that is used on this file.
	-->
	<link rel="stylesheet" href="chat.css">
	</head>

	<body>
	<!--
	The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.
	An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.
	A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.
	The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>. What falls between these two tags will be the content of the anchor link.
	So, anchor tags will look a bit like this:
	-->
	<div id="container">
	<!--
	So what exactly are semantics? Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element. Semantic code describes the value of content on a page, regardless of the style or appearance of that content. There are several benefits to using semantic elements, including enabling computers, screen readers, search engines, and other devices to adequately read and understand the content on a web page. Additionally, semantic HTML is easier to manage and work with, as it shows clearly what each piece of content is about. Moving forward, as new elements are introduced, we’ll talk about what those elements actually mean and the type of content they best represent. Before we do that, though, let’s look at two elements—<div>s and <span>s—that actually don’t hold any semantic value. They exist for styling purposes only.

	Both <div>s and <span>s, however, are extremely valuable when building a website in that they give us the ability to apply targeted styles (css) to a contained set of content.
	-->
	<aside>
	<header>
	<!--
	Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource. Attributes are defined within the opening tag, after an element’s name. Generally attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value. For example, an <a> element including an href attribute would look like the following: <input type="text" placeholder="search"> type is an attribute of the input element, it describes it.
	-->
	<input type="text" placeholder="search">
	</header>
	<ul>
	<li class="active">
	<img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/54515342_10216936563378758_8967387055390720000_o.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=10e88da94ff82b6a7e8135f615c2ca94&oe=5D609EA0"
	alt="">
	<div>
	<!--
	Headings are block-level elements, and they come in six different rankings, <h1> through <h6>. Headings help to quickly break up content and establish hierarchy, and they are key identifiers for users reading a page. They also help search engines to index and determine the content on a page. Headings should be used in an order that is relevant to the content of a page. The primary heading of a page or section should be marked up with an <h1> element, and subsequent headings should use <h2>, <h3>, <h4>, <h5>, and <h6> elements as necessary. Each heading level should be used where it is semantically valued, and should not be used to make text bold or big—there are other, better ways to do that.
	-->
	<h2>Olaoye Joseph</h2>
	<h3>
	<span class="status green"></span>
	online
	</h3>
	</div>
	</li>
	<li>
	<img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/55842800_2156360364440840_8578631702660775936_n.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=3afadb40493cccfa5fc1d2a46e791ed6&oe=5D6CA0E4"
	alt="">
	<div>
	<h2>Brad Pitt</h2>
	<h3>
	<span class="status green"></span>
	online
	</h3>
	</div>
	</li>
	<li>
	<img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/52719266_10161398655985161_4737563461104435200_o.png?_nc_cat=109&_nc_ht=scontent.flos7-1.fna&oh=0a70ffbebf8cedc972200409fb5b5f7b&oe=5D63BE44"
	alt="">
	<div>
	<h2>Will Smith</h2>
	<h3>
	<span class="status orange"></span>
	last seen yesterday
	</h3>
	</div>
	</li>
	<li>
	<img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/14568210_103917136753586_5604769658067258966_n.jpg?_nc_cat=109&_nc_ht=scontent.flos7-1.fna&oh=6ae4a742c859b4dfe7792b234e2f6a2a&oe=5D63B097"
	alt="">
	<div>
	<h2>Omotola Jolade</h2>
	<h3>
	<span class="status green"></span>
	online
	</h3>
	</div>
	</li>
	</ul>
	</aside>
	<main>
	<header>
	<img src="https://scontent.flos7-1.fna.fbcdn.net/v/t1.0-9/54515342_10216936563378758_8967387055390720000_o.jpg?_nc_cat=106&_nc_ht=scontent.flos7-1.fna&oh=10e88da94ff82b6a7e8135f615c2ca94&oe=5D609EA0"
	alt="">
	<div>
	<h2>Olaoye Joseph</h2>
	<h3>last seen 2:16AM</h3>
	</div>
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
	</header>
	<ul id="chat">
	<li class="you">
	<div class="entete">
	<span class="status green"></span>
	<h2>Joseph</h2>
	<h3>10:12AM, Today</h3>
	</div>
	<div class="triangle"></div>
	<div class="message">
	Hey hi, will I see you later today?
	</div>
	</li>
	<li class="me">
	<div class="entete">
	<h3>10:12AM, Today</h3>
	<h2>Tola</h2>
	<span class="status blue"></span>
	</div>
	<div class="triangle"></div>
	<div class="message">
	Hello Joseph
	</div>
	</li>
	<li class="me">
	<div class="entete">
	<h3>10:12AM, Today</h3>
	<h2>Tola</h2>
	<span class="status blue"></span>
	</div>
	<div class="triangle"></div>
	<div class="message">
	OK
	</div>
	</li>
	<li class="you">
	<div class="entete">
	<span class="status green"></span>
	<h2>Joseph</h2>
	<h3>10:12AM, Today</h3>
	</div>
	<div class="triangle"></div>
	<div class="message">
	I'll come directly after work, we can see a movie.
	</div>
	</li>
	<li class="me">
	<div class="entete">
	<h3>10:12AM, Today</h3>
	<h2>Tola</h2>
	<span class="status blue"></span>
	</div>
	<div class="triangle"></div>
	<div class="message">
	I should be home by then, will be ready.
	</div>
	</li>
	<li class="me">
	<div class="entete">
	<h3>10:12AM, Today</h3>
	<h2>Tola</h2>
	<span class="status blue"></span>
	</div>
	<div class="triangle"></div>
	<div class="message">
	See you.
	</div>
	</li>
	</ul>
	<footer>
	<textarea placeholder="Type your message"></textarea>
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
	<a href="#">Send</a>
	</footer>
	</main>
	</div>
	</body>

	</html>

	<!--
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	</head>
	<body>
	<h1>Hello World</h1>
	<p>This is a web page.</p>
	</body>
	</html>


	Every website regardless of complexity, looked like this in the beginning.

	A document type declaration, <!DOCTYPE html> that lets browsers know what type of file it is. followed directly by the <html> element. Inside the <html> element come the <head> and <body> elements. The <head> element includes the character encoding of the page via the <meta charset="utf-8"> tag and the title of the document via the <title> element. The <body> element includes a heading via the <h1> element and a paragraph via the <p> element. Because both the heading and paragraph are nested within the <body> element, they are visible on the web page.

	Understanding this page is avery important first step in knowing web development.
	-->