Created
June 16, 2013 14:17
-
-
Save samediamba/5792208 to your computer and use it in GitHub Desktop.
A CodePen by Samedi Amba.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| </head> | |
| <body class style=""height: 100%> | |
| <div class="container"><!-- The Main Container --> | |
| <div id="topbar" class="clearfix"><!-- The Topbar --> | |
| <div id="search"><!-- Search Panel --> | |
| Search Area -> Quick Links | |
| </div> <!-- Search --> | |
| </div> <!-- Top Bar --> | |
| <div id="header"><!-- Header --> | |
| <div id="logo"><!-- Logo--> | |
| <p><a href="http://twitter.com/samediamba" target="_blank"></a></p> | |
| </div><!-- Logo <--></--> | |
| <div class="icemegamenu"> <!--The Mega Menu --> | |
| <div class="ice-megamenu-toggle"> <!--toggle --> | |
| <a data-target=".nav-collapse" href="#" data-toggle="collapse">Menu</a> | |
| </div> <!-- toggle --> | |
| <div class="nav-collapse icemegamenu collapse"><!-- Collapse --> | |
| </div> | |
| </div><!-- Collapse --> | |
| </div> <!--The Mega Menu --> | |
| </div> <!-- Header --> | |
| <div id="iceslideshow"> <!-- Slideshow --> | |
| </div> <!-- Slideshow --> | |
| <div class="theslide"> | |
| <br><br><br> | |
| <h3 align="center">This is where the slideshow will be!</h3></div> | |
| <div class="maincontent"> | |
| <div class="content"> | |
| <br><br><br> | |
| <h3 align="center">This is where the main content will be!</h3></div> | |
| <div class="sidebar"> | |
| <br><br><br> | |
| <h3 align="center">This is where the sidebar will be!</h3></div> | |
| </div><!-- main content --> | |
| <div class="message"> | |
| <br> | |
| <h3 align="center">This is where call to action will be!</h3></div> | |
| </div> <!-- The Main Container --> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*-- CODE FOR THE NEW UEAB TEMPLATE -- */ | |
| /* Top Bar */ | |
| #topbar { | |
| margin-bottom: -30px;} | |
| .clearfix{*zoom:1} | |
| .clearfix:before,.clearfix:after{display:table;line-height:0;content:""} | |
| .clearfix:after{clear:both} | |
| element.style { height: 100%; } | |
| div {display:block;} | |
| body { | |
| font-family:Georgia, "Times New Roman", Times, serif; | |
| background:#DBDAD7; | |
| font-size:15px; | |
| line-height:24px; | |
| overflow-x:hidden;} | |
| .container { | |
| width:960px; | |
| margin-right:auto; | |
| /*background: #fff;*/ | |
| } | |
| /*The Search Panel*/ | |
| #search { | |
| text-align: right; | |
| float: right; | |
| color:blue; | |
| font-weight:bold; | |
| position: relative; | |
| /*margin-top: 10px;/*/ | |
| padding:5px; | |
| z-index: 10; | |
| } | |
| /*The Header Area */ | |
| #header { | |
| position: relative; | |
| z-index: 9; | |
| margin-top: 20px; | |
| margin-bottom: 60px/* this value has a parameter as well to make margin 0 when slideshow is enabled*/; | |
| } | |
| #logo { | |
| background-image: url(http://demo.icetheme.com/it_university2/templates/it_university2/images/styles/style4/logo_container.png); | |
| width: 370px; | |
| height: 111px; | |
| position: relative; | |
| margin: 0 0 -75px 0; | |
| padding-right: 15px; | |
| z-index: 9; | |
| } | |
| #logo p a, .logo p a { | |
| background-image: url(http://demo.icetheme.com/it_university2/templates/it_university2/images/styles/style4/logo.png); | |
| } | |
| #logo p a { | |
| width: 264px; | |
| display: block; | |
| height: 90px; | |
| margin-left: 60px; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } | |
| #logo p { | |
| padding-top:10px; | |
| text-align: center; | |
| } | |
| /*The Mega Menu */ | |
| #header > .icemegamenu { | |
| height: 60px; | |
| zoom: 1; | |
| padding-left: 400px; | |
| background: #990000; | |
| background: rgba(153, 0, 0, 0.7); | |
| position: relative; | |
| background-color: #003989; | |
| background-color: rgba(0, 57, 137, 0.7); | |
| } | |
| #header > .icemegamenu { | |
| zoom: 1; | |
| } | |
| .ice-megamenu-toggle { | |
| display: none; | |
| margin: 0; | |
| } | |
| .ice-megamenu-toggle a { | |
| display: block; | |
| height: 45px; | |
| line-height: 45px; | |
| font-size: 18px; | |
| width: 100%; | |
| color: #fff; | |
| text-align: center; | |
| opacity: 1; | |
| margin-top: 0; | |
| border-radius: 5px; | |
| -webkit-transition: all .25s ease-out; | |
| -moz-transition: all .25s ease-out; | |
| -o-transition: all .25s ease-out; | |
| transition: all .25s ease-out; | |
| } | |
| a:visited { | |
| color: #571586; | |
| text-decoration: underline; | |
| } | |
| a:link { | |
| color: #0066A2; | |
| } | |
| a { | |
| color: #08c; | |
| text-decoration: none; | |
| } | |
| a:-webkit-any-link { | |
| color: -webkit-link; | |
| text-decoration: underline; | |
| cursor: auto; | |
| } | |
| .nav-collapse.collapse { | |
| height: auto!important; | |
| overflow: visible!important; | |
| } | |
| .collapse { | |
| position: relative; | |
| height: 0; | |
| overflow: hidden; | |
| -webkit-transition: height .35s ease; | |
| -moz-transition: height .35s ease; | |
| -o-transition: height .35s ease; | |
| transition: height .35s ease; | |
| } | |
| /*The Slideshow */ | |
| #iceslideshow { | |
| position: relative; | |
| overflow: hidden; | |
| padding: 0; | |
| z-index: 8; | |
| margin-top: -60px; | |
| margin-bottom: 60px; | |
| clear: both; | |
| } | |
| .theslide { | |
| background-color:#A88231; | |
| width:960px;height:250px; | |
| border:0 ; | |
| font-family:'Helvetica',arial; | |
| color:#fff; | |
| } | |
| #iceslideshow .iceslideshow { | |
| margin-bottom: 0; | |
| } | |
| .maincontent { | |
| } | |
| .content { | |
| margin-top:10px; | |
| float:left; | |
| background-color:#450680; | |
| width:600px;height:250px; | |
| border:0 ; | |
| font-family:'Helvetica',arial; | |
| color:#fff; | |
| } | |
| .sidebar{ | |
| margin-top:10px; | |
| float:right; | |
| background-color:#9E63D6; | |
| width:320px;height:250px; | |
| border:0; | |
| font-family:'Helvetica',arial; | |
| color:#fff; | |
| } | |
| .message{ | |
| margin-top:270px; | |
| background-color:#9EAB11; | |
| width:100%; | |
| height:100px; | |
| border:0; | |
| font-family:'Helvetica',arial; | |
| color:#fff; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is what will help me jumpstart the new site.