Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- FONT-FAMILIES:
- --------------------------------------
- font-family: 'Montserrat', sans-serif;
- font-family: 'Coming Soon', cursive;
- font-family: 'Dancing Script', cursive;
- COLOURS:
- --------------------------------------
- #082e47 - dark
- #13405e - medium
- #336687 - light
- rgba(19, 64, 94, 0.53) - header overlay colour
- rgba(0, 0, 0, 0.75); - h1 background
- rgba(15, 32, 44, 0.83) - h1 background on medium screen size
- rgba(0, 0, 0, 0.35); - banner image shadow, strip shadow
- #333 - speech bubble borders and font color
- */
- html {
- font-size: 16px;
- }
- body {
- background-color: #13405e;
- font-family: 'Montserrat', sans-serif;
- color: #fff;
- }
- header {
- height: 50vh;
- background-image: url("../assets/comics-extract.gif");
- background-size: cover;
- background-position: center center;
- position: relative;
- padding-top: 5vh;
- }
- header:before{
- content: "";
- background-color: rgba(19,64,94,0.53);
- position: absolute;
- left:0;
- right:0;
- top:0;
- bottom:0;
- }
- header .content-wrapper {
- background-image: url("../assets/mary-jane-banner.jpg");
- background-size: cover;
- height: 40vh;
- box-shadow: 0 0 4px 4px rgba(0,0,0,0.3);
- position: relative;
- }
- h1 {
- font-weight: bold;
- font-size: 3rem;
- text-align: center;
- padding: 1rem;
- background-color: rgba(0,0,0,0.75);
- position: absolute;
- left:0;
- right:0;
- bottom: 1rem;
- }
- .content-wrapper {
- width: 90%;
- max-width: 810px;
- margin: 0 auto;
- }
- .portrait {
- background-color: yellow;
- width: 10rem;
- height: 10rem;
- border-radius: 50%;
- border: 8px solid #fff;
- background-size: cover;
- margin: auto auto 2rem auto;
- position: relative;
- }
- .gwen .portrait{
- background-image: url("../assets/gwen.jpg");
- }
- .mj .portrait{
- background-image: url("../assets/mary-jane.jpg");
- }
- .felicia .portrait{
- background-image: url("../assets/felicia.jpg");
- }
- #lovers::after {
- content:"";
- display:block;
- clear: both;
- }
- .lover {
- float: left;
- width: 33.33333%;
- padding-top: 5rem;
- padding-bottom: 5rem;
- text-align: center;
- transition: background-color 0.15s;
- }
- .greeting{
- z-index:1;
- position: absolute;
- left: 3rem;
- top:0;
- opacity: 0;
- color:#333;
- background: #fff;
- border:2px solid #333;
- text-transform: uppercase;
- font-family: 'Coming Soon', cursive;
- padding: 1rem;
- width: 16rem;
- border-radius: 8%/50%;
- transition: top 0.3s, opacity 0.3s;
- }
- .greeting:after{
- content:"";
- display:block;
- width: 32px;
- height: 36px;
- background-image: url("../assets/speech-bubble-leg.png");
- position: absolute;
- left: 3rem;
- top:100%;
- }
- .lover:hover{
- background-color: #082e47;
- cursor: pointer;
- }
- .lover:hover .greeting{
- top: -3.5rem;
- opacity: 1;
- }
- #strip {
- background-color: #336687;
- height: 75px;
- }
- hr {
- border: 2px solid #fff;
- width: 40%;
- margin-bottom: 2rem;
- position: relative;
- top:0;
- transition: top 0.3s;
- }
- h2 {
- text-transform: uppercase;
- font-size: 1.5rem;
- font-weight: bold;
- text-align: center;
- margin-bottom: 1rem;
- position: relative;
- top:0;
- transition: top 0.3s;
- }
- aside {
- font-family: 'Dancing Script', cursive;
- font-size: 1.5rem;
- text-align: center;
- position: relative;
- top:0;
- }
- .lover:hover h2{
- top:-40px;
- }
- .lover:hover hr{
- top: 40px;
- }
- .details {
- line-height: 1.4;
- font-size: 0.8rem;
- }
- #more {
- padding: 3rem 0;
- background-color: #336687;
- }
- li {
- line-height: 1.5;
- font-size: 0.8rem;
- margin: 1rem 0;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement