|
|
| (20 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <style>
| |
| − | /**************** Configs ***********************/
| |
| | | | |
| − | /*************/
| |
| − | /* sideMenu */
| |
| − | /*************/
| |
| − |
| |
| − | #sideMenu
| |
| − | {
| |
| − | display:none; /* Disable the display of the side main menu*/
| |
| − | }
| |
| − |
| |
| − | #top_title
| |
| − | {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | /**************/
| |
| − |
| |
| − | html, body
| |
| − | {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | body
| |
| − | {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | background: #9B9BFF;
| |
| − | font-family: "Myriad Pro", 'Didact Gothic', sans-serif;
| |
| − | font-size: 12pt;
| |
| − | font-weight: 200;
| |
| − | color: #FFF;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | h1
| |
| − | {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | color: #9B9BFF;
| |
| − | }
| |
| − |
| |
| − | h2, h3
| |
| − | {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | p, ol, ul
| |
| − | {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − |
| |
| − | ol, ul
| |
| − | {
| |
| − | padding: 0;
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | p
| |
| − | {
| |
| − | line-height: 180%;
| |
| − | }
| |
| − |
| |
| − | strong
| |
| − | {
| |
| − | }
| |
| − |
| |
| − | a
| |
| − | {
| |
| − | color: #ee0000;
| |
| − | }
| |
| − |
| |
| − | a:hover
| |
| − | {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .container
| |
| − | {
| |
| − | overflow: hidden;
| |
| − | margin: 0em auto;
| |
| − | max-width: 1200px;
| |
| − | }
| |
| − |
| |
| − | /***********************/
| |
| − | /* 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.style1
| |
| − | {
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /***************************/
| |
| − | /* 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: #000000;
| |
| − | }
| |
| − |
| |
| − | 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;
| |
| − | padding: 1em 1em 1em 1em;
| |
| − | letter-spacing: 0.10em;
| |
| − | margin-top: 2em;
| |
| − | border: 2px solid #000000;
| |
| − | border-radius: 6px;
| |
| − | text-decoration: none;
| |
| − | font-weight: 700;
| |
| − | font-size: 1em;
| |
| − | background-color: #9B9BFF;
| |
| − | }
| |
| − |
| |
| − | .button-alt
| |
| − | {
| |
| − | padding: 1em 2em;
| |
| − | border-color: #9B9BFF;
| |
| − | background-color: #9B9BFF;
| |
| − | }
| |
| − |
| |
| − | /*********************/
| |
| − | /* 4-column config */
| |
| − | /*********************/
| |
| − |
| |
| − | .box1,
| |
| − | .box2,
| |
| − | .box3,
| |
| − | .box4
| |
| − | {
| |
| − | max-width: 235px;
| |
| − | }
| |
| − |
| |
| − | .box1,
| |
| − | .box2,
| |
| − | .box3,
| |
| − | {
| |
| − | float: left;
| |
| − | margin-right: 20px;
| |
| − | }
| |
| − |
| |
| − | .box4
| |
| − | {
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | /*******************/
| |
| − | /* 3-column config */
| |
| − | /*******************/
| |
| − |
| |
| − | .boxA,
| |
| − | .boxB,
| |
| − | .boxC
| |
| − | {
| |
| − | max-width: 384px;
| |
| − | }
| |
| − |
| |
| − | .boxA,
| |
| − | .boxB
| |
| − | {
| |
| − | float: left;
| |
| − | margin-right: 20px;
| |
| − | }
| |
| − |
| |
| − | .boxC
| |
| − | {
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − | /**********************/
| |
| − | /* 2-column config */
| |
| − | /**********************/
| |
| − |
| |
| − | .tbox1,
| |
| − | .tbox2
| |
| − | {
| |
| − | max-width: 575px;
| |
| − | }
| |
| − |
| |
| − | .tbox1
| |
| − | {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | .tbox2
| |
| − | {
| |
| − | float: right;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*********************/
| |
| − | /* Heading Titles */
| |
| − | /*********************/
| |
| − |
| |
| − | .title
| |
| − | {
| |
| − | margin-bottom: 200px;
| |
| − | }
| |
| − |
| |
| − | .title h2
| |
| − | {
| |
| − | font-size: 24px;
| |
| − | }
| |
| − |
| |
| − | .title .byline
| |
| − | {
| |
| − | font-size: 18px;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | /**********************/
| |
| − | /* Header -wrapper */
| |
| − | /**********************/
| |
| − |
| |
| − | #wrapper
| |
| − | {
| |
| − | position: relative;
| |
| − | padding: 5em 0em 7em 0em;
| |
| − | background: #FFF;
| |
| − | }
| |
| − |
| |
| − | /**************/
| |
| − | /* Header */
| |
| − | /**************/
| |
| − |
| |
| − | #header-wrapper
| |
| − | {
| |
| − | position: relative;
| |
| − | padding: 0em 0em 0em 0em;
| |
| − | background: #FFFFFF;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | #header
| |
| − | {
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | /**********/
| |
| − | /* Logo */
| |
| − | /**********/
| |
| − |
| |
| − | #logo
| |
| − | {
| |
| − | position: relative;
| |
| − | float: left;
| |
| − | top: 0em;
| |
| − | left: 0;
| |
| − | height :256px;
| |
| − | width: 256px;
| |
| − | }
| |
| − |
| |
| − | #logo h1
| |
| − | {
| |
| − | font-size: 32px;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | #logo a
| |
| − | {
| |
| − | text-decoration: none;
| |
| − | color: rgba(255,255,255,1);
| |
| − | }
| |
| − |
| |
| − | /*********/
| |
| − | /* Menu */
| |
| − | /*********/
| |
| − |
| |
| − | #menu
| |
| − | {
| |
| − | position: relative;
| |
| − | top: 128px;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − | #menu ul
| |
| − | {
| |
| − | display: inline-block;
| |
| − | color: #9B9BFF;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #menu li
| |
| − | {
| |
| − | display: block;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #menu li a, #menu li span
| |
| − | /* Menu buttons settings*/
| |
| − | {
| |
| − | padding: 1em 2em 1em 2em;
| |
| − | letter-spacing: 1px;
| |
| − | text-decoration: none;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 0.8em;
| |
| − | color: #9B9BFF;
| |
| − | }
| |
| − |
| |
| − | #menu li.active a, #menu li.active span
| |
| − | {
| |
| − | /**/
| |
| − | }
| |
| − |
| |
| − | #menu li:hover a
| |
| − | {
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | #menu .active a
| |
| − | /* Menu Homepage button settings*/
| |
| − | {
| |
| − | border: 3px solid #9B9BFF;
| |
| − | border-radius: 5px;
| |
| − | color: #9B9BFF;
| |
| − | }
| |
| − |
| |
| − | #menu .icon
| |
| − | {
| |
| − | }
| |
| − |
| |
| − | /*************/
| |
| − | /* Banner */
| |
| − | /*************/
| |
| − |
| |
| − | #banner
| |
| − | {
| |
| − | padding-top: 10em;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #banner .title h2
| |
| − | {
| |
| − | font-size: 2em;
| |
| − | }
| |
| − |
| |
| − | #banner .title .byline
| |
| − | {
| |
| − | font-size: 1.5em;
| |
| − | }
| |
| − |
| |
| − | #banner .button
| |
| − | {
| |
| − | margin-top: 2em;
| |
| − | padding: 1.40em 3em;
| |
| − | border: 2px solid rgba(255,255,255,1);
| |
| − | border-radius: 6px;
| |
| − | font-weight: 700;
| |
| − | font-size: 1em;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | /***********/
| |
| − | /* Page */
| |
| − | /***********/
| |
| − |
| |
| − | #page
| |
| − | {
| |
| − | }
| |
| − |
| |
| − | /************/
| |
| − | /* Content */
| |
| − | /************/
| |
| − |
| |
| − | #content
| |
| − | {
| |
| − | padding:0px;
| |
| − | width:100%;
| |
| − | margin-top:1%;
| |
| − | margin-left:0%;
| |
| − | margin-right:0%;
| |
| − | margin-bottom:1%;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /***************************/
| |
| − | /* footer (in UI_footer) */
| |
| − | /***************************/
| |
| − |
| |
| − | #footer
| |
| − | {
| |
| − | overflow: hidden;
| |
| − | padding: 5em 0em;
| |
| − | border-top: 1px solid rgba(0,0,0,0.08);
| |
| − | }
| |
| − |
| |
| − | #footer p
| |
| − | {
| |
| − | text-align: center;
| |
| − | font-size: 1em;
| |
| − | color: rgba(0,0,0,0.3);
| |
| − | }
| |
| − |
| |
| − | #footer a
| |
| − | {
| |
| − | text-decoration: none;
| |
| − | color: rgba(0,0,0,0.6);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*****************/
| |
| − | /* Welcome */
| |
| − | /*****************/
| |
| − |
| |
| − | #welcome
| |
| − | {
| |
| − | position: relative;
| |
| − | padding: 7em 0em 7em 0em;
| |
| − | background: #111111;
| |
| − | background-size: cover;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #welcome .container
| |
| − | {
| |
| − | width: 1000px;
| |
| − | padding: 0px 100px;
| |
| − | color: #000000;
| |
| − | }
| |
| − |
| |
| − | #welcome a
| |
| − | {
| |
| − | color: rgba(255,255,255,1);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /**************/
| |
| − | /* Extra */
| |
| − | /**************/
| |
| − |
| |
| − | #three-column
| |
| − | {
| |
| − | text-align: center;
| |
| − | color: rgba(0,0,0,0.6);
| |
| − | }
| |
| − |
| |
| − | #three-column .fa
| |
| − | {
| |
| − | display: block;
| |
| − | padding: 1em 0em;
| |
| − | color: rgba(0,0,0,1);
| |
| − | font-size: 2em;
| |
| − | }
| |
| − |
| |
| − | #three-column .title h2
| |
| − | {
| |
| − | font-weight: bold;
| |
| − | color: rgba(0,0,0,0.8);
| |
| − | }
| |
| − |
| |
| − | #three-column .title .byline
| |
| − | {
| |
| − | text-align: center;
| |
| − | color: rgba(0,0,0,.5);
| |
| − | }
| |
| − | </style>
| |
| − | </html>
| |
