602
edits
GMU:(In)visible Networks 2016/First tutor class (view source)
Revision as of 20:33, 20 April 2016
, 20 April 2016→Code
(→Code) |
(→Code) |
||
| Line 86: | Line 86: | ||
</html> | |||
</pre> | |||
If you guys are feeling curious but not so sure about going through a more complicated code you can check this one out. It's a bit more complicated but it is still easy to understand. | |||
<pre> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>This is a title</title> | |||
<style> | |||
h1, h3 {color:#ccc; | |||
font-family: "Verdana";} | |||
.myClass { | |||
margin:20px; | |||
background-color: #000; | |||
color:#FFF; | |||
padding: 10px; | |||
} | |||
.mySecondClass{ | |||
margin: 50px 10px; | |||
padding: 10px 0 50px 100px; | |||
background-color: rgba(255, 0, 0,.3); | |||
} | |||
nav { | |||
font-family: "Verdana"; | |||
font-size: 14px; | |||
margin: 50px; | |||
width: 100%; | |||
} | |||
#menu ul{ | |||
list-style: none; | |||
} | |||
#menu li { | |||
display: inline; | |||
padding: 10px; | |||
color: #000; | |||
} | |||
a { | |||
color: #000; | |||
text-decoration: none; | |||
} | |||
a:hover{ | |||
color: #ccc; | |||
} | |||
.active{ | |||
color: #f9f9f9; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<nav id= "menu"> | |||
<ul> | |||
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">About</a></li> | |||
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">Portfolio</a></li> | |||
<li><a href="https://www.google.com.mx/?gws_rd=ssl" target="_blank">Contact</a></li> | |||
</ul> | |||
</nav> | |||
<div class="myClass"> | |||
<h1>Title</h1> | |||
<p>Some words that make sense for us humans</p> | |||
</div> | |||
<div class="mySecondClass"> | |||
<h3>Title Two</h3> | |||
<p>These words are starting to get lost</p> | |||
</div> | |||
<img src="img/nombre.png"> | |||
</body> | |||
</html> | </html> | ||
</pre> | </pre> | ||