(Created page with "Related Links [http://www.w3schools.com/ W3Schools] [http://tympanus.net/codrops/category/tutorials/] [http://www.20thingsilearned.com/en-US 20 Things I learned about browsers ...")
 
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Related Links  
+
===Related Links===
  
 
[http://www.w3schools.com/ W3Schools]
 
[http://www.w3schools.com/ W3Schools]
[http://tympanus.net/codrops/category/tutorials/]
+
 
 +
[http://tympanus.net/codrops/category/tutorials/ Codrops Tutorials]
 +
 
 
[http://www.20thingsilearned.com/en-US 20 Things I learned about browsers and the web]
 
[http://www.20thingsilearned.com/en-US 20 Things I learned about browsers and the web]
 +
 +
===Code===
 +
<pre>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta charset=“utf-8”>
 +
<title> My Website</title>
 +
<style>
 +
html, body { font-family:Verdana;
 +
//background-color:green;
 +
}
 +
h1, h3{
 +
font-family:Verdana;
 +
background-color: #000;
 +
//margin: top right bottom left;
 +
margin: 50px;
 +
padding: 10px 50px 100px 100px;
 +
//margin-top:1000px;
 +
//font-size: 14px;
 +
color: #ccc;
 +
}
 +
 +
p{ background-color: rgba(71, 88, 137, .5);
 +
padding:50px;
 +
color: #ccc;
 +
font-size:20px;
 +
}
 +
nav{
 +
font-size:30px;
 +
color: yellow;
 +
}
 +
ul { text-decoration: none;
 +
text-style:none;
 +
}
 +
 +
li{
 +
display: inline;
 +
padding:50px;
 +
}
 +
 +
a {
 +
color:red;
 +
text-decoration: none;
 +
}
 +
a:hover{
 +
color:yellow;
 +
}
 +
</style>
 +
</head>
 +
 +
<body>
 +
 +
<nav>
 +
<ul>
 +
<li><a href=“https://www.google.com.mx/?gws_rd=ssl”>About</a></li>
 +
<li><a href=“http://www.uni-weimar.de/de/universitaet/start/”>Portfolio</a></li>
 +
<li><a href=“http://www.w3schools.com/”>Contact</a></li>
 +
</ul>
 +
</nav>
 +
 +
 +
 +
<h1>TITLE</h1>
 +
<p>Paragraph</p>
 +
 +
 +
<h3>TITLE</h3>
 +
 +
 +
</body>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</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>
 +
 +
</pre>

Latest revision as of 22:19, 13 February 2017

Related Links

W3Schools

Codrops Tutorials

20 Things I learned about browsers and the web

Code

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<title> My Website</title>
	<style>
		html, body { font-family:Verdana;
			//background-color:green;
}
		h1, h3{ 
			font-family:Verdana;
			background-color: #000;
			//margin: top right bottom left;
			margin: 50px;
			padding: 10px 50px 100px 100px;
			//margin-top:1000px;
			//font-size: 14px;
			color: #ccc;
			} 
		
		p{ background-color: rgba(71, 88, 137, .5);
			padding:50px;
			color: #ccc;
			font-size:20px;
}
		nav{
			font-size:30px;
			color: yellow;
}
		ul { text-decoration: none;
			text-style:none;
		}
		
		li{
			display: inline;
			padding:50px;
}
		
		a {
			color:red;
			text-decoration: none;
}
		a:hover{
			color:yellow;
}
	</style>
</head>

<body>

<nav>
	<ul>
		<li><a href=“https://www.google.com.mx/?gws_rd=ssl”>About</a></li>
		<li><a href=“http://www.uni-weimar.de/de/universitaet/start/”>Portfolio</a></li>
		<li><a href=“http://www.w3schools.com/”>Contact</a></li>
	</ul>
</nav>



<h1>TITLE</h1>
<p>Paragraph</p>


<h3>TITLE</h3>


</body>









</html>


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.

<!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>