|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <style>
| |
| − | /*
| |
| − | Coding Guidelines
| |
| − |
| |
| − | - use simple class names in nested hierarchy (eg. .parent > .child > ...)
| |
| − | - pros: easier to read, very organized
| |
| − | - cons: might require some nasty workarounds
| |
| − | - strive for material theme (https://material.io/)
| |
| − | - solid, paper-like design
| |
| − | */
| |
| − |
| |
| − | html, body{
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | .fullscreen_section{
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | .small_section{
| |
| − | width: 100%;
| |
| − | height: 30%;
| |
| − | }
| |
| − |
| |
| − | #section1 > .content_wrapper{
| |
| − | position: relative;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | }
| |
| − |
| |
| − | #section1 > .content_wrapper > .title{
| |
| − | text-align: center;
| |
| − | font-family: Arial;
| |
| − | font-size: 10em;
| |
| − | font-weight: bold;
| |
| − | color: black;
| |
| − | background: url(https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/2017/5-studyidentif.jpg) no-repeat;
| |
| − | background-position: 0 60%;
| |
| − | background-size: cover;
| |
| − | background-clip: text;
| |
| − | -moz-background-clip: text;
| |
| − | -webkit-background-clip: text;
| |
| − | -webkit-text-fill-color: transparent;
| |
| − | }
| |
| − |
| |
| − | #section1 > .content_wrapper > .desc{
| |
| − | text-align: center;
| |
| − | font-family: Arial;
| |
| − | font-size: 1.5em;
| |
| − | color: rgb(85, 85, 85);
| |
| − | }
| |
| − |
| |
| − | #section2 > .content_wrapper, #section3 > .content_wrapper{
| |
| − | display: flex;
| |
| − | display: -webkit-flex;
| |
| − | flex-direction: row;
| |
| − | -ms-flex-direction: row;
| |
| − | flex-wrap: wrap;
| |
| − | -ms-flex-wrap: wrap;
| |
| − | justify-content: center;
| |
| − | align-items: center;
| |
| − | }
| |
| − |
| |
| − | #section2 > .content_wrapper > .image, #section3 > .content_wrapper > .image{
| |
| − | width: 400px;
| |
| − | height: 400px;
| |
| − | margin: 10px;
| |
| − |
| |
| − | border-radius: 10px;
| |
| − | box-shadow: 0 5px 20px rgb(201, 201, 201);
| |
| − | }
| |
| − |
| |
| − | #section2 > .content_wrapper > .desc, #section3 > .content_wrapper > .desc{
| |
| − | width: 300px;
| |
| − | margin: 10px;
| |
| − | }
| |
| − |
| |
| − | #section2 > .content_wrapper > .desc > .title, #section3 > .content_wrapper > .desc > .title{
| |
| − | font-size: 2em;
| |
| − | font-family: Arial;
| |
| − | color: rgb(68, 68, 68);
| |
| − | margin: 5px;
| |
| − | }
| |
| − |
| |
| − | #section2 > .content_wrapper > .desc > .body, #section3 > .content_wrapper > .desc > .body{
| |
| − | font-family: Arial;
| |
| − | color: rgb(148, 148, 148);
| |
| − | margin: 5px;
| |
| − | }
| |
| − |
| |
| − | #section4{
| |
| − | margin-bottom: 10%;
| |
| − | background-color: rgb(68, 68, 68);
| |
| − | }
| |
| − |
| |
| − | #section4 > .content_wrapper{
| |
| − | position: relative;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | text-align: center;
| |
| − |
| |
| − | font-family: Arial;
| |
| − | font-size: 2em;
| |
| − | color: whitesmoke;
| |
| − | }
| |
| − |
| |
| − | #section5{
| |
| − | position: relative;
| |
| − | left: 15%;
| |
| − | width: 70%;
| |
| − | margin-bottom: 5%;
| |
| − | }
| |
| − |
| |
| − | #section5 > .title{
| |
| − | font-family: Arial;
| |
| − | font-size: 2em;
| |
| − | color: rgb(68, 68, 68);
| |
| − | margin: 20px;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu{
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .item{
| |
| − | text-decoration: none;
| |
| − | height: 250px;
| |
| − | margin: 10px;
| |
| − | box-shadow: 0 5px 20px rgb(201, 201, 201);
| |
| − | border-radius: 10px;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .item:hover{
| |
| − | box-shadow: 0 7px 25px rgb(192, 192, 192);
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | workaround for adding an element that covers the parent element
| |
| − | */
| |
| − | .cover{
| |
| − | position: absolute;
| |
| − | width: inherit;
| |
| − | height: inherit;
| |
| − | z-index: 10;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .item > .cover{
| |
| − | background: rgb(99, 99, 99);
| |
| − | opacity: 0;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | border-radius: inherit;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .item:hover > .cover{
| |
| − | opacity: 0.05;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .item > .desc{
| |
| − | color: rgb(68, 68, 68);
| |
| − | text-align: center;
| |
| − | font-size: 1.5em;
| |
| − | font-family: Arial;
| |
| − |
| |
| − | position: relative;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .project{
| |
| − | width: 100%;
| |
| − | min-width: 400px;
| |
| − | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
| |
| − | background-size: cover;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .outreach{
| |
| − | width: 40%;
| |
| − | min-width: 200px;
| |
| − | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
| |
| − | background-size: cover;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .team{
| |
| − | width: 40%;
| |
| − | min-width: 200px;
| |
| − | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
| |
| − | background-size: cover;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | #section5 > .menu > .attribution{
| |
| − | width: 40%;
| |
| − | min-width: 200px;
| |
| − | background: url(https://images-na.ssl-images-amazon.com/images/I/41JvAoqeMfL._SY300_QL70_.jpg) no-repeat;
| |
| − | background-size: cover;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| | <!-- everything underneath is commented! --> | | <!-- everything underneath is commented! --> |
| | <!-- | | <!-- |
