Added more effects because "YES"

This commit is contained in:
Stone-Red-Code
2021-05-11 18:11:57 +02:00
parent f1d5d114fa
commit 86d80ec0cd
2 changed files with 24 additions and 12 deletions
+2 -2
View File
@@ -6,7 +6,7 @@
<div>Get in contact:</div> <div>Get in contact:</div>
</div> </div>
<div class="col d-flex justify-content-end"> <div class="col d-flex justify-content-end">
<div> <div id="contactItems">
<a href="http://github.com/Stone-Red-Code"><img <a href="http://github.com/Stone-Red-Code"><img
src="Icons/icons8-github-60.png" alt="Discord icon" height="30"/></a> src="Icons/icons8-github-60.png" alt="Discord icon" height="30"/></a>
<a href="http://discord.com/users/374173830819872789"><img <a href="http://discord.com/users/374173830819872789"><img
@@ -19,7 +19,7 @@
<h3>About me</h3> <h3>About me</h3>
<p class="text-white-50">I'm just a random guy who likes programming and watching anime.</p> <p class="text-white-50">I'm just a random guy who likes programming and watching anime.</p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4" id="Tools">
<h3>Languages & Tools:</h3> <h3>Languages & Tools:</h3>
<a href="https://docs.microsoft.com/en-us/dotnet/csharp"><img <a href="https://docs.microsoft.com/en-us/dotnet/csharp"><img
src="https://img.icons8.com/color/50/000000/c-sharp-logo.png" alt="C Sharp icon" height="40" /></a> src="https://img.icons8.com/color/50/000000/c-sharp-logo.png" alt="C Sharp icon" height="40" /></a>
+22 -10
View File
@@ -52,11 +52,21 @@ footer {
.jumbotron { .jumbotron {
animation-name: fadeGray; animation-name: fadeGray;
background: #dadde0; background: #dadde0;
transition: background-color 0.5s ease-out 100ms; transition: background-color 0.5s ease-out 100ms, filter 0.5s ease-out 100ms;
filter: none;
} }
.jumbotron:hover { .jumbotron:hover {
background-color: #ffffff; background-color: #ffffff;
filter: drop-shadow(0px 0px 0.4rem #dadde0);
}
#Tools>a>img {
transition: all 0.2s;
}
#Tools>a>img:hover {
transform: scale(1.1)
} }
#quotes { #quotes {
@@ -70,6 +80,11 @@ footer {
background-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.12);
border-radius: 0.3rem; border-radius: 0.3rem;
visibility: hidden; visibility: hidden;
transition: filter 0.5s ease-out 100ms;
}
#quotes:hover {
filter: drop-shadow(0px 0px 1rem darkgray);
} }
.fade-in { .fade-in {
@@ -97,9 +112,12 @@ h3 {
word-wrap: break-word; word-wrap: break-word;
} }
.contact>p { #contactItems>a>img {
color: white; transition: transform 0.5s;
padding-left: 10px; }
#contactItems>a>img:hover {
transform: scale(1.15);
} }
.navbar-light .navbar-nav .nav-link { .navbar-light .navbar-nav .nav-link {
@@ -112,20 +130,14 @@ a:link {
text-decoration: underline; text-decoration: underline;
} }
/* visited link */
a:visited { a:visited {
color: gray; color: gray;
} }
/* mouse over link */
a:hover { a:hover {
color: black; color: black;
} }
/* selected link */
a:active { a:active {
color: rgb(180, 180, 180); color: rgb(180, 180, 180);
} }