Ssccb12040 (Talk | contribs) |
|||
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; | ||
font-size: 100%; | font-size: 100%; | ||
line-height: 1.4; | line-height: 1.4; | ||
+ | } | ||
+ | h1 { | ||
+ | font-family: 'Montserrat', sans-serif; | ||
} | } | ||
.vertical-container{ | .vertical-container{ | ||
− | background-image: url( | + | background-image: url(/assets/img/hp/silvertop.png); |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 46: | Line 24: | ||
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 { | ||
position: relative; | position: relative; | ||
Line 94: | Line 37: | ||
max-width: 90%; | max-width: 90%; | ||
margin-right: auto; | margin-right: auto; | ||
− | font-family: ' | + | font-family: 'Raleway', sans-serif; |
padding-bottom: 40px; | padding-bottom: 40px; | ||
} | } | ||
Line 100: | Line 43: | ||
.inner , .mod-inset-left{ | .inner , .mod-inset-left{ | ||
width: 100%; | width: 100%; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
} | } | ||
− | .caption | + | .caption{ |
display: none; | display: none; | ||
} | } | ||
− | |||
.inner h1{ | .inner h1{ | ||
font-size: 18px; | font-size: 18px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | |||
} | } | ||
.inner h2{ | .inner h2{ | ||
font-size: 16px; | font-size: 16px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
} | } | ||
− | .inner p | + | .inner p{ |
+ | margin:15px; | ||
font-size: 12px; | font-size: 12px; | ||
+ | } | ||
+ | .inner li{ | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | [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) { | ||
+ | .inner p{ | ||
+ | margin :40px; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .mod-inset-left p{ | ||
+ | margin: 25px; | ||
+ | } | ||
+ | |||
+ | .mod-inset-left { | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | margin-left: 40px; | ||
+ | margin-right: 40px; | ||
+ | background: #e2e2e2; | ||
+ | padding: 1.15em; | ||
+ | |||
+ | } | ||
+ | |||
+ | .mod-inset-left ul{ | ||
+ | padding-right: 25px; | ||
+ | } | ||
+ | |||
+ | .container .inner, .staggered-animation-container .inner { | ||
+ | max-width: 85%; | ||
+ | |||
+ | } | ||
+ | #left{ | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | |||
+ | .inner{ | ||
+ | margin-left: 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 (min-width: 1024px) { | ||
+ | .container, .staggered-animation-container { | ||
+ | max-width: 1000px; | ||
+ | } | ||
+ | } | ||
.caption, .mod-inline { | .caption, .mod-inline { | ||
Line 124: | Line 143: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
+ | |||
width: 30%; | width: 30%; | ||
} | } | ||
Line 146: | Line 166: | ||
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 162: | Line 204: | ||
#p3 { | #p3 { | ||
− | |||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
Line 175: | Line 216: | ||
display: table; | display: table; | ||
width: 100%; | width: 100%; | ||
− | + | position: relative; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | |||
+ | |||
[class^="img"]+.container .caption { | [class^="img"]+.container .caption { | ||
Line 205: | Line 241: | ||
height: 300px; | height: 300px; | ||
width: 100%; | width: 100%; | ||
− | background: url(/assets/img/ | + | background: url(/assets/img/hp/hp-silver-dialogue.png) no-repeat center center/cover; |
+ | background-attachment: fixed; | ||
+ | } | ||
+ | .img3 { | ||
+ | height: 300px; | ||
+ | width: 100%; | ||
+ | background: url(/assets/img/hp/hp-silver-collaboration.JPG) no-repeat center center/cover; | ||
background-attachment: fixed; | background-attachment: fixed; | ||
} | } | ||
Line 226: | Line 268: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
+ | |||
+ | |||
+ | 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 */ | /*# sourceMappingURL=hp-silver.component.css.map */ | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 08:56, 30 October 2017