diff --git a/css/front-page.css b/css/front-page.css new file mode 100644 index 0000000..73821bf --- /dev/null +++ b/css/front-page.css @@ -0,0 +1,226 @@ +body { + background-color: #101010; +} + +@font-face { + font-family: 'Ubuntu Regular'; + src: url('../assets/Ubuntu-Regular.ttf') format('truetype'); +} + + +.slide-container { + font-family: 'Ubuntu Regular', sans-serif; + text-align: center; + color: white; +} + +.slide {} + +.avatar-container { + position: relative; + animation-name: avatar-fade-in-animation; + animation-duration: 4s; + animation-timing-function: ease-out; +} + +.avatar-container>img { + width: 300px; + margin: 50px; +} + +@keyframes avatar-fade-in-animation { + from { + opacity: 0; + top: -50px; + } + + to { + opacity: 1; + top: 0px; + } +} + +.title-container { + position: relative; + animation-name: title-fade-in-animation; + animation-duration: 3s; + animation-timing-function: ease-out; +} + +@keyframes title-fade-in-animation { + from { + opacity: 0; + top: 50px; + } + + to { + opacity: 1; + top: 0px; + } +} + +.links-container { + display: table; + margin: 0 auto; +} + +.links-container>ul { + width: 100%; + display: flex; + list-style: none; + padding-left: 0; +} + +.links-container>ul>li { + position: relative; + opacity: 0; + display: inline-block; + float: none; + padding: 10px; + animation-name: link-fade-in-animation; + animation-duration: 0.5s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; +} + +.links-container-main>ul>li { + width: 130px; +} + +.links-container>ul>li:nth-of-type(1) { + animation-delay: 2.4s; +} + +.links-container>ul>li:nth-of-type(2) { + animation-delay: 2.5s; +} + +.links-container>ul>li:nth-of-type(3) { + animation-delay: 2.6s; +} + +.links-container>ul>li:nth-of-type(4) { + animation-delay: 2.7s; +} + +.links-container>ul>li:nth-of-type(5) { + animation-delay: 2.8s; +} + +.links-container>ul>li:nth-of-type(6) { + animation-delay: 2.9s; +} + +@keyframes link-fade-in-animation { + from { + opacity: 0; + top: 50px; + } + + to { + opacity: 1; + top: 0px; + } +} + +a.social { + font-size:14pt; + color: #aaa; + text-decoration: none; +} + +a.social:link { + color: #aaa; + text-decoration: none; +} + +a.social:visited { + color: #aaa; + text-decoration: none; +} + +a.social:hover { + color: white; + text-decoration: none; + transform: scale(1.1); + transition: linear 0.1s; +} + +a.social:active { + color: white; + text-decoration: none; +} + +a.button { + font-weight: bold; + padding: 10px; + display: block; + background-color: #080808; + border-radius: 7px; + border-color: #222; + border-style: solid; + border-width: 1px; + box-shadow: black 0px 3px; +} + +a.button:link { + color: white; + text-decoration: none; +} + +a.button:visited { + color: white; + text-decoration: none; +} + +a.button:hover { + background-color: #151515; + color: white; + text-decoration: none; + transform: scale(1.1); + transition: linear 0.1s; +} + +a.button:active { + color: white; + text-decoration: none; +} + +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + /* visibility: hidden; */ + width: 120px; + background-color: #080808; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + top: 175%; + left: 50%; + margin-left: -60px; + opacity: 0; + box-shadow: black 0px 3px; +} + +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent #080808 transparent; +} + +.tooltip:hover .tooltiptext { + opacity: 1; + transition: linear 0.1s; +}