Skip to content

Instantly share code, notes, and snippets.

@tim-br
Created November 22, 2015 06:27
Show Gist options
  • Save tim-br/b806d09f9e2bf12f982e to your computer and use it in GitHub Desktop.
Save tim-br/b806d09f9e2bf12f982e to your computer and use it in GitHub Desktop.
Class 17 result CSS desde 0
<!--<head>
<meta charset="utf-8">
<title>Iniciando con CSS</title>
<link href="imagenes/icono-highres.png" rel="shortcut icon" sizes="196x196">
<link href="css/estilos.css" type="text/css" rel="stylesheet">
</head>-->
<h1>Soy el título principal</h1>
<h2>Soy un título secundario</h2>
<p>Cupcake ipsum dolor sit. Amet sesame snaps cake soufflé muffin wafer cookie cotton candy. Jelly caramels brownie. <a href="http://entraencatarsis.com">Bonbon gummi bears carrot cake jelly-o</a> icing ice cream cupcake. Sugar plum jelly beans jelly beans I love lemon drops. Topping apple pie pastry sweet. <span>Soy una cita que se encuentra más grande a la derecha porque soy importante.</span> I love dessert bear claw I love bonbon bonbon gingerbread fruitcake oat cake. Pastry icing unerdwear.com <a href="http://udemy.com">lollipop pudding</a> I love gummies. Liquorice I love jelly beans pudding bonbon.</p>
<p>Candy canes chupa chups pudding <a href="http://cupcakeipsum.com">fruitcake I love candy</a>. Jelly-o croissant ice cream. Topping sugar plum bonbon muffin. I love macaroon tiramisu sesame snaps I love oat cake. Halvah oat cake I love I love jelly-o marzipan <a href="http://lol.com">carrot cake I love</a>. Biscuit apple pie marzipan I love I love donut pudding muffin toffee.</p>
<p>Pie gingerbread muffin gummi bears pastry jelly biscuit I love. Gummi bears chupa chups I love. <a href="http://google.com" target="_blank">Ir a Google</a> Dessert chocolate cake halvah. Chupa chups I love jelly. Brownie oat cake macaroon powder brownie sugar plum applicake danish. Gummies jujubes chupa chups croissant cookie tiramisu. Chupa chups gingerbread chocolate bar pie sugar plum gummi bears lollipop.</p>
<img src="http://marvelipsum.com/300/300/random">
<img src="http://lorempixel.com/300/300">
<img src="http://placehold.it/300x300">
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #999;
margin: 20px 20px 1000px 250px;
background-image: url(http://lorempixel.com/250/300);
background-repeat: repeat-y;
}
h1, h2{
margin: 0 0 20px;
text-transform: uppercase;
font-weight: normal;
cursor: default;
}
h1
{
font-size: 40px;
background-color: #2e7;
color: #fff;
padding: 10px 30px;
}
h2, p, img
{
margin-left: 30px;
}
p
{
letter-spacing: 3px;
line-height: 30px;
}
a
{
color: #c1881b;
text-decoration: none;
cursor: default;
letter-spacing: 0;
padding: 2px 10px;
}
a:hover
{
color: #fff;
background-color: #d6718b;
}
a[href="http://google.com"]
{
color: #cb4fea;
}
a[href="http://google.com"]:hover
{
background-color: #654b1a;
color: #fff;
}
p span
{
display: inline-block;
width: 300px;
float: right;
text-align: right;
margin: 20px, 0, 20px, 20px;
font-size: 30px;
letter-spacing: 0;
font-style: italic;
color: #333;
}
p span:before,
p span:after
{
content: '"';
}
img
{
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment