Add code for tutorial 41

covuworie · covuworie · commit 1c79b289306a · 2019-08-23T13:58:26.000-05:00
diff --git a/41/root/img/me.jpg b/41/root/img/me.jpg
diff --git a/41/root/index.html b/41/root/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html> 
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <nav>
+            <ul>
+                <p>ptravels</p>
+                <li><a href="index.html">Home</a></li>
+                <li>
+                    <a href="">Portfolio</a>
+                    <ul>
+                        <li><a href="">Digital art</a></li>
+                        <li><a href="">Video production</a></li>
+                        <li><a href="">Web development</a></li>
+                    </ul>
+                </li>
+                <li><a href="">About me</a></li>
+                <li><a href="">Contact</a></li>
+            </ul>
+        </nav>
+        
+    </body>
+</html>
diff --git a/41/root/style.css b/41/root/style.css
@@ -0,0 +1,69 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-image: url(img/me.jpg);
+    background-size: cover;
+}
+
+nav {
+    width: 100%;
+    height: 60px;
+    background-color: #fff;
+}
+
+nav p {
+    font-family: Arial, Helvetica, sans-serif;
+    color: #222;
+    font-size: 24px;
+    line-height: 55px;
+    float: left;
+    padding: 0px 20px;
+}
+
+nav ul {
+    float: left;
+}
+
+nav ul li {
+    float: left;
+    list-style: none;
+    position: relative;
+}
+
+nav ul li a {
+    display: block;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #222;
+    font-size: 14px;
+    padding: 22px 14px;
+    text-decoration: none;
+}
+
+nav ul li ul {
+    display: none;
+    position: absolute;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 0px 0px 4px 4px;
+}
+
+nav ul li:hover ul {
+    display: block;
+}
+
+
+nav ul li ul li {
+    width: 180px;
+    border-radius: 4px;
+}
+
+nav ul li ul li a {
+    padding: 8px 14px;
+}
+
+nav ul li ul li a:hover {
+    background-color: #f3f3f3;
+}
