Template:TPHS San Diego
<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() 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() no-repeat; background-size: cover; display: inline-block;
}
- section5 > .menu > .outreach{
width: 40%; min-width: 200px; background: url(
}
- section5 > .menu > .team{
width: 40%; min-width: 200px; background: url(
}
- section5 > .menu > .attribution{
width: 40%; min-width: 200px; background: url(
} </style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
-->