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.
94 lines
1.5 KiB
94 lines
1.5 KiB
3 years ago
|
.page {
|
||
|
|
background: rgb(255,85,200);
|
||
|
|
background: radial-gradient(to bottom left, rgba(255,85,200,1) 0%, rgba(79,79,255,1) 100%, rgba(0,212,255,1) 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 50px 0 200px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
display: flex;
|
||
|
|
gap: 1em;
|
||
|
|
margin: 100px 0 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
flex-grow: 1;
|
||
|
|
background-color: white;
|
||
|
|
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
|
||
|
|
padding: 50px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content h2 {
|
||
|
|
margin: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
gap: 3em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.links {
|
||
|
|
margin: -20px 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.links > a {
|
||
|
|
padding: 10px;
|
||
|
|
color: #1F50DD;
|
||
|
|
width: 10em;
|
||
|
|
font-size: 1.2em;
|
||
|
|
border-bottom: 4px solid #1F50DD;
|
||
|
|
transition-duration: 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.links > a:hover {
|
||
|
|
transition-duration: 0.2s;
|
||
|
|
border-bottom: 4px solid rgba(0,0,0,0);
|
||
|
|
transform: scale(0.97);
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar_bar {
|
||
|
|
margin: -40px 0 0 0;
|
||
|
|
flex-grow: 1;
|
||
|
|
display: flex;
|
||
|
|
gap: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar_bar h1 {
|
||
|
|
font-size: 3em;
|
||
|
|
margin: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
margin: -110px 0 0 0;
|
||
|
|
border: 6px solid white;
|
||
|
|
border-radius: 100%;
|
||
|
|
height: 200px;
|
||
|
|
transition-duration: 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar:hover {
|
||
|
|
transition-duration: 0.3s;
|
||
|
|
transform: scale(1.1) rotate(20deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery {
|
||
|
|
padding: 20px 0;
|
||
|
|
display: flex;
|
||
|
|
gap: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery > img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gallery > img:hover {
|
||
|
|
transform: scale(2);
|
||
|
|
}
|