(Prototype team template page) |
|||
Line 92: | Line 92: | ||
+ | /* START GENERAL STYLES */ | ||
− | /* | + | /* start of header */ |
− | + | body { | |
− | + | width: auto !important; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | font-family: "Roboto"; | |
− | + | } | |
− | + | html { | |
− | + | height: 100%; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | a.intro-txt{ | |
− | + | color: black; | |
− | + | text-align: center; | |
− | + | font-weight: bold; | |
− | + | text-decoration:none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | a.intro-txt:hover { | ||
+ | text-decoration: underline; | ||
+ | } | ||
− | + | a | |
− | + | { | |
− | + | text-decoration:none; | |
− | + | } | |
− | + | .fixed-bg { | |
− | + | /* The background image */ | |
− | + | background-image: url("../imgs/projectBack.jpg"); | |
− | + | /*height: auto !important;*/ | |
− | + | height: 100%; | |
− | + | /*width: auto !important;*/ | |
− | + | width: 100%; | |
− | + | /* Set a specified height, or the minimum height for the background image */ | |
− | + | min-height: 500px; | |
− | + | /* Set background image to fixed (don't scroll along with the page) */ | |
− | + | background-attachment: scroll; | |
+ | overflow-x: hidden; | ||
+ | /* Center the background image */ | ||
+ | background-position: center; | ||
+ | /* Set the background image to no repeat */ | ||
+ | background-repeat: no-repeat; | ||
+ | /* Scale the background image to be as large as possible */ | ||
+ | background-size: cover; | ||
+ | } | ||
+ | .header { | ||
+ | display: table; | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin-bottom: 0px; | ||
+ | /* background: url('http://stormandsky.com/gif/7.gif') no-repeat center center scroll;*/ | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | /* end of header */ | ||
− | + | .tryme{ | |
− | + | background-image: url("../imgs/gradient.jpg"); | |
− | + | height: auto !important; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
+ | min-height: 500px; | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | } | ||
− | + | #container { | |
− | + | position: relative; | |
− | + | padding-top: 1px; | |
+ | padding-bottom: 0px; | ||
+ | height:1000px; | ||
+ | } | ||
+ | .content { | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | margin-top: auto; | ||
+ | margin-bottom: auto; | ||
+ | text-align: center; | ||
+ | padding-top: 1px; | ||
+ | padding-bottom: 0px; | ||
+ | height:100%; | ||
+ | } | ||
− | + | .h-small{ | |
− | + | height:250px; | |
− | + | } | |
− | + | ||
− | + | /* start title things */ | |
− | + | #title_container{ | |
− | + | position: relative; | |
− | + | padding-top: 200px; | |
− | + | padding-bottom: 100px; | |
− | + | height:375px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #title{ | |
− | + | position: relative; | |
− | + | text-align: center; | |
− | + | vertical-align: middle; | |
− | + | color: white; | |
+ | font-size: 150px; | ||
+ | } | ||
+ | #subtitle{ | ||
+ | position: relative; | ||
+ | margin-top: -100px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | color: white; | ||
+ | font-size: 50px; | ||
+ | } | ||
+ | /* end of title things */ | ||
− | + | hr.small { | |
− | + | max-width: 500px; | |
− | + | border: 0; | |
− | + | height: 1px; | |
− | + | background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0)); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .col-lg-12 { | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .first-text{ | |
− | + | padding-top: 20px; | |
− | + | width:100%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .second-text{ | ||
+ | width:100%; | ||
+ | } | ||
− | |||
− | + | .category { | |
− | + | position:relative; | |
− | + | display: inline-flex; | |
− | + | width: 33%%; | |
− | + | height: 100%; | |
− | + | padding-left: 5px; | |
+ | padding-right: 5px; | ||
+ | } | ||
+ | .container { | ||
+ | display: flex; | ||
+ | padding-top: 20px; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | } | ||
− | + | .column { | |
− | + | flex: 1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | .column-one { | ||
+ | order: 2; | ||
+ | } | ||
+ | .column-two { | ||
+ | order: 3; | ||
+ | } | ||
+ | .column-three { | ||
+ | order: 4; | ||
+ | } | ||
+ | .column-four { | ||
+ | order: 5; | ||
+ | } | ||
+ | .column-five { | ||
+ | order: 6; | ||
+ | } | ||
− | + | .2-rows div { | |
− | + | height:100%;padding:50px 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .3-rows div { | |
− | + | height:100%;padding:20px 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .icon-text{ | |
− | + | padding-top: 20px; | |
− | + | height: 100%; | |
− | + | } | |
− | + | ||
− | + | .btn-div{ | |
− | + | padding-top: 20px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | .btn { | |
− | + | border: 1px; | |
− | + | padding: 10px; | |
− | + | box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20), 0 5px 50px 0 rgba(0,0,0,0.19); | |
− | + | } | |
− | + | ||
− | + | .btn-light { | |
− | + | border-radius: 1px; | |
− | + | color: #333; | |
− | + | background-color: rgb(255,255,255); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .btn-light:hover, | |
− | + | .btn-light:focus, | |
− | + | .btn-light:active { | |
− | + | color: #333; | |
− | + | background-color: rgba(255,255,255,0.8); | |
− | + | } | |
− | + | ||
− | + | /* END GENERAL STYLES */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | /* | + | /* START NAVIGATION */ |
− | + | nav { | |
− | + | right: 0; | |
− | + | left: 0; | |
− | + | position: absolute; | |
− | + | padding-top: 15px; | |
+ | padding-right: 50px; | ||
+ | height: 50px; | ||
+ | width: inherit; | ||
+ | /* max-width: 960px;*/ | ||
+ | margin: 0 auto; | ||
+ | z-index: 3; | ||
+ | } | ||
− | + | nav ul { | |
− | + | text-align: right; | |
− | + | list-style-type: none; | |
− | + | margin: 0; | |
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | height: 20px; | ||
+ | } | ||
− | + | nav ul li { | |
− | + | display:inline; | |
− | + | text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); | |
− | + | } | |
− | + | ||
− | + | nav ul li a { | |
− | + | padding: 20px; | |
− | + | font-family: "Roboto"; | |
− | + | opacity: 0.7; | |
− | + | color: white; | |
− | + | text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2); | |
− | + | font-size: 25px; | |
− | + | text-decoration: none; | |
− | + | } | |
+ | .dark{ | ||
+ | background-color: rgba(0,0,0,0.2); | ||
+ | } | ||
+ | .light{ | ||
+ | background-color: rgba(255,255,250,0.2); | ||
+ | } | ||
+ | /* END NAVIGATION */ | ||
− | |||
− | + | /* START CONTENT */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .about{ | ||
+ | height: 150px; | ||
+ | } | ||
− | + | .services{ | |
− | + | height: 350px; | |
− | + | } | |
− | + | ||
− | + | ||
+ | .video{ | ||
+ | height: 500px; | ||
+ | } | ||
− | + | .contact{ | |
− | + | width: 500px; | |
− | + | height: 350px; | |
− | + | } | |
− | + | .intro{ | |
− | + | padding-top: 10px; | |
− | + | margin-top: 10px; | |
− | } | + | } |
− | + | /* END CONTENT */ | |
− | + | ||
− | + | ||
− | + | ||
+ | /* START IMAGE STYLES */ | ||
− | + | .imgsize{ | |
− | + | position: relative; | |
− | + | vertical-align: middle; | |
− | + | text-align: center; | |
− | + | padding-top: 20px; | |
− | + | max-width: 500px; | |
− | + | height: 100px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .scmedimgsize{ | |
− | + | position: relative; | |
− | + | vertical-align: middle; | |
− | + | text-align: center; | |
− | + | padding-top: 20px; | |
+ | max-width: 200px; | ||
+ | height: 50px; | ||
+ | } | ||
+ | .imgsize.services{ | ||
+ | content: url('../imgs/icon1.png'); | ||
+ | } | ||
+ | .header_img{ | ||
+ | background: url(../imgs/whale.gif) no-repeat center center scroll; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | /*MUSHROOM: https://www.google.nl/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Ff%2Ffa%2FPanellusStipticusAug12_2009_Animated.gif&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3APanellusStipticusAug12_2009_Animated.gif&docid=XwyN6eisgYu6wM&tbnid=EybkmibTyPoYlM%3A&vet=1&w=1350&h=920&bih=759&biw=1600&q=gif%20biology&ved=0ahUKEwiKxdf5oNHSAhXGCMAKHXwSAE4QMwg8KBYwFg&iact=mrc&uact=8#h=920&imgrc=EybkmibTyPoYlM:&vet=1&w=1350 | ||
+ | 'http://stormandsky.com/gif/7.gif' | ||
+ | CLOUD: http://stormandsky.com/gif/7.gif | ||
+ | |||
+ | FLOWER:https://a.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2014/03/3028382-poster-g-slow-life.gif | ||
+ | |||
+ | WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/ | ||
+ | } | ||
− | /* | + | /* END IMAGE STYLES */ |
− | + | /* START TEAM STYLES */ | |
− | + | ||
− | + | .image-cropper{ | |
− | + | vertical-align: middle; | |
− | + | text-align: center; | |
− | + | width: 100px; | |
− | + | height: 100px; | |
− | + | margin: auto; | |
− | + | /*position: relative;*/ | |
− | + | overflow: hidden; | |
+ | box-shadow: 0 2px 2px 0 rgba(0,0,0,0.20), 0 5px 50px 0 rgba(0,0,0,0.19); | ||
+ | border: 2px solid rgba(0, 0, 0, .25); | ||
+ | -webkit-border-radius: 60%; | ||
+ | -moz-border-radius: 50%; | ||
+ | -ms-border-radius: 50%; | ||
+ | -o-border-radius: 50%; | ||
+ | border-radius: 50%; | ||
+ | } | ||
− | |||
− | |||
− | + | /*.fixed-bg-team { | |
− | + | The background image | |
− | + | background-image: url("../imgs/projectBack.jpg"); | |
− | + | height: auto !important; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | Set a specified height, or the minimum height for the background image | |
− | + | min-height: 500px; | |
− | + | Set background image to fixed (don't scroll along with the page) | |
− | + | background-attachment: fixed; | |
− | + | Center the background image | |
+ | background-position: center; | ||
+ | Set the background image to no repeat | ||
+ | background-repeat: no-repeat; | ||
+ | Scale the background image to be as large as possible | ||
+ | background-size: cover; | ||
+ | }*/ | ||
+ | .img-circle{ | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | display: inline; | ||
+ | margin: 10 auto; | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .more-space{ | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | position: relative; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .col-text{ | ||
+ | width: 60%; | ||
+ | height: 100%; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .col-foto{ | ||
+ | width: 40%; | ||
+ | height: 100%; | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .img-size{ | ||
+ | width: 250px; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .tm_container{ | ||
+ | height: auto; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .desc{ | ||
+ | text-align: left; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | /* END TEAM STYLES */ | ||
+ | |||
+ | /* START PROJECT STYLE */ | ||
+ | |||
+ | |||
+ | |||
+ | .main-col{ | ||
+ | background-image: url("../imgs/gradient.jpg"); | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | /*background-color: white;*/ | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | /* margin-top: auto; | ||
+ | margin-bottom: auto;*/ | ||
+ | text-align: center; | ||
+ | padding-top: 50px; | ||
+ | /* padding-bottom: 0px;*/ | ||
+ | height: auto !important; | ||
+ | height:100%; | ||
+ | width: 1000px; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .bookmarks{ | ||
+ | background-image: url("../imgs/gradient.jpg"); | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | |||
+ | border-radius: 25px; | ||
+ | background-color: white; | ||
+ | margin-left: 50px; | ||
+ | margin-top: 300px; | ||
+ | padding: 25px; | ||
+ | width: 150px; | ||
+ | height: 250px; | ||
+ | z-index: 100; | ||
+ | position: fixed; | ||
+ | } | ||
+ | |||
+ | .bookmarks-title{ | ||
+ | text-align: center; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .bookmarkslst{ | ||
+ | color: red; | ||
+ | padding-left: 200px; | ||
+ | text-align: left; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | /* END PROJECT STYLES */ | ||
+ | |||
+ | /* START SPONSOR STYLES */ | ||
+ | |||
+ | |||
+ | .sponsor_container{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding-top: 50px; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | .img_chain{ | ||
+ | height: 20px; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .sp_container{ | ||
+ | overflow: auto; | ||
+ | padding-top: 50px; | ||
+ | width: auto; | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .tbl_space{ | ||
+ | padding: 0 15px 0 15px; | ||
+ | } | ||
+ | |||
+ | /* END SPONSOR STYLES */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 743: | Line 910: | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Revision as of 15:12, 20 May 2017