Difference between revisions of "Template:HSNU-TAIPEI/main"
(218 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | + | #globalWrapper { | |
− | + | padding-bottom: 0; | |
} | } | ||
− | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | + | #contentSub, |
+ | #search-controls, | ||
+ | .firstHeading, | ||
+ | #footer-box, | ||
+ | #catlinks, | ||
+ | #p-logo { | ||
display:none; | display:none; | ||
− | |||
} | } | ||
+ | |||
#top-section { | #top-section { | ||
border: none; | border: none; | ||
height: 0px; | height: 0px; | ||
} | } | ||
− | |||
#content { | #content { | ||
border: none; | border: none; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
font-size: 1rem; | font-size: 1rem; | ||
+ | margin-top: -7px; | ||
} | } | ||
− | + | h1, h2, h3, h4, h5, h6 { | |
− | + | border: none; | |
− | + | color: #584b4f; | |
− | + | ||
− | + | ||
} | } | ||
− | + | /********************** | |
− | + | GENERAL | |
+ | **********************/ | ||
+ | |||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | max-width: 100%; | ||
} | } | ||
.wrapper { | .wrapper { | ||
− | + | width: 100%; | |
− | + | margin: 0; | |
+ | padding: 0; | ||
+ | background: #f7f7f7; | ||
+ | min-height: 100vh; | ||
+ | font-size: 1rem; | ||
+ | background: #fff; | ||
+ | font-family: Helvetica, sans-serif; | ||
} | } | ||
− | + | header { | |
− | + | width: 100%; | |
− | + | height: 80px; | |
− | + | position: fixed; | |
+ | z-index: 100; | ||
+ | top: 14px; | ||
+ | |||
+ | background: #584b4f; | ||
+ | |||
} | } | ||
− | .main-content | + | .is-nav-active { |
− | font-weight: | + | overflow-y: scroll; |
− | font-size: | + | position: fixed; |
+ | } | ||
+ | |||
+ | main { | ||
+ | margin-top: 93px; | ||
+ | } | ||
+ | |||
+ | /********************** | ||
+ | NAVIGATION | ||
+ | **********************/ | ||
+ | |||
+ | .cell { | ||
+ | margin: 0 20px; | ||
+ | } | ||
+ | |||
+ | .cell::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .logo { | ||
+ | float: left; | ||
+ | width: 25%; | ||
+ | } | ||
+ | |||
+ | .logo::before { | ||
+ | content: ""; | ||
+ | background: url('https://static.igem.org/mediawiki/2015/2/2f/HSNU-TAIPEI_logo.png') no-repeat; | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | -webkit-background-size: contain; | ||
+ | -moz-background-size: contain; | ||
+ | -o-background-size: contain; | ||
+ | background-size: contain; | ||
+ | display: inline-block; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .logo a { | ||
+ | display: inline-block; | ||
+ | width: 180px; | ||
+ | margin-top: 28px; | ||
+ | font-size: 32px; | ||
+ | color: #efeae1; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | .logo a:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .logo img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .header-right { | ||
+ | float: left; | ||
+ | width: 75%; | ||
+ | } | ||
+ | |||
+ | .header-right::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .nav { | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | .nav-btn { | ||
+ | float: right; | ||
+ | display: block !important; | ||
+ | text-decoration: none; | ||
+ | font-size: 24px; | ||
+ | margin: -8px; | ||
+ | padding: 10px 12px; | ||
+ | border: 3px solid #42383B; | ||
+ | color: #faf6ec !important; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | .nav-btn:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .nav-btn img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .main-nav { | ||
+ | display: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | .close-btn { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | right: 20px; | ||
+ | z-index: 100; | ||
+ | font-size: 32px; | ||
+ | color: #584b4f; | ||
+ | } | ||
+ | |||
+ | .list-item { | ||
+ | list-style: none; | ||
+ | margin: 10px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .list-item a { | ||
+ | text-decoration: none; | ||
+ | font-size: 1.1em; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | font-weight: 600; | ||
+ | color: #efeae1; | ||
+ | } | ||
+ | |||
+ | .open-nav { | ||
+ | display: block !important; | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: rgba(239, 234, 225, 0.95); | ||
+ | top: 12px; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | z-index: 20; | ||
+ | overflow-y: auto; | ||
+ | margin: 0 !important; | ||
+ | padding-top: 10px !important; | ||
+ | } | ||
+ | |||
+ | .open-nav li { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .open-nav a { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | padding: 20px 30px; | ||
+ | font-size: 150%; | ||
+ | color: #584b4f; | ||
+ | } | ||
+ | |||
+ | .open-nav a:active { | ||
+ | background: #297d89; | ||
+ | } | ||
+ | |||
+ | .sub-nav { | ||
+ | display: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 300; | ||
+ | } | ||
+ | |||
+ | /********************** | ||
+ | MAIN PART | ||
+ | **********************/ | ||
+ | |||
+ | .mc-container { | ||
+ | width: 100%; | ||
+ | background: #faf6ec; | ||
+ | padding: 20px; | ||
+ | color: #66595c; | ||
+ | min-height: 120vh; | ||
+ | } | ||
+ | |||
+ | .mc-container h1 { | ||
+ | margin: 0 30px !important; | ||
+ | padding-top: 50px; | ||
+ | text-align: center; | ||
+ | font-size: 48px; | ||
+ | color: #584b4f; | ||
+ | line-height: 1.2; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .mc-container h1 span { | ||
+ | font-size: 80%; | ||
+ | color: #2587bf; | ||
+ | display: block; | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .section h2 { | ||
+ | margin: 0; | ||
+ | padding: 10px 20px; | ||
+ | color: #00455d; | ||
+ | } | ||
+ | |||
+ | .text-upper { | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .project-description { | ||
+ | width: 300px; | ||
+ | font-family: Georgia, serif; | ||
+ | margin: 0 auto; | ||
+ | text-shadow: 0 0 2px #000; | ||
+ | } | ||
+ | |||
+ | .project-description h2 { | ||
+ | font-size: 24px; | ||
+ | padding: 10px 0; | ||
+ | margin: 0 !important; | ||
+ | color: #fff; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .project-description p { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | color: #fff; | ||
+ | font-size: 21px; | ||
+ | line-height: 1.1; | ||
+ | } | ||
+ | |||
+ | .jumbo-bg { | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | .home-bg { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .article { | ||
+ | width: 100%; | ||
+ | margin: auto; | ||
+ | font-size: 1.1em; | ||
+ | padding: 30px 0; | ||
+ | color: #66595c; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | .article-title { | ||
+ | padding: 20px 10px 0 0; | ||
+ | margin: 0 0 20px; | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | |||
+ | .article-p { | ||
+ | line-height: 1.6; | ||
+ | margin: 20px 0; | ||
+ | margin-top: 0; | ||
+ | color: #66595c; | ||
+ | } | ||
+ | |||
+ | /* NORMALIZE */ | ||
+ | |||
+ | .article-ul, | ||
+ | .article-ol { | ||
+ | margin: 0 !important; | ||
+ | padding-left: 2em !important; | ||
+ | } | ||
+ | .article-p, | ||
+ | .article-ul, | ||
+ | .article-ol { | ||
+ | font-size: 20.8px; | ||
+ | } | ||
+ | |||
+ | .article-ol p, | ||
+ | .article-ul p { | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | |||
+ | .article-ol { | ||
+ | margin-left: 40px; | ||
+ | } | ||
+ | |||
+ | .article-ul { | ||
+ | padding-left: 10px; | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | |||
+ | .article-ol li, | ||
+ | .article-ul li { | ||
+ | margin: 10px 0; | ||
+ | } | ||
+ | |||
+ | .article-img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .article-img img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .article-ul li span { | ||
+ | display: inline-block; | ||
+ | margin-left: 15px; | ||
+ | word-break: break-word; | ||
+ | } | ||
+ | |||
+ | .article-subtitle { | ||
+ | color: #334; | ||
+ | font-size: 1.2em; | ||
+ | font-weight: bold; | ||
+ | margin: 0 !important; | ||
+ | } | ||
+ | |||
+ | .article figure { | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | |||
+ | .article figure p { | ||
+ | margin: 5px 0; | ||
+ | } | ||
+ | |||
+ | .link-figure { | ||
+ | width: 300px; | ||
+ | margin: auto; | ||
+ | border-radius: 15px; | ||
+ | border: 2px solid; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .link-figure li { | ||
+ | position: absolute; | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 10px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | .link-figure li:first-child { | ||
+ | top: 6%; | ||
+ | left: 32%; | ||
+ | } | ||
+ | .link-figure li:nth-child(2) { | ||
+ | top: 26%; | ||
+ | left: 4%; | ||
+ | } | ||
+ | .link-figure li:nth-child(3) { | ||
+ | top: 24%; | ||
+ | left: 73%; | ||
+ | } | ||
+ | .link-figure li:nth-child(4) { | ||
+ | top: 63%; | ||
+ | left: 4%; | ||
+ | } | ||
+ | .link-figure li:nth-child(5) { | ||
+ | top: 63%; | ||
+ | left: 78%; | ||
+ | } | ||
+ | .link-figure li:nth-child(6) { | ||
+ | top: 80%; | ||
+ | left: 40%; | ||
+ | } | ||
+ | |||
+ | .link-figure img { | ||
+ | width: 100%; | ||
+ | border-radius: inherit; | ||
+ | } | ||
+ | |||
+ | /* FOOTER */ | ||
+ | .footer-cell { | ||
+ | padding: 20px; | ||
+ | width: 100%; | ||
+ | color: #66595c; | ||
+ | background: #efeae1; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .footer-cell p { | ||
+ | font-size: 24px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .footer-cell a { | ||
+ | color: #aaa; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .footer-cell .six-img { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | display: -webkit-flex; | ||
+ | -webkit-box-flex-flow: row wrap; | ||
+ | -moz-box-flex-flow: row wrap; | ||
+ | -ms-flex-flow: row wrap; | ||
+ | flex-flow: row wrap; | ||
+ | -webkit-flex-flow: row wrap; | ||
+ | -webkit-box-align-items: center; | ||
+ | -moz-box-align-items: center; | ||
+ | -ms-align-items: center; | ||
+ | align-items: center; | ||
+ | -webkit-align-items: center; | ||
+ | } | ||
+ | |||
+ | .footer-cell img { | ||
+ | width: 14.2857%; | ||
+ | } | ||
+ | |||
+ | section { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | border-bottom: 2px solid #ddd; | ||
+ | padding: 0 10px; | ||
+ | } | ||
+ | section h1 { | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | section img { | ||
+ | display: block; | ||
+ | margin:10px auto; | ||
+ | max-height: 250px; | ||
+ | } | ||
+ | .side-nav { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | .three-img, | ||
+ | .double-img { | ||
+ | min-height: 1px; | ||
+ | margin: 10px auto; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | display: -webkit-box; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-justify-content: space-around; | ||
+ | -ms-flex-pack: distribute; | ||
+ | justify-content: space-around; | ||
+ | -webkit-flex-flow: row wrap; | ||
+ | -ms-flex-flow: row wrap; | ||
+ | flex-flow: row wrap; | ||
+ | } | ||
+ | .img-figure { | ||
+ | background: #f7f7f7; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 1px solid #000; | ||
+ | } | ||
+ | .img-figure img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .img-figure p { | ||
text-align: center; | text-align: center; | ||
− | |||
− | |||
} | } | ||
− | . | + | .single-img { |
+ | margin: 10px auto; | ||
+ | } | ||
+ | |||
+ | .single-img, | ||
+ | .single-img .img-figure, | ||
+ | .double-img .img-figure, | ||
+ | .three-img .img-figure { | ||
width: 100%; | width: 100%; | ||
} | } | ||
− | . | + | .table-note { |
− | + | margin-bottom: 0 !important; | |
− | + | padding-bottom: 0 !important; | |
} | } | ||
− | . | + | .figure-note { |
− | + | margin-top: 0 !important; | |
− | + | padding-top: 0 !important; | |
} | } | ||
− | + | /* TABLE */ | |
− | + | table { | |
− | + | border-collapse: collapse; | |
+ | } | ||
+ | tr { | ||
+ | background: #f4f7f8; | ||
+ | } | ||
+ | thead th { | ||
+ | font-weight: 400; | ||
+ | background: #8a97a0; | ||
+ | color: #FFF; | ||
+ | } | ||
+ | th, td { | ||
+ | text-align: center; | ||
+ | padding: 5px; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | tr:nth-child(even) { | ||
+ | background: #e8eeef; | ||
} | } | ||
+ | #table-two-colspan { | ||
+ | padding-left: 40px; | ||
+ | text-align: left; | ||
+ | } | ||
− | + | @media only screen and (min-width:540px) { | |
− | + | .three-img .img-figure { | |
− | + | width: 33.3333%; | |
+ | } | ||
− | . | + | .double-img .img-figure { |
− | + | width: 50%; | |
} | } | ||
− | . | + | .img-figure:not(:first-child) { |
− | + | border-left: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | + | @media only screen and (min-width:769px) { | |
− | + | ||
− | + | .project-description { | |
− | + | position: absolute; | |
− | + | left: 3%; | |
+ | bottom: 3%; | ||
+ | } | ||
+ | |||
+ | .article { | ||
+ | width: 95%; | ||
+ | } | ||
+ | |||
+ | .article-title { | ||
+ | border-bottom: 2px solid #584b4f; | ||
+ | } | ||
+ | |||
+ | .link-figure { | ||
+ | width: 600px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .link-figure li { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .link-figure li:first-child { | ||
+ | top: 9%; | ||
+ | left: 37%; | ||
+ | } | ||
+ | .link-figure li:nth-child(2) { | ||
+ | top: 29%; | ||
+ | left: 7%; | ||
+ | } | ||
+ | .link-figure li:nth-child(3) { | ||
+ | top: 28%; | ||
+ | left: 77%; | ||
+ | } | ||
+ | .link-figure li:nth-child(4) { | ||
+ | top: 67%; | ||
+ | left: 8%; | ||
+ | } | ||
+ | .link-figure li:nth-child(5) { | ||
+ | top: 66%; | ||
+ | left: 81%; | ||
+ | } | ||
+ | .link-figure li:nth-child(6) { | ||
+ | top: 84%; | ||
+ | left: 44%; | ||
+ | } | ||
+ | |||
+ | .side-nav { | ||
+ | position: fixed; | ||
+ | display: block; | ||
+ | top: 120px; | ||
+ | left: 10px; | ||
+ | border: 1px solid #ccc; | ||
+ | z-index: 5; | ||
+ | border-radius: 5px; | ||
} | } | ||
− | . | + | .side-nav h4 { |
− | + | padding-left: 15px; | |
+ | border-bottom: 1px solid #ccc; | ||
} | } | ||
− | . | + | .side-nav ul { |
− | + | padding-left: 0; | |
− | + | margin-left: 0; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .side-nav li { |
− | + | list-style: none; | |
− | + | margin: 10px; | |
− | + | padding: 1px; | |
+ | max-width: 120px; | ||
} | } | ||
− | + | ||
− | + | th, td { | |
− | + | padding: 20px 10px; | |
} | } | ||
+ | |||
+ | #table-two-colspan { | ||
+ | padding-left: 80px; | ||
+ | } | ||
+ | .logo::before { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media screen and (min-width:1080px) { | ||
+ | |||
+ | .main-nav { | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | -webkit-box-justify-content: flex-end; | ||
+ | -moz-box-justify-content: flex-end; | ||
+ | -webkit-justify-content: flex-end; | ||
+ | -ms-justify-content: flex-end; | ||
+ | justify-content: flex-end; | ||
+ | } | ||
+ | |||
+ | .nav-btn { | ||
+ | display: none !important; | ||
+ | } | ||
+ | |||
+ | .has-sub-nav { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .sub-nav { | ||
+ | background: #efeae1; | ||
+ | } | ||
+ | |||
+ | .main-nav > .has-sub-nav > .sub-nav::before { | ||
+ | content: ""; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 10px solid transparent; | ||
+ | border-right: 10px solid transparent; | ||
+ | border-bottom: 10px solid #efeae1; | ||
+ | position: absolute; | ||
+ | top: -10px; | ||
+ | right: 20px; | ||
+ | } | ||
+ | |||
+ | .open-nav { | ||
+ | position: absolute; | ||
+ | width: auto; | ||
+ | min-width: 135px; | ||
+ | height: auto; | ||
+ | top: 40px; | ||
+ | right: 0; | ||
+ | bottom: auto; | ||
+ | left: auto; | ||
+ | overflow: visible; | ||
+ | padding-top: 0 !important; | ||
+ | } | ||
+ | |||
+ | .open-nav li { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .open-nav a { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 15px; | ||
+ | font-size: 100%; | ||
+ | color: #584b4f; | ||
+ | } | ||
+ | |||
+ | .open-nav a:active, | ||
+ | .open-nav a:hover { | ||
+ | background: #FAF6DD; | ||
+ | } | ||
+ | |||
+ | .small-nav.open-nav { | ||
+ | right: 100%; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | .article { | ||
+ | width: 70%; | ||
+ | } | ||
+ | |||
+ | .article-p { /**/ | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | .article-ul { | ||
+ | padding-left: 0; | ||
+ | margin-left: 20px; | ||
+ | } | ||
+ | |||
+ | .article-ol p, | ||
+ | .article-ul p { /**/ | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | .article figure { | ||
+ | margin-left: 40px; | ||
+ | margin-right: 40px; | ||
+ | } | ||
+ | |||
+ | .mc-container h1 span { | ||
+ | display: inline; | ||
+ | margin: 5px; | ||
+ | } | ||
+ | |||
+ | .mc-container h1 span::before { | ||
+ | content: "-"; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | .three-link .home-bg { | ||
+ | width: 33.333333% !important; | ||
+ | } | ||
+ | |||
+ | .home-about { | ||
+ | width: 66.666666% !important; | ||
+ | -webkit-box-order: 1 !important; | ||
+ | -moz-order: 1 !important; | ||
+ | -webkit-order: 1 !important; | ||
+ | -ms-order: 1 !important; | ||
+ | order: 1 !important; | ||
+ | } | ||
+ | |||
+ | section { | ||
+ | height: 300px; | ||
+ | padding: 0 120px; | ||
+ | } | ||
+ | section::after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | .mc-container section h1 { | ||
+ | text-align: left; | ||
+ | float: left; | ||
+ | } | ||
+ | section img { | ||
+ | display: block; | ||
+ | float: right; | ||
+ | height: 250px; | ||
+ | margin-right: 10px; | ||
+ | margin-top: 10px; | ||
+ | max-height: none; | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | section .backing-link:hover + img { | ||
+ | height: 280px; | ||
+ | } | ||
+ | |||
+ | #table-one, | ||
+ | #table-two { | ||
+ | margin-left: 60px; | ||
+ | } | ||
+ | |||
+ | .table-note { | ||
+ | padding-left: 60px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | $("p").filter( function() { | ||
+ | return $.trim($(this).html()) == ''; | ||
+ | }).remove() | ||
+ | }); | ||
+ | $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1.0">'); | ||
+ | console.log('Bye'); | ||
+ | </script> | ||
</html> | </html> |
Latest revision as of 08:08, 5 November 2015