Verified Commit 63bc3370 authored by Jakob Moser's avatar Jakob Moser
Browse files

Add first draft of start page

parents

css/main.css

0 → 100644
+42 −0
Changes for css/main.css: 42 added lines, 0 removed lines.
Original line number Diff line number Diff line 
:root {

    --shadow-width: 2px;

}



body {

    font-family: "Roboto", sans-serif;

    background-image: url("/img/nautilus.svg");

    display: grid;

    min-height: 100vh;

    align-content: center;

    justify-content: center;

}



main {

    display: grid;

    grid-template-columns: repeat(4, max-content);

    column-gap: 4em;

}



a {

    display: grid;

    height: 10em;

    width: 10em;

    box-shadow: var(--shadow-width) var(--shadow-width) 5px rgba(0, 0, 0, 0.5);

    border-radius: 8%;

    justify-content: center;

    align-content: center;

    text-decoration: none;

    color: black;

    background: radial-gradient(

        circle,

        rgba(255, 255, 255, 1) 0%,

        rgba(255, 255, 255, 0.85) 100%

    );

    margin-bottom: var(--shadow-width);

    margin-right: var(--shadow-width);

}



a:active {

    margin: var(--shadow-width) 0 0 var(--shadow-width);

    box-shadow: none;

}

img/nautilus.svg

0 → 100644
+1 −0
Changes for img/nautilus.svg: 1 added line, 0 removed lines.
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="1920" height="921" viewBox="0 0 1920 921"><rect width="1920" height="921" fill="#191919"/><g data-index="0" transform="translate(960 460.5) scale(4.1) translate(-960 -460.5)"><defs><linearGradient id="vortex-0-0" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-1" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-2" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-3" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-4" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-5" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-6" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-7" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-8" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-9" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-10" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-11" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-12" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient><linearGradient id="vortex-0-13" color-interpolation="linearRGB" x1="0" y1="1" x2="0" y2="0"><stop offset="0.13" stop-color="#99c1f1" stop-opacity="0.17"/><stop offset="0.71" stop-color="#3584e4" stop-opacity="0.5"/><stop offset="1" stop-color="#1a5fb4" stop-opacity="1"/></linearGradient></defs><g transform="translate(70 16) rotate(0 960 460.5)" class="group"><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-13)" fill-opacity="1.0714285714285714" stroke="rgba(34, 106, 194, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-195) scale(10.699320537907195)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-12)" fill-opacity="1.1428571428571428" stroke="rgba(40, 115, 205, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-180) scale(8.916100448255996)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-11)" fill-opacity="1.2142857142857144" stroke="rgba(47, 123, 217, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-165) scale(7.430083706879997)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-10)" fill-opacity="1.2857142857142856" stroke="rgba(53, 132, 228, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-150) scale(6.191736422399997)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-9)" fill-opacity="1.3571428571428572" stroke="rgba(65, 140, 230, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-135) scale(5.1597803519999985)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-8)" fill-opacity="1.4285714285714286" stroke="rgba(77, 147, 231, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-120) scale(4.2998169599999985)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-7)" fill-opacity="1.5" stroke="rgba(89, 154, 233, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-105) scale(3.583180799999999)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-6)" fill-opacity="1.5714285714285714" stroke="rgba(103, 162, 234, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-90) scale(2.9859839999999993)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-5)" fill-opacity="1.6428571428571428" stroke="rgba(115, 170, 236, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-75) scale(2.4883199999999994)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-4)" fill-opacity="1.7142857142857144" stroke="rgba(127, 177, 238, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-60) scale(2.0736)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-3)" fill-opacity="1.7857142857142856" stroke="rgba(139, 184, 239, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-45) scale(1.728)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-2)" fill-opacity="1.8571428571428572" stroke="rgba(151, 192, 241, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-30) scale(1.44)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-1)" fill-opacity="1.9285714285714286" stroke="rgba(153, 193, 241, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(-15) scale(1.2)" transform-origin="1010 510.5"/><rect x="960" y="460.5" width="100" height="100" rx="20" ry="20" class="rect" style="mix-blend-mode: normal;" fill="url(#vortex-0-0)" fill-opacity="2" stroke="rgba(153, 193, 241, 255)" stroke-opacity="0" stroke-width="1" opacity="1" transform="translate(0 0) rotate(0) scale(1)" transform-origin="1010 510.5"/></g></g></svg>
 
 No newline at end of file

index.html

0 → 100644
+20 −0
Changes for index.html: 20 added lines, 0 removed lines.
Original line number Diff line number Diff line 
<!doctype html>

<html lang="de">



<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Portal · Fachschaft Computerlinguistik</title>

    <link rel="stylesheet" href="./css/main.css" />

</head>



<body>

    <main>

        <a target="_blank" href="https://fachschaft.cl.uni-heidelberg.de/meet">Meeting</a>

        <a target="_blank" href="https://fachschaft.cl.uni-heidelberg.de/tickets">Tickets</a>

        <a target="_blank" href="https://fachschaft.cl.uni-heidelberg.de/todo">Todo</a>

        <a target="_blank" href="https://fachschaft.cl.uni-heidelberg.de/docs/Kalender">Kalender</a>

    </main>

</body>



</html>