mirror of
https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git
synced 2025-11-09 18:03:06 +01:00
feat(ch 3): added
This commit is contained in:
Rafa Muñoz
525
Unidad_03_HTML/HTML/036-spotless/default.css
Normal file
525
Unidad_03_HTML/HTML/036-spotless/default.css
Normal file
@@ -0,0 +1,525 @@
|
||||
html, body
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
background: #FFF;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 12pt;
|
||||
font-weight: 300;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p, ol, ul
|
||||
{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ol, ul
|
||||
{
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
line-height: 180%;
|
||||
}
|
||||
|
||||
strong
|
||||
{
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: #d31e0b;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
overflow: hidden;
|
||||
margin: 0em auto;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.header
|
||||
{
|
||||
margin-bottom: 4em;
|
||||
padding-left: 2em;
|
||||
border-left: 6px solid #d31e0b;
|
||||
}
|
||||
|
||||
.header h2
|
||||
{
|
||||
text-transform: uppercase;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.header span
|
||||
{
|
||||
display: block;
|
||||
padding-top: 0.50em;
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Image Style */
|
||||
/*********************************************************************************/
|
||||
|
||||
.image
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.image img
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-full
|
||||
{
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
.image-left
|
||||
{
|
||||
float: left;
|
||||
margin: 0 2em 2em 0;
|
||||
}
|
||||
|
||||
.image-centered
|
||||
{
|
||||
display: block;
|
||||
margin: 0 0 2em 0;
|
||||
}
|
||||
|
||||
.image-centered img
|
||||
{
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* List Styles */
|
||||
/*********************************************************************************/
|
||||
|
||||
|
||||
ul.style2
|
||||
{
|
||||
margin: 0;
|
||||
padding-top: 1em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.style2 li
|
||||
{
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 0.80em 0 0.80em 0;
|
||||
font-family: 0.80em;
|
||||
}
|
||||
|
||||
ul.style2 li:before
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
background: #DB3256;
|
||||
}
|
||||
|
||||
ul.style2 a
|
||||
{
|
||||
display: inline-block;
|
||||
color: #35514f;
|
||||
}
|
||||
|
||||
ul.style2 li:first-child
|
||||
{
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Social Icon Styles */
|
||||
/*********************************************************************************/
|
||||
|
||||
ul.contact
|
||||
{
|
||||
margin: 0;
|
||||
padding: 2em 0em 0em 0em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.contact li
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 0em 0.30em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
ul.contact li span
|
||||
{
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.contact li a
|
||||
{
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
ul.contact li a:before
|
||||
{
|
||||
display: inline-block;
|
||||
background: #3f3f3f;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
|
||||
ul.contact li a.icon-facebook:before { background: #39599F; }
|
||||
ul.contact li a.icon-dribbble:before { background: #C4376B; }
|
||||
ul.contact li a.icon-tumblr:before { background: #31516A; }
|
||||
ul.contact li a.icon-rss:before { background: #F2600B; }
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Button Style */
|
||||
/*********************************************************************************/
|
||||
|
||||
.button
|
||||
{
|
||||
display: inline-block;
|
||||
margin-top: 2em;
|
||||
padding: 1em 2em 1em 2em;
|
||||
background: #d31e0b;
|
||||
border-bottom: 4px solid #9e1506;
|
||||
letter-spacing: 0.20em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 0.90em;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.button:before
|
||||
{
|
||||
display: inline-block;
|
||||
background: #FFC31F;
|
||||
margin-right: 1em;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
color: #272925;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* 4-column */
|
||||
/*********************************************************************************/
|
||||
|
||||
.box1,
|
||||
.box2,
|
||||
.box3,
|
||||
.box4
|
||||
{
|
||||
width: 282px;
|
||||
}
|
||||
|
||||
.box1,
|
||||
.box2,
|
||||
.box3
|
||||
{
|
||||
float: left;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.box4
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* 3-column */
|
||||
/*********************************************************************************/
|
||||
|
||||
.boxA,
|
||||
.boxB,
|
||||
.boxC
|
||||
{
|
||||
width: 384px;
|
||||
}
|
||||
|
||||
.boxA,
|
||||
.boxB
|
||||
{
|
||||
float: left;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.boxC
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* 2-column */
|
||||
/*********************************************************************************/
|
||||
|
||||
.tbox1,
|
||||
.tbox2
|
||||
{
|
||||
width: 588px;
|
||||
}
|
||||
|
||||
.tbox1
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tbox2
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Header */
|
||||
/*********************************************************************************/
|
||||
|
||||
#header
|
||||
{
|
||||
position: relative;
|
||||
padding: 3em 0em;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Logo */
|
||||
/*********************************************************************************/
|
||||
|
||||
#logo
|
||||
{
|
||||
}
|
||||
|
||||
#logo h1
|
||||
{
|
||||
}
|
||||
|
||||
#logo h1 a
|
||||
{
|
||||
color: #d31e0b;
|
||||
}
|
||||
|
||||
#logo span
|
||||
{
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.90em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#logo a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Menu */
|
||||
/*********************************************************************************/
|
||||
|
||||
#menu-wrapper
|
||||
{
|
||||
overflow: hidden;
|
||||
height: 60px;
|
||||
background: #d31e0b;
|
||||
border-bottom: 4px solid #9e1506;
|
||||
}
|
||||
|
||||
#menu
|
||||
{
|
||||
}
|
||||
|
||||
#menu ul
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#menu li
|
||||
{
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#menu li a, #menu li span
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 1em 3em 1em 0em;
|
||||
line-height: 60px;
|
||||
letter-spacing: 0.10em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.90em;
|
||||
font-weight: 300;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#menu li:hover a, #menu li.active a, #menu li.active span
|
||||
{
|
||||
}
|
||||
|
||||
#menu .current_page_item a
|
||||
{
|
||||
}
|
||||
|
||||
#menu .icon
|
||||
{
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Banner */
|
||||
/*********************************************************************************/
|
||||
|
||||
#banner
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 5em 0em 0em 0em;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Page */
|
||||
/*********************************************************************************/
|
||||
|
||||
#page
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 5em 0em;
|
||||
}
|
||||
|
||||
#page h3
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
text-transform: uppercase;
|
||||
font-size: 2em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Content */
|
||||
/*********************************************************************************/
|
||||
|
||||
#content
|
||||
{
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Sidebar */
|
||||
/*********************************************************************************/
|
||||
|
||||
#sidebar
|
||||
{
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Portfolio */
|
||||
/*********************************************************************************/
|
||||
|
||||
#portfolio
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 5em 0em;
|
||||
}
|
||||
|
||||
#portfolio h3
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#portfolio .icon
|
||||
{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #6648B0;
|
||||
margin: 0px auto 20px auto;
|
||||
line-height: 80px;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Footer */
|
||||
/*********************************************************************************/
|
||||
|
||||
#footer
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 5em 0em;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
#footer h3
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/*********************************************************************************/
|
||||
/* Copyright */
|
||||
/*********************************************************************************/
|
||||
|
||||
#copyright
|
||||
{
|
||||
overflow: hidden;
|
||||
padding: 5em 0em;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
#copyright p
|
||||
{
|
||||
letter-spacing: 0.20em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.80em;
|
||||
color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
#copyright a
|
||||
{
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user