|
|
(42 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{Team:TPHS/Main}} | + | {{Team:TP_CC-SanDiego/ContentFix}} |
- | | + | {{Team:TP_CC-SanDiego/Main}} |
- | <html>
| + | |
- | <style>
| + | |
- | /*CSS for Slider
| + | |
- | #HomePageContent {
| + | |
- | position: relative;
| + | |
- | top: 108px;
| + | |
- | }
| + | |
- | | + | |
- | #Banner {
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | /* Slider Styles */
| + | |
- | #Slider {
| + | |
- | position: relative;
| + | |
- | width: 100%;
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider .Slides {
| + | |
- | width: 100%;
| + | |
- | height: 100%;
| + | |
- | background-size: 100%, auto;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide0 {
| + | |
- | background-image: url();
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide1 {
| + | |
- | background-image: url();
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide2 {
| + | |
- | background-image: url();
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide3 {
| + | |
- | background-image: url();
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide4 {
| + | |
- | background-image: url();
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #Slide5 {
| + | |
- | background-image: url();
| + | |
- | display: none;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #BottomLinks {
| + | |
- | position: absolute;
| + | |
- | width: 100%;
| + | |
- | padding: 0;
| + | |
- | bottom: 0;
| + | |
- | background: #353132;
| + | |
- | text-align: center;
| + | |
- | opacity: 0.61;
| + | |
- | filter: alpha(opacity=61);
| + | |
- | }
| + | |
- | | + | |
- | #Slider #BottomLinks li {
| + | |
- | display: inline-table;
| + | |
- | list-style: none;
| + | |
- | height: 100%;
| + | |
- | color: #FFFFFF;
| + | |
- | font: 24px Raleway, Arial, san-serif;
| + | |
- | text-align: center;
| + | |
- | padding: 15px 20px;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #BottomLinks li:hover {
| + | |
- | cursor: pointer;
| + | |
- | text-decoration: underline;
| + | |
- | }
| + | |
- | | + | |
- | #Slider .SideBar {
| + | |
- | position: absolute;
| + | |
- | top: 0;
| + | |
- | width: 90px;
| + | |
- | z-index: 1;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #LeftBar {
| + | |
- | left: 0;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #RightBar {
| + | |
- | right: 0;
| + | |
- | }
| + | |
- | | + | |
- | #Slider #LeftArrow {
| + | |
- | position: absolute;
| + | |
- | width: 60px;
| + | |
- | height: 60px;
| + | |
- | margin-left: 30px;
| + | |
- | background: url(https://static.igem.org/mediawiki/2013/5/53/2013UCalgaryArrowLeft.png) top no-repeat;
| + | |
- | } | + | |
- | | + | |
- | #Slider #RightArrow {
| + | |
- | position: absolute;
| + | |
- | width: 60px;
| + | |
- | height: 60px;
| + | |
- | margin-right: 30px;
| + | |
- | background: url(https://static.igem.org/mediawiki/2013/5/56/2013UCalgaryArrowRight.png) top no-repeat;
| + | |
- | } | + | |
- | | + | |
- | #Slider #LeftArrow:hover, #Slider #RightArrow:hover {
| + | |
- | background-position: bottom;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | | + | |
- | /* Other Styles */
| + | |
- | #Overview {
| + | |
- | width: 100%;
| + | |
- | background: #E7E7E7;
| + | |
- | padding: 25px 7.5% 40px 5%;
| + | |
- | box-shadow: inset 0 0 20px 5px #888888;
| + | |
- | text-align: left;
| + | |
- | }
| + | |
- | | + | |
- | #Overview p {
| + | |
- | margin: 18px 0 0 30px;
| + | |
- | text-indent: 50px;
| + | |
- | }
| + | |
- | | + | |
- | #Overview i, #Overview em, #Overview b, #Overview strong {
| + | |
- | font-size: 18px;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks {
| + | |
- | overflow: hidden;
| + | |
- | width: 100%;
| + | |
- | background: #383132;
| + | |
- | margin: 0 auto;
| + | |
- | padding: 10px;
| + | |
- | text-align: center;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks a:hover {
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .DescriptionLink {
| + | |
- | float: left;
| + | |
- | margin: 3%;
| + | |
- | height: 400px;
| + | |
- | width: 440px;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .DescriptionLink h2 {
| + | |
- | margin: 0;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .Clear {
| + | |
- | clear: both;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .Wrap {
| + | |
- | margin: auto;
| + | |
- | min-width: 270px;
| + | |
- | max-width: 1000px;
| + | |
- | display: block;
| + | |
- | margin: auto;
| + | |
- | border: 0;
| + | |
- | padding: 0;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .DescriptionLink {
| + | |
- | background: #4F494A;
| + | |
- | padding: 20px;
| + | |
- | position: relative;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks .DescriptionLink p {
| + | |
- | padding-left: 0;
| + | |
- | text-indent: 0;
| + | |
- | position: absolute;
| + | |
- | bottom: 10px;
| + | |
- | padding-right: 20px;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink1 {
| + | |
- | background: #299D77;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink1:hover {
| + | |
- | background: #53B092;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink2 {
| + | |
- | background: #87CA7A;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink2:hover {
| + | |
- | background: #9FD494;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink3 {
| + | |
- | background: #E68930;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink3:hover {
| + | |
- | background: #EBA059;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink4 {
| + | |
- | background: #EDB74B;
| + | |
- | }
| + | |
- | | + | |
- | #SectionLinks #DescriptionLink4:hover {
| + | |
- | background: #F0C56E;
| + | |
- | }
| + | |
- | | + | |
- | h1, h2, h3 {
| + | |
- | font-family: 'Raleway', Helvetica, Arial, sans-serif;
| + | |
- | line-height: 1.6;
| + | |
- | text-align: left;
| + | |
- | }
| + | |
- | | + | |
- | h1 {
| + | |
- | font-size: 35px;
| + | |
- | font-weight: 700;
| + | |
- | border-bottom: 3px solid #5A5A5A;
| + | |
- | color: #111111;
| + | |
- | margin: 0 -20px;
| + | |
- | padding-left: 20px;
| + | |
- | }
| + | |
- | | + | |
- | h2 {
| + | |
- | font-size: 28px;
| + | |
- | font-weight: 600;
| + | |
- | color: #333333;
| + | |
- | margin-top: 30px;
| + | |
- | }
| + | |
- | | + | |
- | h3 {
| + | |
- | font-size: 26px;
| + | |
- | font-weight: 500;
| + | |
- | color: #333333;
| + | |
- | padding-left: 20px;
| + | |
- | }
| + | |
- | | + | |
- | p {
| + | |
- | font: 18px/1.6 'Segoe UI', Calibri, Helvetica, sans-serif;
| + | |
- | margin: 4px 0 12px 0;
| + | |
- | padding-left: 20px;
| + | |
- | text-indent: 50px;
| + | |
- | color: #000000;
| + | |
- | text-align:justify;
| + | |
- | text-justify:inter-word;
| + | |
- | } | + | |
- | | + | |
- | p i {
| + | |
- | font-size: 18px;
| + | |
- | } | + | |
- | </style>
| + | |
- | <script>
| + | |
- | $(document).ready(function() {
| + | |
- | //Display slider for Javascript users
| + | |
- | $('#Slider').css('display', 'block');
| + | |
- |
| + | |
- | //Set height of slider (16/5 ratio)
| + | |
- | $('#Slider').css('height', ($('body').width() / 3.2));
| + | |
- |
| + | |
- | //Position right/left arrows
| + | |
- | var BarHeight = $('#Slider').height() - $('#BottomLinks').height();
| + | |
- | $('#LeftBar, #RightBar').css('height', BarHeight);
| + | |
- | $('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
| + | |
- | | + | |
- | //Repeats for window resize
| + | |
- | $(window).resize(function() {
| + | |
- | $('#Slider').css('height', ($('body').width() / 3.2));
| + | |
- |
| + | |
- | var BarHeight = $('#Slider').height() - $('#BottomLinks').height();
| + | |
- | $('#LeftBar, #RightBar').css('height', BarHeight);
| + | |
- | $('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
| + | |
- | });
| + | |
- |
| + | |
- | var TotalSlides = $('.Slides').length;
| + | |
- | var CurrentSlide = 0;
| + | |
- | | + | |
- | $('#RightArrow').click(function() {
| + | |
- | CurrentSlide = ++CurrentSlide % TotalSlides;
| + | |
- | changeSlide(CurrentSlide);
| + | |
- | });
| + | |
- |
| + | |
- | $('#LeftArrow').click(function() {
| + | |
- | CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
| + | |
- | changeSlide(CurrentSlide);
| + | |
- | });
| + | |
- |
| + | |
- | $('.SlideLink').click(function() {
| + | |
- | var ClickedSlide = $(this).attr('id');
| + | |
- | CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
| + | |
- | changeSlide(CurrentSlide);
| + | |
- | });
| + | |
- |
| + | |
- | function changeSlide(num){
| + | |
- | var SlideID = '#Slide' + num;
| + | |
- | $('.Slides').css('display', 'none');
| + | |
- | $(SlideID).css('display', 'block');
| + | |
- | }
| + | |
- | });
| + | |
- | </script>
| + | |
- | </head>
| + | |
- |
| + | |
- | <body>
| + | |
- | <section id="HomePageContent">
| + | |
- | <div id="Slider">
| + | |
- | <div id="Slide0" class="Slides current"></div>
| + | |
- | <div id="Slide1" class="Slides"></div>
| + | |
- | <div id="Slide2" class="Slides"></div>
| + | |
- | <div id="Slide3" class="Slides"></div>
| + | |
- |
| + | |
- | <div id="LeftBar" class="SideBar"><div id="LeftArrow"></div></div>
| + | |
- | <div id="RightBar" class="SideBar"><div id="RightArrow"></div></div>
| + | |
- | <ul id="BottomLinks">
| + | |
- | <li id="Link0" class="SlideLink">Introduction</li>
| + | |
- | <li id="Link1" class="SlideLink">The Situation</li>
| + | |
- | <li id="Link2" class="SlideLink">The Problem</li>
| + | |
- | <li id="Link3" class="SlideLink">The Solution</li>
| + | |
- |
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | </html>
| + | |