Ce site est disponible à l'adresse suivante : https://serny-nsi.alwaysdata.net/ https://serny-nsi.alwaysdata.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

213 lines
4.6 KiB

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
}
@media only screen and (min-width: 1080px) {
.main {
padding: 0 20vh 0 20vh;
}
}
@keyframes load-items-left {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes load-items-right {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
main {
padding: 10px;
background-color: white;
display: grid;
grid-template-columns: 65% 35%;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
main a:visited, main a:active, main a:link {
text-decoration: none;
color: black;
}
main .element {
position: relative;
padding-bottom: 24px;
word-break: break-word;
word-wrap: break-word;
text-align: justify;
hyphens: auto;
width: 11em;
height: 25em;
padding: 10px 10px 10px 10px;
margin: 2.5px 2.5px 0px 2.5px;
overflow: hidden;
}
main .element p:not(.hidden) {
display: block;
}
main .element p.hidden {
margin-top: 15px;
display: none;
font-style: italic;
}
main .element:hover p:not(.hidden) {
display: none;
}
main .element:hover h2 {
display: none;
}
main .element:hover p.hidden {
display: block;
}
main .element img {
border-radius: 10% 40% 40% 40%;
filter: blur(0.1px);
}
main .element:hover {
transition: 0.3s;
box-shadow: -1px -1px 30px 1px #ffb200;
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%);
color: white;
}
main .element:hover img {
border-radius: 10% 10% 10% 10%;
filter: blur(0);
transition: 0.3s;
}
main .element:hover h2 {
text-decoration: underline;
}
main .main-contents {
background-color: #e2e2e2;
padding: inherit;
border-left: 3px solid black;
display: flex;
flex-direction: column;
}
main .main-contents aside {
animation: load-items-right 0.2s ease-out;
display: flex;
flex-direction: column;
word-break: break-all;
word-wrap: break-word;
text-align: justify;
padding: 20px 10px;
margin: 15px 0px;
background-color: #f8f9fa;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
main .main-contents aside img {
max-width: 100%;
height: auto;
}
main .main-contents aside:hover {
transition: 0.3s;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
main .main-contents aside:hover h2::before {
transition: 0.2s ease-in;
bottom: -5px;
left: 0px;
width: 100%;
max-width: 100%;
height: 5px;
}
main .main-contents aside h2 {
font-style: italic;
font-family: "Playfair Display", serif;
position: relative;
}
main .main-contents aside h2::before {
content: " +++";
transition: 0.2s ease-out;
font-size: 12px;
color: grey;
position: absolute;
background-color: #4e4e4e;
bottom: -5px;
left: 5px;
width: 6%;
height: 5px;
}
main .main-contents aside p {
font-family: "Montserrat", serif;
text-align: justify;
}
main .main-contents aside a {
position: relative;
}
main .main-contents aside a::before {
content: " ";
position: absolute;
background-color: #2077d3;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
}
main .main-contents aside a::after {
transition: ease-out 0.3s;
content: " ";
position: absolute;
background-color: #fcbc3e;
bottom: -1px;
left: 0;
width: 0%;
height: 3px;
}
main .main-contents aside a:hover::after {
transition: all ease-out 0.3s;
width: 100%;
}
main .main-side {
animation: load-items-left 0.2s ease-out;
background-color: white;
padding: inherit;
align-content: flex-start;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
main .main-side img {
height: 150px;
width: 150px;
}
main .main-side u {
position: absolute;
bottom: 6px;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
text-decoration: underline green 2.8px;
text-decoration-skip-ink: none;
color: green;
font-weight: 600;
}
main .main-side u img {
margin-right: 4px;
height: 18px;
width: 18px;
}
/*# sourceMappingURL=style_index.css.map */