First pass at wedding website
This commit is contained in:
Aaron Lindsay
@ -2,167 +2,129 @@
|
||||
* These styles handle importing the fonts
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Tangerine';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: local('Tangerine'), url('http://aclindsay.com/fonts/Tangerine_Bold.ttf') format('truetype');
|
||||
font-family: 'Tangerine';
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
src: local('Tangerine Bold'), local('Tangerine-Bold'), url('http://wedding.aclindsay.com/fonts/Tangerine_Bold.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Tangerine';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Tangerine'), url('http://aclindsay.com/fonts/Tangerine_Regular.ttf') format('truetype');
|
||||
font-family: 'Tangerine';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Tangerine'), url('http://wedding.aclindsay.com/fonts/Tangerine_Regular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IM Fell DW Pica';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('IM FELL DW Pica Roman'), local('IM_FELL_DW_Pica_Roman'), url('http://aclindsay.com/fonts/IMFePIrm28P.ttf') format('truetype');
|
||||
font-family: 'Cardo';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Cardo'), url('http://wedding.aclindsay.com/fonts/Cardo99s.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Reenie Beanie';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: local('Reenie Beanie'), url('http://aclindsay.com/fonts/ReenieBeanie.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/**
|
||||
* These styles handle layout
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font: 12pt/18pt Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
|
||||
font-family: 'Cardo', Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
|
||||
font-family: 'Cardo', arial, serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #cfcde6;
|
||||
}
|
||||
#header-inner, #content, #footer-inner {
|
||||
width: 80%;
|
||||
min-width: 45em;
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
a {
|
||||
color: #c2bbdd !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#main, #sidebar {
|
||||
position: relative;
|
||||
}
|
||||
#main {
|
||||
float: left;
|
||||
width: 73%;
|
||||
}
|
||||
#sidebar {
|
||||
#header{
|
||||
height: 250px;
|
||||
background-color: #111;
|
||||
}
|
||||
#header img {
|
||||
float: right;
|
||||
width: 23%;
|
||||
}
|
||||
#footer {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* These styles handle look
|
||||
*/
|
||||
|
||||
body {
|
||||
font: normal 100% Helvetica, Arial, sans-serif;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
#header {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
padding: .5em;
|
||||
}
|
||||
#header-inner {
|
||||
position: relative;
|
||||
background: #bb99bb url('flowery.png') 100% 90% no-repeat;
|
||||
height: 100%;
|
||||
-moz-border-radius-bottomleft: 15px;
|
||||
-moz-border-radius-bottomright: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-left: 2px solid #664455;
|
||||
border-right: 2px solid #664455;
|
||||
border-bottom: 2px solid #664455;
|
||||
color: #222;
|
||||
top: 55px;
|
||||
font-family: 'Tangerine', arial, serif;
|
||||
font-size: 45px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
#header-inner #header-wedding {
|
||||
#header-inner div{
|
||||
position: absolute;
|
||||
font-family: 'Reenie Beanie', arial, serif;
|
||||
font-color: #444;
|
||||
font-size: 1.2em;
|
||||
top: .8em;
|
||||
left: 14em;
|
||||
}
|
||||
#header-inner #header-aaron {
|
||||
position: absolute;
|
||||
font-family: 'IM Fell DW Pica', arial, serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
top: 2.5em;
|
||||
left: 3em;
|
||||
font-family: 'Tangerine', arial, serif;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
}
|
||||
#header-inner #header-and {
|
||||
position: absolute;
|
||||
font-family: 'Reenie Beanie', arial, serif;
|
||||
font-color: #444;
|
||||
top: 5.5em;
|
||||
left: 19.5em;
|
||||
top: 52px;
|
||||
left: 200px;
|
||||
font-size: .75em;
|
||||
}
|
||||
#header-inner #header-elizabeth {
|
||||
position: absolute;
|
||||
font-family: 'Tangerine', arial, serif;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
top: 3em;
|
||||
left: 11em;
|
||||
top: 110px;
|
||||
right: 350px;
|
||||
}
|
||||
#header-inner #title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
height: 53px;
|
||||
top: 0em;
|
||||
right: 0em;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
background: url('graphics/cornerStripedLeft.png') no-repeat bottom left;
|
||||
}
|
||||
#header-inner #title a{
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 15px 20px 10px 20px;
|
||||
text-decoration: none;
|
||||
color: #666666;
|
||||
background: url('graphics/cornerStripedRight.png') no-repeat top right;
|
||||
}
|
||||
#header-inner #title a:hover{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#content {
|
||||
padding: 1em 0 0 0;
|
||||
}
|
||||
#main {
|
||||
padding: 0 0 2em 0;
|
||||
margin: 0;
|
||||
}
|
||||
#sidebar {
|
||||
background-color: #ffeeee;
|
||||
margin: 1em 0 1em 0;
|
||||
border: 2px solid #eebb88;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
padding: 5px 0 5px 0;
|
||||
}
|
||||
#sidebar > * {
|
||||
margin: .5em;
|
||||
}
|
||||
#footer {
|
||||
margin: 0;
|
||||
padding: 1em 0 1em 0;
|
||||
#header-inner #header-date {
|
||||
top: 0px;
|
||||
left: 490px;
|
||||
font-size: .7em;
|
||||
text-shadow: #000 0.05em 0.05em 0.1em;
|
||||
}
|
||||
|
||||
#footer-inner {
|
||||
height: 25px;
|
||||
padding: 1em 0 1em 0;
|
||||
text-align: center;
|
||||
background-color: #ccbbaa;
|
||||
border: 2px solid #664455;
|
||||
-moz-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
#content {
|
||||
min-height: 100%;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
background-color: #222;
|
||||
color: white;
|
||||
border-left: 5px solid #000;
|
||||
border-right: 5px solid #000;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#nav ul {
|
||||
padding: 3px 0 2px 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
background-color: #2c0635;
|
||||
background-color: #3d2d53;
|
||||
border-top: 5px solid #000;
|
||||
border-bottom: 5px solid #060606;
|
||||
}
|
||||
#nav ul li{
|
||||
padding: 0;
|
||||
margin: 0 12px 0 12px;
|
||||
display: inline;
|
||||
}
|
||||
#nav ul li a{
|
||||
padding: 6px 12px 6px 12px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
#nav ul li a:hover{
|
||||
background-color: #1f0220;
|
||||
background-color: #27183b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header, #footer, #main {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#footer {
|
||||
color: #9b8bb0;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #9b8bb0;
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user