html css

ButenkoT · ButenkoT · commit 6765ba75de27 · 2016-09-10T00:40:25.000+10:00
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,50 @@
+html, body{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+    background-color: cornsilk;
+    min-height: 775px;
+}
+
+header{
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    background-color: brown;
+    color: white;
+}
+
+section{
+    box-sizing: border-box;
+    flex: 2 auto;
+}
+
+footer{
+    flex: .5 100%;
+    background-color: chocolate;
+}
+
+h1, #logo{
+    text-align: center;
+}
+
+h1{
+    margin: 50px;
+    font-size: 35px;
+}
+
+.settings {
+    margin: 0 auto;
+    max-width: 900px;
+}
+
+.settings > p {
+    font-size: 26px;
+}
+
+footer > ul {
+    list-style: none;
+}
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -6,9 +6,26 @@
   <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
-  <header></header>
-  <section></section>
-  <footer></footer>
+  <header>
+    <div id="logo">
+      <img src="img/logo.png" alt="node-girls-logo">
+    </div>
+  </header>
+
+  <section>
+    <h1 >Hello everyone. Let's do some interactive coding today! </h1>
+    <div class="settings">
+      <p>To open browser console do double click on the screen and console will appear on the bottom or on the right side of the screen. It will work for Chrome and Firefox. For Safari, go to 'Safari > Preferences > Advanced > and tick the box Show Develop menu in menu bar', restart Safari, now you can do double click on the page and see console.</p>
+    </div>
+  </section>
+
+  <footer>
+    <ul>
+      <li>Twitter: @NodeGirlsSydney</li>
+      <li>Facebook: NodeGirlsSydney</li>
+      <li>e-mail: info@nodegirls.sydney</li>
+    </ul>
+  </footer>
 
   <script src="js/level1.js"></script>
 </body>
diff --git a/js/level2.js b/js/level2.js
@@ -1,5 +1,14 @@
 //Level2
 
+/*
+  Now, when we start level2, it is time to interact with html file. HTML files is a structure
+  of our web-page - a skeleton. It combines all files from the project together, that is how
+  it know what to do. If you check on our index.html file on the bottom you will see tag
+  <script src="js/level1js"></script> - that is where we joined our first js file. But now
+  change level1.js file on our current one - level2.js.
+  Now you are ready to start!
+ */
+
 /* Arrays
     It is an ordered list of values. It can keep any number of values inside. And also
     any type of values - numbers, strings, objects.
