154 lines
2.9 KiB
SCSS
Executable file
154 lines
2.9 KiB
SCSS
Executable file
body,
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.start-bg-logo {
|
|
background-image: $bgImageStart;
|
|
height: 92%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.start-bg-text {
|
|
text-align: center;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.start-bg-text p,
|
|
.start-bg-text {
|
|
background: transparent;
|
|
font-weight: bold;
|
|
font-size: 100px;
|
|
}
|
|
|
|
.stage {
|
|
display: flex;
|
|
height: 8%;
|
|
width: 100%;
|
|
background: transparent;
|
|
#mouse {
|
|
content: url("https://api.iconify.design/ion-mouse.svg?height=16&color=White");
|
|
vertical-align: -0.125em;
|
|
display: table;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
height: 50px;
|
|
background: transparent;
|
|
animation-name: bounce-3;
|
|
animation-timing-function: ease;
|
|
align-self: flex-end;
|
|
animation-duration: 1.5s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
@keyframes bounce-3 {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
30% {
|
|
transform: translateY(-30px);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-right: 7vh;
|
|
margin-left: 7vh;
|
|
h1 {
|
|
font-size: 40px;
|
|
}
|
|
p {
|
|
font-size: 20px;
|
|
}
|
|
#intro {
|
|
img {
|
|
width: 150px;
|
|
float: left;
|
|
margin-bottom: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
span {
|
|
text-align: block;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skill_item {
|
|
border-radius: 10px;
|
|
margin: 4px;
|
|
padding: 10px;
|
|
border: solid 0.5px $SecundaryColor;
|
|
min-width: 15vh;
|
|
width: auto;
|
|
|
|
}
|
|
|
|
.skill_item img {
|
|
max-height: 22px;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#contact {
|
|
.form-group {
|
|
div {
|
|
input[type=email],input[type=text] {
|
|
background-color: $BackgroundLighter;
|
|
border: solid 0.5px $SecundaryColor;
|
|
margin: 4px;
|
|
color:white;
|
|
max-width: 40vh;
|
|
padding:1vh;
|
|
}
|
|
input::placeholder,textarea::placeholder,textarea{
|
|
color:$SecundaryColor;
|
|
}
|
|
input[type=checkbox]{
|
|
width:2vh;
|
|
height:2vh;
|
|
background-color: $BackgroundLighter;
|
|
border: solid 0.5px $SecundaryColor;
|
|
}
|
|
textarea{
|
|
background-color: $BackgroundLighter;
|
|
border: solid 0.5px $SecundaryColor;
|
|
max-width: 90vh;
|
|
margin: 4px;
|
|
padding:1vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#contactSubmit{
|
|
background-color: $BackgroundDarker;
|
|
color:$PrimaryColor;
|
|
padding:10px;
|
|
margin:5px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.recommended_post{
|
|
border: solid 1px $SecundaryColor;
|
|
border-radius: 12px;
|
|
padding-bottom: 1vh;
|
|
h2{
|
|
color: $SecundaryColor;
|
|
}
|
|
min-width: 40vh;
|
|
width: auto;
|
|
margin-bottom: 1vh;
|
|
margin-left: 1vh;
|
|
} |