commit 20f9d531700f1190b295982d68e9516ae498b2e0 Author: Gu://em_ Date: Wed Apr 23 23:16:35 2025 +0200 First commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..69f2275 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +old/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..ce41bfc --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Oblic Parallels website + +Pure static HTML/CSS website for https://oblic-parallels.fr \ No newline at end of file diff --git a/assets/logos/forge.svg b/assets/logos/forge.svg new file mode 100644 index 0000000..9c46d82 --- /dev/null +++ b/assets/logos/forge.svg @@ -0,0 +1,40 @@ + diff --git a/assets/logos/generic.svg b/assets/logos/generic.svg new file mode 100644 index 0000000..b9a9fbb --- /dev/null +++ b/assets/logos/generic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/logos/goouillem.svg b/assets/logos/goouillem.svg new file mode 100644 index 0000000..088288f --- /dev/null +++ b/assets/logos/goouillem.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/logos/oldflix.png b/assets/logos/oldflix.png new file mode 100644 index 0000000..d1c5652 Binary files /dev/null and b/assets/logos/oldflix.png differ diff --git a/assets/logos/penpot.svg b/assets/logos/penpot.svg new file mode 100644 index 0000000..1a110d8 --- /dev/null +++ b/assets/logos/penpot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/logos/photos.svg b/assets/logos/photos.svg new file mode 100644 index 0000000..dac19cb --- /dev/null +++ b/assets/logos/photos.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..818938a --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + + + + Oblic Parallels + + + + +

+ +

Welcome to

Oblic Parallels

+ +

+ Parallel Forge +

+ A git server for git projects +

+ + +

+ Goouillem +

+ My totally unique search engine +

+ + +

+ Parallel Flix +

+ Almost legal streaming service +

+ + +

+ Designer +

+ An open-source design tool +

+ + +

+ Parallel Photos +

+ Comming soon™ +

+ +

+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2c61b35 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file