v4.0

HomePage/static/HomePage/CSS/projects.css

@@ -0,0 +1,324 @@
+* {
+    margin:0;
+    padding:0;
+}
+
+html {
+    scroll-behavior:smooth;
+    overflow-x:hidden;
+}
+
+body {
+    font-family:sans-serif;
+}
+
+::-webkit-scrollbar {
+    width:6.5px;
+    background:rgba(255,255,255,1);
+}
+
+::-webkit-scrollbar-thumb {
+    background:rgba(0,0,0,0.8);
+    border-radius:10px;
+}
+
+.title {
+    width:100%;
+    height:100vh;
+    background-size:cover;
+    background-repeat:no-repeat;
+    background-attachment:fixed;
+}
+
+.title a {
+    width:100%;
+    display:flex;
+    justify-content:center;
+    margin:0;
+    position:relative;
+}
+
+.title i {
+    position:absolute;
+    top:0;
+    left:50%;
+    transform:translateX(-50%);
+    transition: top 0.3s ease-in-out;
+}
+
+.title i:hover {
+    top:3vh;
+    transition: all 0.3s ease-in-out;
+}
+
+.title .container {
+    position:absolute;
+    top:55%;
+    left:50%;
+    transform:translate(-50%, -50%);
+    width:80%;
+    font-family: 'Questrial', sans-serif;
+}
+
+.brand {
+    color:#fff;
+    font-size:5vw;
+    text-align:center;
+}
+
+.subtitle {
+    color:#fff;
+    font-size:2vw;
+    text-align:center;
+}
+
+.projects {
+    background:#fff;
+    width:100%;
+    height:100vh;
+    text-align:center;
+    margin-bottom:50vh;
+}
+
+.projects a {
+    font-family:sans-serif;
+    text-decoration:none;
+    color:#fff;
+    border:3px solid #fff;
+    margin-top:5vh;
+    padding:1vh 1vw;
+    text-transform:uppercase;
+    font-weight:700;
+    transition:background-color 0.2s ease-in, color 0.2s ease-in;
+}
+
+.projects a:hover {
+    background:#fff;
+    color:#000;
+    transition:background-color 0.3s ease-in, color 0.3s ease-in;
+}
+
+.projects .container {
+    top:150%;
+    left:50%;
+    position:absolute;
+    transform:translate(-50%, -50%);
+    width:90%;
+}
+
+.projects .desktop,
+.projects .mobile {
+    display:table;
+    width:100%;
+    background:none;
+    padding:5vh 5vw;
+    border-radius:3vw;
+}
+
+.projects .desktop {
+    height:70vh;
+}
+
+.projects .mobile {
+    display:none;
+}
+
+.projects tr {
+    display:flex;
+    gap:3em;
+    flex-grow:1;
+}
+
+.desktop tr {
+    height:100%;
+}
+
+.mobile tr {
+    width:100%;
+    height:25%;
+}
+
+.projects td {
+    height:100%;
+    color:#fff;
+    background-repeat:no-repeat;
+    background-attachment:fixed;
+    width:25%;
+    border-radius:3vw;
+}
+
+.mobile td {
+    width:100%;
+    height:100%;
+    margin-top:5vh;
+}
+
+.projects .overlay {
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    width:100%;
+    height:100%;
+    background:rgba(0,0,0,0.25);
+    border-radius:3vw;
+}
+
+.projects h1 {
+    font-family:'Questrial', sans-serif;
+    font-size:2.5vw;
+}
+
+.projects h2 {
+    font-family: 'Gothic A1', sans-serif;
+    font-size:1.5vw;
+    padding-top:5vh;
+}
+
+.footer {
+    height:50vh;
+    background:#000;
+    color:#fff;
+    text-align:center;
+    position:fixed;
+    bottom:0;
+    left:0;
+    z-index:-1;
+    width:100%;
+}
+
+.footer .container {
+    position:absolute;
+    width:100%;
+    height:100%;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
+}
+
+.sponsors,
+.orgs,
+.social-media {
+    position:absolute;
+    left:50%;
+    top:10vh;
+    transform:translateX(-50%);
+}
+
+.orgs {
+    top:25vh;
+}
+
+.copyright {
+    padding-top:20vh;
+    font-size:1vw;
+    font-family: 'Gothic A1', sans-serif;
+}
+
+.social-media {
+    top:35vh;
+}
+
+
+.sponsors-row,as
+.orgs-row,
+.social-media-row {
+    width:100%;
+    height:100%;
+    display:flex;
+    gap:2.5vw;
+}
+
+.sponsors-cell {
+    height:20%;
+    position:relative;
+}
+
+.orgs-row {
+    width:100%;
+    height:100%;
+    display:flex;
+    gap:2.5vw;
+}
+
+.orgs-cell {
+    height:100%;
+    position:relative;
+}
+
+.sponsors-cell img,
+.orgs-cell img {
+    height:5vh;
+    margin:0;
+}
+
+.social-media i,
+.title i {
+    color:#fff;
+    font-size:3vw;
+}
+
+.social-media i {
+    transition: color 0.2s ease-in-out;
+}
+
+.social-media i:hover {
+    color:#79b9cf;
+    transition: color 0.2s ease-in-out;
+}
+
+@media screen and (max-width: 900px) {
+
+    .sponsors-cell img,
+    .orgs-cell img {
+        height:3.5vh;
+        margin:0;
+    }
+
+    .copyright {
+        font-size:2vw;
+    }
+
+    .social-media i,
+    .title i {
+        color:#fff;
+        font-size:5vw;
+    }
+
+    .brand {
+        font-size:7.5vw;
+    }
+
+    .subtitle {
+        font-size:4vw;
+    }
+
+    .title .container {
+        width:90%;
+    }
+
+    .projects h1 {
+        font-size:4vw;
+        padding-top:1vh;
+    }
+
+    .projects h2 {
+        font-size:3vw;
+        padding:2vh 3vw;
+    }
+
+    .projects .mobile {
+        background:none;
+        display:table;
+        padding:0;
+    }
+
+    .projects .desktop {
+        display:none;
+    }
+
+    .projects a {
+        margin-bottom:1vh;
+        margin-top:0vh;
+    }
+}