(14 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | + | ||
body { | body { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
− | font-family: sans-serif; | + | font-family: 'Raleway', sans-serif; |
color: #646464; | color: #646464; | ||
background: #f0f0f0; | background: #f0f0f0; | ||
Line 11: | Line 11: | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
− | + | h1 { | |
− | + | font-family: 'Montserrat', sans-serif; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.container, .staggered-animation-container { | .container, .staggered-animation-container { | ||
Line 45: | Line 21: | ||
max-width: 75%; | max-width: 75%; | ||
margin-right: auto; | margin-right: auto; | ||
− | font-family: ' | + | font-family:'Raleway', sans-serif; |
font-size: 18px; | font-size: 18px; | ||
− | |||
} | } | ||
− | + | @media only screen and (max-width: 768px) { | |
− | @media only screen and ( | + | .inner p{ |
+ | margin :40px; | ||
+ | text-align: justify; | ||
+ | } | ||
.container, .staggered-animation-container { | .container, .staggered-animation-container { | ||
− | max-width: | + | position: relative; |
+ | margin-left: auto; | ||
+ | max-width: 90%; | ||
+ | margin-right: auto; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | padding-bottom: 40px; | ||
} | } | ||
− | |||
− | + | .inner , .mod-inset-left{ | |
− | . | + | width: 100%; |
− | + | margin-left: auto; | |
+ | margin-right: auto; | ||
} | } | ||
− | |||
+ | .caption{ | ||
+ | display: none; | ||
+ | } | ||
+ | .inner h1{ | ||
+ | font-size: 26px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
− | .mod-inset-left { | + | } |
− | + | .inner h2{ | |
− | + | font-size: 24px; | |
− | + | font-family: 'Montserrat', sans-serif; | |
+ | } | ||
+ | |||
+ | .inner p{ | ||
+ | margin:15px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | .inner li{ | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | [class^="img"] h3 { | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | font-size:50px; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | padding:0px; | ||
+ | } | ||
+ | |||
+ | .mod-inset-left { | ||
+ | background: #e2e2e2; | ||
+ | padding: 1.15em; | ||
+ | |||
+ | } | ||
} | } | ||
@media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { | ||
+ | .inner p{ | ||
+ | margin :40px; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .mod-inset-left p{ | ||
+ | margin: 25px; | ||
+ | } | ||
+ | |||
.mod-inset-left { | .mod-inset-left { | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
− | + | margin-left: 40px; | |
− | margin: | + | margin-right: 40px; |
+ | background: #e2e2e2; | ||
+ | padding: 1.15em; | ||
+ | |||
} | } | ||
+ | |||
+ | .mod-inset-left ul{ | ||
+ | padding-right: 25px; | ||
+ | } | ||
+ | |||
.container .inner, .staggered-animation-container .inner { | .container .inner, .staggered-animation-container .inner { | ||
− | max-width: | + | max-width: 85%; |
+ | |||
} | } | ||
#left{ | #left{ | ||
− | margin-left: | + | margin-left: auto; |
} | } | ||
+ | |||
.inner{ | .inner{ | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | [class^="img"] h3 { | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | font-size:100px; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | padding:0px; | ||
} | } | ||
} | } | ||
− | @media only screen and ( | + | |
+ | @media only screen and (min-width: 1024px) { | ||
.container, .staggered-animation-container { | .container, .staggered-animation-container { | ||
− | + | max-width: 1000px; | |
− | + | ||
− | max-width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
} | } | ||
− | |||
.caption, .mod-inline { | .caption, .mod-inline { | ||
Line 122: | Line 140: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
+ | |||
width: 30%; | width: 30%; | ||
} | } | ||
Line 144: | Line 163: | ||
line-height: 1.6; | line-height: 1.6; | ||
} | } | ||
+ | |||
+ | #test { | ||
+ | border-left: 3px solid #93edd4; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #test::before{ | ||
+ | position: absolute; | ||
+ | left:-7px; | ||
+ | height: 10px; | ||
+ | width: 10px; | ||
+ | background: #93edd4; | ||
+ | content: ""; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | #test::after{ | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | left: -7px; | ||
+ | height: 10px; | ||
+ | width: 10px; | ||
+ | background: #93edd4; | ||
+ | content: ""; | ||
+ | border-radius: 5px; | ||
+ | } | ||
#p1 { | #p1 { | ||
− | |||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
− | |||
} | } | ||
#p2 { | #p2 { | ||
− | |||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
Line 160: | Line 201: | ||
#p3 { | #p3 { | ||
− | |||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
Line 173: | Line 213: | ||
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
− | + | position: relative; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | |||
+ | |||
[class^="img"]+.container .caption { | [class^="img"]+.container .caption { | ||
Line 203: | Line 238: | ||
height: 300px; | height: 300px; | ||
width: 100%; | width: 100%; | ||
− | background: url(/ | + | background: url('https://static.igem.org/mediawiki/2017/4/45/NCKU-hp-silver-dialogue.png') no-repeat center center/cover; |
+ | background-attachment: fixed; | ||
+ | } | ||
+ | .img3 { | ||
+ | height: 300px; | ||
+ | width: 100%; | ||
+ | background: url('https://static.igem.org/mediawiki/2017/7/75/NCKU-hp-silver-collaboration.png') no-repeat center center/cover; | ||
background-attachment: fixed; | background-attachment: fixed; | ||
} | } | ||
Line 226: | Line 267: | ||
− | /* | + | hr { |
+ | height: 5px; | ||
+ | border: 0; | ||
+ | margin-left: 45%; | ||
+ | margin-right: 45%; | ||
+ | padding: 0; | ||
+ | background-color: #f9cb8f | ||
+ | /*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #f9cb8f, rgba(0, 0, 0, 0));*/ | ||
+ | } | ||
− | + | /*# sourceMappingURL=hp-silver.component.css.map */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | </style> | ||
</html> | </html> |
Latest revision as of 10:02, 1 November 2017