Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html {
- transition: 1s ease;
- }
- #content {
- transition: 1s ease;
- width: 90%;
- margin-bottom: 10%;
- }
- hr {
- margin: 10px auto;
- width: 80%;
- float: middle;
- }
- #content h3{
- font-family: 'Work Sans', sans-serif;
- font-weight: 200;
- }
- .mc1 .header h3 {font-size: 2.5vmax;}
- .mc2 .header h3 {font-size: 2.5vmax;}
- .mc3 .header h3 {font-size: 2.5vmax;}
- .mc4 .header h3 {font-size: 2.2vmax;}
- .mc5 .header h3 {font-size: 2.5vmax;}
- .mc6 .header h3 {font-size: 2vmax;}
- /*Building content*/
- .captain-header {
- margin-top: -20%;
- }
- .captain-header h4 {
- font-family: 'Work Sans', sans-serif;
- font-weight: 200;
- font-size: 2vmax;
- }
- .teamscontainer {
- position: relative;
- margin: auto;
- float: left;
- width: 100%;
- height: 50vmax;
- margin-top: 1%;
- }
- .teams {
- display: flex;
- position: relative;
- margin: auto;
- width: 100%;
- height: auto;
- justify-content: center;
- }
- .team {
- float: left;
- width: 15%;
- }
- .team .image {
- background-color: white;
- display: inline-block;
- position: relative;
- border: 4px solid purple;
- width: 8vw;
- height: 8vw;
- overflow: hidden;
- border-radius: 50%;
- }
- .memberscontainer {
- position: relative;
- transition: 1s ease;
- float: left;
- height: 0%;
- background-color: black;
- width: 100%;
- }
- .memberscontainer .mc2, .memberscontainer .mc3, .memberscontainer .mc4, .memberscontainer .mc5, .memberscontainer .mc6 {
- -webkit-transition: 1s;
- -moz-transition: 1s;
- -ms-transition: 1s;
- transition: 1s;
- margin-left: 0;
- z-index: 1;
- }
- .mc1 { height: 6vmax; background-color: #eadab5; filter:none !important;}
- .mc1.expandedheight { height: 30vmax; }
- .mc1.expandedwidth{ width: 600%; z-index: 10; margin-top: 45%; }
- .mc2 { height: 6vmax; background-color: #bcaecc; filter:none !important;}
- .mc2.expandedheight { height: 30vmax; }
- .mc2.expandedwidth{ width: 600%; margin-left:-100%; z-index: 10; margin-top: 45%;}
- .mc3 { height: 6vmax; background-color: #bad4e2; filter:none !important;}
- .mc3.expandedheight { height: 30vmax; }
- .mc3.expandedwidth{ width: 600%; margin-left:-200%; z-index: 10; margin-top: 45%;}
- .mc4 { height: 6vmax; background-color: #e8b78b; filter:none !important;}
- .mc4.expandedheight { height: 30vmax; }
- .mc4.expandedwidth{ width: 600%; margin-left:-300%; z-index: 10; margin-top: 45%;}
- .mc5 { height: 6vmax; background-color: #bdd6d2; filter:none !important;}
- .mc5.expandedheight { height: 30vmax; }
- .mc5.expandedwidth{ width: 600%; margin-left:-400%; z-index: 10; margin-top: 45%;}
- .mc6 { height: 6vmax; background-color: #ead0d9; filter:none !important;}
- .mc6.expandedheight { height: 30vmax; }
- .mc6.expandedwidth{ width: 600%; margin-left:-500%; z-index: 10; margin-top: 45%;}
- /*
- .team1 .image { border: 4px solid purple; }
- .team2 .image { border: 4px solid blue; }
- .team3 .image { border: 4px solid grey; }
- .team4 .image { border: 4px solid yellow; }
- .team5 .image { border: 4px solid red; }
- .team6 .image { border: 4px solid orange; }
- */
- .team .image img {
- margin-left: -17%; /*delete me for default*/
- width: auto;
- height: 90%; /*100*/
- }
- .team1 .image img { }
- .team2 .image img { margin-left: 0%; height: 100%; }
- .team3 .image img { }
- .team4 .image img { margin-left: 0%; margin-top: 30%;height: 40%; }
- .team5 .image img { }
- .team6 .image img { }
- .mc1.expandedwidth .captains,
- .mc2.expandedwidth .captains,
- .mc2.expandedwidth .captains,
- .mc3.expandedwidth .captains,
- .mc4.expandedwidth .captains,
- .mc5.expandedwidth .captains,
- .mc6.expandedwidth .captains,
- .mc1.expandedwidth .children,
- .mc2.expandedwidth .children,
- .mc2.expandedwidth .children,
- .mc3.expandedwidth .children,
- .mc4.expandedwidth .children,
- .mc5.expandedwidth .children,
- .mc6.expandedwidth .children {
- position: relative;
- transition: 2s 1s ease;
- opacity: 1;
- }
- .memberscontainer .header {
- font-family: 'Lobster Two', Sans-serif;
- font-size: 2vmax;
- width: 100%;
- margin-bottom: 2%;
- }
- .captains, .children {
- position: absolute;
- opacity: 0;
- }
- .memberscontainer .member {
- margin: .3vmax;
- float: middle;
- display: inline-block;
- vertical-align: center;
- }
- .memberscontainer .captains {
- display: block;
- border-right: 1px solid rgba(0,0,0,0.2);
- display: inline-block;
- float: left;
- width: 19%;
- }
- .memberscontainer .children {
- display: inline-block;
- float: left;
- width: 80%;
- }
- .member .memberimage {
- width: 8vmax;
- height: 8vmax;
- border-radius: 50%;
- color: #fff;
- text-align: center;
- background-color: white;
- overflow: hidden;
- }
- .member .memberimage img {
- width: auto;
- height: inherit;
- color: #fff;
- text-align: center;
- }
- .member .membername h3 {
- font-size: 1.1vmax;
- }
- .member .membername {
- width: 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement