You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
6 years ago
|
a, .profile-header a {
|
||
|
|
font-size: 16px;
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: sans-serif;
|
||
|
|
text-align: center;
|
||
|
|
background: linear-gradient(155deg, #4b9fbe 70%, #a9d1e0 70%);
|
||
|
|
color: white;
|
||
|
|
min-height: 100vh; }
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
color: white; }
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
color: white; }
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #4b9fbe;
|
||
|
|
background-color: white; }
|
||
|
|
|
||
|
|
.profile-header a {
|
||
|
|
color: white;
|
||
|
|
background-color: #a9d1e0; }
|
||
|
|
|
||
|
|
.profile-body {
|
||
|
|
display: flex;
|
||
|
|
align-items: stretch;
|
||
|
|
justify-content: space-around;
|
||
|
|
margin-top: 32px;
|
||
|
|
margin-left: 10vw;
|
||
|
|
margin-right: 10vw; }
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
.profile-body {
|
||
|
|
flex-direction: column; } }
|
||
|
|
|
||
|
|
.profile-section {
|
||
|
|
position: relative;
|
||
|
|
position: relative;
|
||
|
|
color: #4b9fbe;
|
||
|
|
background-color: white;
|
||
|
|
margin: 120px 16px 120px 16px;
|
||
|
|
width: 340px; }
|
||
|
|
.profile-section::after {
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100' fill='rgb(255,255,255)' fill-opacity='1'%3E%3Cpolygon points='0,0 100,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
|
||
|
|
background-position: center center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
content: '';
|
||
|
|
height: 100px;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 1;
|
||
|
|
bottom: -100px; }
|
||
|
|
.profile-section::before {
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100' fill='rgb(255,255,255)' fill-opacity='1'%3E%3Cpolygon points='0,100 100,100 0,0'%3E%3C/polygon%3E%3C/svg%3E");
|
||
|
|
background-position: center center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
content: '';
|
||
|
|
height: 100px;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 1;
|
||
|
|
top: -100px; }
|
||
|
|
.profile-section .profile-content {
|
||
|
|
padding: 20px; }
|
||
|
|
@media screen and (max-width: 800px) {
|
||
|
|
.profile-section {
|
||
|
|
width: 100%; } }
|
||
|
|
|
||
|
|
.profile-logo {
|
||
|
|
font-size: 60px;
|
||
|
|
font-family: cursive;
|
||
|
|
-webkit-transform: rotate(25deg);
|
||
|
|
-moz-transform: rotate(25deg);
|
||
|
|
-ms-transform: rotate(25deg);
|
||
|
|
transform: rotate(25deg); }
|
||
|
|
|
||
|
|
/*# sourceMappingURL=styles.css.map */
|