Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-03-21 17:24:28 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Hero 2DS & bubbles

Browse Source
This commit is contained in:
Jip Fr 2020-05-07 14:22:01 +02:00
parent 00102ee738
commit e1fe048d9d
4 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/deco.svg Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="839.371" height="893.406" viewBox="0 0 839.371 893.406">
<g id="deco" transform="translate(-1064.958 -142.958)">
<g id="Ellipse_12" data-name="Ellipse 12" transform="translate(1314 265)" fill="none" stroke="#9d6ff3" stroke-width="26">
<circle cx="56" cy="56" r="56" stroke="none"/>
<circle cx="56" cy="56" r="69" fill="none"/>
</g>
<g id="Ellipse_22" data-name="Ellipse 22" transform="translate(1361 771)" fill="none" stroke="#59c9a5" stroke-width="26">
<circle cx="77" cy="77" r="77" stroke="none"/>
<circle cx="77" cy="77" r="90" fill="none"/>
</g>
<g id="Ellipse_13" data-name="Ellipse 13" transform="translate(1801.405 273.601) rotate(1)" fill="none" stroke="#9d6ff3" stroke-width="26">
<circle cx="23" cy="23" r="23" stroke="none"/>
<circle cx="23" cy="23" r="36" fill="none"/>
</g>
<g id="Ellipse_23" data-name="Ellipse 23" transform="matrix(0.839, -0.545, 0.545, 0.839, 1651.184, 609.237)" fill="none" stroke="#25224f" stroke-width="26">
<circle cx="78.5" cy="78.5" r="78.5" stroke="none"/>
<circle cx="78.5" cy="78.5" r="91.5" fill="none"/>
</g>
<circle id="Ellipse_15" data-name="Ellipse 15" cx="23" cy="23" r="23" transform="translate(1586.473 353) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_21" data-name="Ellipse 21" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1588.958 188.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"/>
<circle id="Ellipse_16" data-name="Ellipse 16" cx="23" cy="23" r="23" transform="translate(1169.473 524) rotate(-45)" fill="#59c9a5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

19
public/main.css
View File

@ -56,10 +56,10 @@ header nav a {
background: #CAB1FB;
width: 500px;
height: 500px;
position: absolute;
position: relative;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 35px), calc(-50% + 120px));
transform: translate(calc(-50% - 35px), -50%);
border-radius: 50%;
z-index: 5;
/* Tmp */
@ -67,6 +67,21 @@ header nav a {
justify-content: center;
align-items: center;
}
.light-purple-circle .n2ds {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -40px;
z-index: 3;
}
.light-purple-circle .deco {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 70px));
z-index: 2;
}
/* Hero */
.hero {

BIN
public/n2ds.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

33
views/home.handlebars
View File

@ -1,7 +1,7 @@
{{!-- this is temp --}}
<img src="tmp/home.png" style="position: absolute; top: 0;left: 0; opacity: 0.5; z-index: -1; pointer-events: none;">
{{!-- <img src="tmp/home.png" style="position: absolute; top: 0;left: 0; opacity: 0.5; z-index: -1; pointer-events: none;"> --}}
{{!-- This is not --}}
@ -41,7 +41,36 @@
</div>
<div class="hero-image">
<div class="light-purple-circle">
I will do this bit later
<img class="n2ds" src="n2ds.png">
<div class="deco">
<svg xmlns="http://www.w3.org/2000/svg" width="839.371" height="893.406" viewBox="0 0 839.371 893.406">
<g id="deco" transform="translate(-1064.958 -142.958)">
<g id="Ellipse_12" data-name="Ellipse 12" transform="translate(1314 265)" fill="none" stroke="#9d6ff3" stroke-width="26">
<circle cx="56" cy="56" r="56" stroke="none"/>
<circle cx="56" cy="56" r="69" fill="none"/>
</g>
<g id="Ellipse_22" data-name="Ellipse 22" transform="translate(1361 771)" fill="none" stroke="#59c9a5" stroke-width="26">
<circle cx="77" cy="77" r="77" stroke="none"/>
<circle cx="77" cy="77" r="90" fill="none"/>
</g>
<g id="Ellipse_13" data-name="Ellipse 13" transform="translate(1801.405 273.601) rotate(1)" fill="none" stroke="#9d6ff3" stroke-width="26">
<circle cx="23" cy="23" r="23" stroke="none"/>
<circle cx="23" cy="23" r="36" fill="none"/>
</g>
<g id="Ellipse_23" data-name="Ellipse 23" transform="matrix(0.839, -0.545, 0.545, 0.839, 1651.184, 609.237)" fill="none" stroke="#25224f" stroke-width="26">
<circle cx="78.5" cy="78.5" r="78.5" stroke="none"/>
<circle cx="78.5" cy="78.5" r="91.5" fill="none"/>
</g>
<circle id="Ellipse_15" data-name="Ellipse 15" cx="23" cy="23" r="23" transform="translate(1586.473 353) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_21" data-name="Ellipse 21" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1588.958 188.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_25" data-name="Ellipse 25" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1143.958 1021.514) rotate(-45)" fill="#9d6ff3"/>
<ellipse id="Ellipse_26" data-name="Ellipse 26" cx="11" cy="10.5" rx="11" ry="10.5" transform="translate(1064.958 158.514) rotate(-45)" fill="#9d6ff3"/>
<circle id="Ellipse_16" data-name="Ellipse 16" cx="23" cy="23" r="23" transform="translate(1169.473 524) rotate(-45)" fill="#59c9a5"/>
</g>
</svg>
</div>
</div>
</div>
<div class="misc">