Difference between revisions of "Template:Paris Bettencourt/cssHome"
CeliaFoulon (Talk | contribs) |
|||
(27 intermediate revisions by 2 users not shown) | |||
Line 13: | Line 13: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-size: cover; | background-size: cover; | ||
+ | background-attachment: fixed; | ||
} | } | ||
Line 44: | Line 45: | ||
/* Text content */ /* Tweak here */ | /* Text content */ /* Tweak here */ | ||
#home .textWrapper { | #home .textWrapper { | ||
− | background-color: | + | background-color: black; |
color: white; | color: white; | ||
width: 100%; | width: 100%; | ||
border-top: 5px solid whitesmoke; | border-top: 5px solid whitesmoke; | ||
border-bottom: 5px solid whitesmoke; | border-bottom: 5px solid whitesmoke; | ||
+ | } | ||
+ | |||
+ | .separate { | ||
+ | border-bottom: 5px solid whitesmoke; | ||
} | } | ||
Line 73: | Line 78: | ||
} | } | ||
− | .textContent .nav div | + | .textContent .nav a { |
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .textContent .nav div a span:after { | ||
content: ''; | content: ''; | ||
− | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Line 81: | Line 89: | ||
left: 0; | left: 0; | ||
border-bottom: 1px solid rgba(255,255,255,0.7); | border-bottom: 1px solid rgba(255,255,255,0.7); | ||
− | transition: border 0.3s; | + | transition: border-color 0.3s; |
+ | position: absolute; | ||
} | } | ||
− | .textContent .nav div:hover | + | .textContent .nav div a:hover span:after { |
− | border-bottom | + | border-bottom-color: initial; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
.stretch { | .stretch { | ||
− | padding: 0 | + | padding: 0 7%; |
text-align: center; | text-align: center; | ||
− | font-size: 1. | + | font-size: 1.1em; |
− | line-height: | + | font-family: Generica; |
+ | line-height: 3em; | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | width: 100%; | ||
} | } | ||
Line 107: | Line 115: | ||
.magenta { | .magenta { | ||
color: #e5007d; | color: #e5007d; | ||
+ | } | ||
+ | .black { | ||
+ | color: black; | ||
+ | } | ||
+ | .yellow.black a, | ||
+ | .yellow.black { | ||
+ | color: black; | ||
+ | } | ||
+ | .cyan.black a, | ||
+ | .cyan.black { | ||
+ | color: black; | ||
+ | } | ||
+ | .magenta.black a, | ||
+ | .magenta.black { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .textContent .nav div a.yellow span:after { | ||
+ | content: ''; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | border-bottom: 1px solid #ffed00; | ||
+ | transition: border-width 0.3s; | ||
+ | position: absolute; | ||
+ | color: black; | ||
+ | } | ||
+ | .textContent .nav div a.cyan span:after { | ||
+ | content: ''; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | border-bottom: 1px solid #009ee3; | ||
+ | transition: border-width 0.3s; | ||
+ | position: absolute; | ||
+ | color: black; | ||
+ | } | ||
+ | .textContent .nav div a.magenta span:after { | ||
+ | content: ''; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | border-bottom: 1px solid #e5007d; | ||
+ | transition: border-width 0.3s; | ||
+ | position: absolute; | ||
+ | color: black; | ||
+ | } | ||
+ | .textContent .nav div a.yellow:hover span:after, | ||
+ | .textContent .nav div a.cyan:hover span:after, | ||
+ | .textContent .nav div a.magenta:hover span:after { | ||
+ | border-bottom-width: 3px; | ||
+ | } | ||
+ | |||
+ | p.white { | ||
+ | color: white; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 22:40, 19 November 2015