First commit
This commit is contained in:
Gu://em_
commit
20f9d53170
10 changed files with 371 additions and 0 deletions
246
style.css
Normal file
246
style.css
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
/*-Impports----------------------------------------------------------*/
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap'); */
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
/*-Fonts----------------------------------------------------------*/
|
||||
|
||||
/* @font-face {
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
|
||||
} */
|
||||
|
||||
|
||||
/*-Page----------------------------------------------------------*/
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
user-select: none;
|
||||
/* background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%); */
|
||||
background-color: #000000;
|
||||
/* background-image: url(assets/svg/background.svg); */
|
||||
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
padding:0;
|
||||
|
||||
font-family: 'Inter';
|
||||
}
|
||||
|
||||
.halo {
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%);
|
||||
}
|
||||
|
||||
/*-Texts----------------------------------------------------------*/
|
||||
|
||||
|
||||
h1 {
|
||||
position: fixed;
|
||||
top: 27%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
z-index: -1;
|
||||
|
||||
color: #eaeaea;
|
||||
text-align: center;
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
font-size: 500%;
|
||||
user-select: none;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: fixed;
|
||||
top: 16%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%); /*Center (compensate size)*/
|
||||
z-index: -1;
|
||||
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-weight: 400;
|
||||
font-size: 250%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*-Cards----------------------------------------------------------*/
|
||||
|
||||
.card-container{
|
||||
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
z-index: 1;
|
||||
|
||||
height: 40%;
|
||||
/* width: 200%; */
|
||||
|
||||
/*Calculate offset to center the second card*/
|
||||
/* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */
|
||||
/*TODO correct with JS*/
|
||||
margin-left: calc( 50vw - ( (500px + 4rem) + (500px + 6rem) / 2 ));
|
||||
|
||||
display: flex; /* Flexbox */
|
||||
flex-direction: row;/* Align content horizontally */
|
||||
justify-content: center;
|
||||
overflow: visible; /*Prevent cards shadows to be cut off*/
|
||||
}
|
||||
|
||||
|
||||
.card_old {
|
||||
|
||||
position: relative;
|
||||
top: 0px;
|
||||
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
|
||||
color: #FFFFFF00; /*Temporary*/
|
||||
background-color: #121212;
|
||||
|
||||
/*Testing with borders*/
|
||||
padding: 20px;
|
||||
border-radius: 1.4em;
|
||||
/* border-width: 0.1em; */
|
||||
/* border-style: solid; */
|
||||
border: 4px solid transparent;
|
||||
background-clip: padding-box;
|
||||
|
||||
/* Could prevent inconcistencies with boders */
|
||||
/* overflow:hidden */
|
||||
|
||||
|
||||
filter: drop-shadow(#00000040 0 3em 40px);
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
|
||||
width: 31.2rem;
|
||||
height: 18rem;
|
||||
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
|
||||
color: #FFFFFF00; /*Temporary*/
|
||||
background-color: #121212;
|
||||
|
||||
/* padding: 20px; */
|
||||
border: 4px solid transparent;
|
||||
border-radius: 1.4em;
|
||||
background-clip: padding-box;
|
||||
|
||||
transition: 300ms;
|
||||
}
|
||||
|
||||
/*Cards borders*/
|
||||
.card::after {
|
||||
|
||||
position: absolute;
|
||||
top: -0.05em; bottom: -0.05em;
|
||||
left: -0.05em; right: -0.05em;
|
||||
|
||||
background: linear-gradient(135deg, #353be5 0%, #43434388 100%);
|
||||
content: '';
|
||||
z-index: -1;
|
||||
border-radius: 1.2em;
|
||||
|
||||
filter: drop-shadow(#00000080 0 2em 40px);
|
||||
|
||||
transition: 500ms;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card:hover {
|
||||
/* background: linear-gradient(135deg, #7b2df1 0%, #353be5A0 100%); */
|
||||
/* filter: drop-shadow(#353be5A0 0 2em 40px); */
|
||||
top: -1%
|
||||
}
|
||||
|
||||
.card:hover::after {
|
||||
background: linear-gradient(135deg, #4000ff 0%, #353be570 100%);
|
||||
filter: drop-shadow(#4f35e5a0 0 2em 40px);
|
||||
|
||||
top: -0.1em; bottom: -0.1em;
|
||||
left: -0.1em; right: -0.1em;
|
||||
|
||||
}
|
||||
|
||||
.card-title {
|
||||
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 25%;
|
||||
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
|
||||
height: fit-content;
|
||||
width: 65%;
|
||||
|
||||
font-family: 'IBM Plex Mono';
|
||||
font-size: 1.4em;
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.card > img {
|
||||
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
margin-top: 3vh;
|
||||
margin-left: 3vh;
|
||||
width: 3.7rem;
|
||||
height: 3.7rem;
|
||||
|
||||
transition-duration: 500ms;
|
||||
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
|
||||
filter: drop-shadow(0 0 4px #7782ff);
|
||||
-webkit-filter: drop-shadow(0 0 4px #7782ff);
|
||||
|
||||
transition: cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue