Updated teams page
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6bef498
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.multiRootWorkspaceName": "blissroms.github.io"
+}
\ No newline at end of file
diff --git a/home.css b/css/home.css
similarity index 100%
rename from home.css
rename to css/home.css
diff --git a/css/newteams.css b/css/newteams.css
new file mode 100644
index 0000000..bdc1368
--- /dev/null
+++ b/css/newteams.css
@@ -0,0 +1,253 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+html {
+ scroll-behavior: auto;
+}
+
+.z-0 {
+ z-index: 0;
+}
+
+.z-999 {
+ z-index: 999;
+}
+
+:root {
+ font-family: Inter;
+ --color-1: #ffffff;
+}
+body {
+ overflow-x: hidden;
+ line-height: 1.5;
+ font-family: sans-serif;
+ background-color: #fafafa;
+}
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+a {
+ text-decoration: none;
+}
+ul {
+ list-style: none;
+}
+.container {
+ max-width: 1170px;
+ margin: auto;
+}
+.row {
+ display: flex;
+ flex-wrap: wrap;
+}
+.align-items-center {
+ align-items: center;
+}
+.justify-content-between {
+ justify-content: space-between;
+}
+
+/*header*/
+.header {
+ width: 100%;
+ position: absolute;
+ top: 0;
+ padding: 12px 0;
+ backdrop-filter: blur(24px) saturate(180%);
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgba(255, 255, 255, 0.75);
+ border: 1px solid rgba(209, 213, 219, 0.3);
+}
+.header .logo,
+.header .nav {
+ padding: 0 15px;
+}
+.header .logo a {
+ font-size: 30px;
+ color: #ffffff;
+ text-transform: capitalize;
+}
+.header .nav ul li {
+ display: inline-block;
+ margin-left: 40px;
+}
+.header .nav ul li a {
+ display: block;
+ font-size: 18px;
+ padding: 10px 0;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.7);
+ text-transform: capitalize;
+ transition: all 0.5s ease;
+}
+.header .nav ul li a:hover,
+.header .nav ul li a.active {
+ color: #0073e5;
+ text-decoration: underline;
+ text-underline-offset: 3px;
+}
+.header #nav-check {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.nav-toggler {
+ height: 34px;
+ width: 44px;
+ color: #0073e5;
+ border-radius: 4px;
+ cursor: pointer;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ margin-right: 15px;
+ transition: all 0.5s ease;
+}
+.nav-toggler span {
+ display: block;
+ height: 2px;
+ width: 20px;
+ background-color: #000000;
+ position: relative;
+}
+.nav-toggler span::before,
+.nav-toggler span::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: #000000;
+ left: 0;
+}
+.nav-toggler span::before {
+ top: -6px;
+ transition: all 0.5s ease;
+}
+.nav-toggler span::after {
+ top: 6px;
+ transition: all 0.5s ease;
+}
+@media (max-width: 991px) {
+ .nav-toggler {
+ display: flex;
+ transition: all 0.5s ease;
+ }
+ .header .nav {
+ position: absolute;
+ left: 0;
+ top: 100%;
+ width: 100%;
+ background-color: var(--color-1);
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
+ opacity: 0;
+ visibility: hidden;
+ }
+ .header .nav ul li {
+ display: block;
+ margin: 0;
+ }
+ .header #nav-check:checked ~ .nav {
+ opacity: 1;
+ visibility: visible;
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span {
+ background-color: transparent;
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span::before {
+ top: 0;
+ transform: rotate(45deg);
+ transition: all 0.5s ease;
+ }
+ .header #nav-check:checked ~ .nav-toggler span::after {
+ top: 0;
+ transform: rotate(-45deg);
+ transition: all 0.5s ease;
+ }
+}
+
+/* Herosection */
+.orb-canvas {
+ position: absolute;
+ top: 0%;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: -1;
+ opacity: 32%;
+}
+.hero {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.hero-h1 {
+ text-align: center;
+ font-size: 4rem;
+ font-weight: 500;
+ line-height: 1.15;
+ color: black;
+}
+.hero-h1 span {
+ font-weight: 500;
+ line-height: 1.15;
+ color: orangered;
+}
+
+.hero-h3 {
+ margin-top: 0.5rem;
+ width: 40%;
+ text-align: center;
+ font-size: 1.2rem;
+ color: black;
+ font-weight: 400;
+}
+.container_mouse {
+ position: absolute;
+ bottom: 10px;
+}
+.mouse-btn {
+ margin: 10px auto;
+ width: 16px;
+ height: 32px;
+ border: 3px solid rgba(122, 122, 124, 0.918);
+ border-radius: 20px;
+ display: flex;
+ pointer-events: none;
+}
+
+.mouse-scroll {
+ display: block;
+ width: 8px;
+ height: 8px;
+ background: linear-gradient(
+ 170deg,
+ rgba(122, 122, 124, 0.918),
+ rgb(123, 124, 124)
+ );
+ border-radius: 50%;
+ margin: auto;
+ animation: scrollinganim 1.8s ease-in infinite;
+ pointer-events: none;
+}
+
+@keyframes scrollinganim {
+ 0% {
+ opacity: 0;
+ transform: translateY(-8px);
+ }
+
+ 50% {
+ opacity: 1;
+ transform: translateY(8px);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+}
diff --git a/css/team-sec.css b/css/team-sec.css
new file mode 100644
index 0000000..6b335d0
--- /dev/null
+++ b/css/team-sec.css
@@ -0,0 +1,168 @@
+.at-section__title {
+ margin: 4rem 0 70px;
+ color: #000;
+ font-family: "Roboto", sans-serif;
+ font-size: 3.5rem;
+ font-weight: 300;
+ line-height: 2.625rem;
+ text-align: center;
+}
+.at-grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ background: #fff;
+ border: 1px solid #e2e9ed;
+}
+.at-grid[data-column="1"] .at-column {
+ width: 100%;
+ max-width: 100%;
+ min-width: 100%;
+ flex-basis: 100%;
+}
+.at-grid[data-column="2"] .at-column {
+ width: 50%;
+ max-width: 50%;
+ min-width: 50%;
+ flex-basis: 50%;
+}
+.at-grid[data-column="3"] .at-column {
+ width: 33.3333333333%;
+ max-width: 33.3333333333%;
+ min-width: 33.3333333333%;
+ flex-basis: 33.3333333333%;
+}
+.at-grid[data-column="4"] .at-column {
+ width: 25%;
+ max-width: 25%;
+ min-width: 25%;
+ flex-basis: 25%;
+}
+.at-grid[data-column="5"] .at-column {
+ width: 20%;
+ max-width: 20%;
+ min-width: 20%;
+ flex-basis: 20%;
+}
+.at-grid[data-column="6"] .at-column {
+ width: 16.6666666667%;
+ max-width: 16.6666666667%;
+ min-width: 16.6666666667%;
+ flex-basis: 16.6666666667%;
+}
+.at-grid[data-column="7"] .at-column {
+ width: 14.2857142857%;
+ max-width: 14.2857142857%;
+ min-width: 14.2857142857%;
+ flex-basis: 14.2857142857%;
+}
+.at-grid[data-column="8"] .at-column {
+ width: 12.5%;
+ max-width: 12.5%;
+ min-width: 12.5%;
+ flex-basis: 12.5%;
+}
+.at-grid[data-column="9"] .at-column {
+ width: 11.1111111111%;
+ max-width: 11.1111111111%;
+ min-width: 11.1111111111%;
+ flex-basis: 11.1111111111%;
+}
+.at-column {
+ z-index: 0;
+ position: relative;
+ background: #fff;
+ box-shadow: 0 0 0 1px #e2e9ed;
+ padding: 10px;
+ box-sizing: border-box;
+ transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
+}
+.at-column:before {
+ content: "";
+ display: block;
+ padding-top: 100%;
+}
+
+.at-column .at-social {
+ margin: 16px 0 0;
+ opacity: 1;
+}
+@media (max-width: 800px) {
+ .at-column {
+ width: 50% !important;
+ max-width: 50% !important;
+ min-width: 50% !important;
+ flex-basis: 50% !important;
+ }
+}
+@media (max-width: 600px) {
+ .at-column {
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 100% !important;
+ flex-basis: 100% !important;
+ }
+}
+.at-user {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ transform: translate(0, -50%);
+ text-align: center;
+}
+.at-user__avatar {
+ width: 98px;
+ height: 98px;
+ border-radius: 100%;
+ margin: 0 auto 20px;
+ overflow: hidden;
+}
+.at-user__avatar img {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+}
+.at-user__name {
+ color: #313435;
+ font-family: "Roboto", sans-serif;
+ font-size: 1.5rem;
+ font-weight: 500;
+ line-height: 2.625rem;
+}
+.at-user__title {
+ color: #6f808a;
+ font-family: "Roboto", sans-serif;
+ font-size: 0.875rem;
+ line-height: 2.375rem;
+}
+.at-social {
+ margin: 0 0 -18px;
+ opacity: 0;
+ transition: margin 0.2s ease, opacity 0.2s ease;
+}
+.at-social__item {
+ display: inline-block;
+ margin: 0 10px;
+}
+.at-social__item a {
+ display: block;
+}
+.at-social__item svg {
+ fill: #515f65;
+ display: block;
+ height: 18px;
+ transition: fill 0.2s ease;
+}
+.at-social__item svg {
+ fill: #788d96;
+}
+
+.container {
+ max-width: 1170px;
+ width: 100%;
+ padding: 0 20px;
+ box-sizing: border-box;
+ transform-origin: top center;
+ transform: scale(0.8);
+}
diff --git a/index.html b/index.html
index 51a5a11..e8f18e4 100644
--- a/index.html
+++ b/index.html
@@ -28,14 +28,17 @@
html {
line-height: 1.15;
}
+
body {
margin: 0;
}
+
* {
box-sizing: border-box;
border-width: 0;
border-style: solid;
}
+
p,
li,
ul,
@@ -50,6 +53,7 @@
margin: 0;
padding: 0;
}
+
button,
input,
optgroup,
@@ -60,16 +64,19 @@
line-height: 1.15;
margin: 0;
}
+
button,
select {
text-transform: none;
}
+
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
+
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
@@ -77,22 +84,27 @@
border-style: none;
padding: 0;
}
+
button:-moz-focus,
[type="button"]:-moz-focus,
[type="reset"]:-moz-focus,
[type="submit"]:-moz-focus {
outline: 1px dotted ButtonText;
}
+
a {
color: inherit;
text-decoration: inherit;
}
+
input {
padding: 2px 4px;
}
+
img {
display: block;
}
+
html {
scroll-behavior: smooth;
}
@@ -127,9 +139,10 @@
/>
<link rel="stylesheet" href="./style.css" />
</head>
+
<body>
<div>
- <link href="./home.css" rel="stylesheet" />
+ <link href="./css/home.css" rel="stylesheet" />
<div class="home-container">
<header data-role="Header" class="nav-nav">
@@ -160,7 +173,7 @@
<span>BlissLabs</span>
</a>
<a
- href="https://blissroms.org/team.html"
+ href="team.html"
target="_blank"
rel="noreferrer noopener"
class="nav-link3 nav-link"
@@ -667,7 +680,7 @@
<div class="footer-contact">
<span class="footer-text3"><span>Links</span></span>
<a
- href="https://blissroms.org/team.html"
+ href="newteam.html"
target="_blank"
rel="noreferrer noopener"
class="footer-link08"
@@ -751,7 +764,11 @@
</footer>
</div>
</div>
- <script data-ad-client="ca-pub-7639560510014441" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+ <script
+ data-ad-client="ca-pub-7639560510014441"
+ async
+ src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
+ ></script>
<script>
function mobilemenu() {
if (document.getElementById("mobilemenu").style.display == "block") {
diff --git a/js/anim.js b/js/anim.js
new file mode 100644
index 0000000..5aaf564
--- /dev/null
+++ b/js/anim.js
@@ -0,0 +1,217 @@
+import * as PIXI from "https://cdn.skypack.dev/pixi.js";
+import { KawaseBlurFilter } from "https://cdn.skypack.dev/@pixi/filter-kawase-blur";
+import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@3.0.0";
+import hsl from "https://cdn.skypack.dev/hsl-to-hex";
+import debounce from "https://cdn.skypack.dev/debounce";
+
+// return a random number within a range
+function random(min, max) {
+ return Math.random() * (max - min) + min;
+}
+
+// map a number from 1 range to another
+function map(n, start1, end1, start2, end2) {
+ return ((n - start1) / (end1 - start1)) * (end2 - start2) + start2;
+}
+
+// Create a new simplex noise instance
+const simplex = new SimplexNoise();
+
+// ColorPalette class
+class ColorPalette {
+ constructor() {
+ this.setColors();
+ this.setCustomProperties();
+ }
+
+ setColors() {
+ // pick a random hue somewhere between 220 and 360
+ this.hue = ~~random(220, 360);
+ this.complimentaryHue1 = this.hue + 30;
+ this.complimentaryHue2 = this.hue + 60;
+ // define a fixed saturation and lightness
+ this.saturation = 95;
+ this.lightness = 50;
+
+ // define a base color
+ this.baseColor = hsl(this.hue, this.saturation, this.lightness);
+ // define a complimentary color, 30 degress away from the base
+ this.complimentaryColor1 = hsl(
+ this.complimentaryHue1,
+ this.saturation,
+ this.lightness
+ );
+ // define a second complimentary color, 60 degrees away from the base
+ this.complimentaryColor2 = hsl(
+ this.complimentaryHue2,
+ this.saturation,
+ this.lightness
+ );
+
+ // store the color choices in an array so that a random one can be picked later
+ this.colorChoices = [
+ this.baseColor,
+ this.complimentaryColor1,
+ this.complimentaryColor2,
+ ];
+ }
+
+ randomColor() {
+ // pick a random color
+ return this.colorChoices[~~random(0, this.colorChoices.length)].replace(
+ "#",
+ "0x"
+ );
+ }
+
+ setCustomProperties() {
+ // set CSS custom properties so that the colors defined here can be used throughout the UI
+ document.documentElement.style.setProperty("--hue", this.hue);
+ document.documentElement.style.setProperty(
+ "--hue-complimentary1",
+ this.complimentaryHue1
+ );
+ document.documentElement.style.setProperty(
+ "--hue-complimentary2",
+ this.complimentaryHue2
+ );
+ }
+}
+
+// Orb class
+class Orb {
+ // Pixi takes hex colors as hexidecimal literals (0x rather than a string with '#')
+ constructor(fill = 0x000000) {
+ // bounds = the area an orb is "allowed" to move within
+ this.bounds = this.setBounds();
+ // initialise the orb's { x, y } values to a random point within it's bounds
+ this.x = random(this.bounds["x"].min, this.bounds["x"].max);
+ this.y = random(this.bounds["y"].min, this.bounds["y"].max);
+
+ // how large the orb is vs it's original radius (this will modulate over time)
+ this.scale = 1;
+
+ // what color is the orb?
+ this.fill = fill;
+
+ // the original radius of the orb, set relative to window height
+ this.radius = random(window.innerHeight / 6, window.innerHeight / 3);
+
+ // starting points in "time" for the noise/self similar random values
+ this.xOff = random(0, 1000);
+ this.yOff = random(0, 1000);
+ // how quickly the noise/self similar random values step through time
+ this.inc = 0.002;
+
+ // PIXI.Graphics is used to draw 2d primitives (in this case a circle) to the canvas
+ this.graphics = new PIXI.Graphics();
+ this.graphics.alpha = 0.825;
+
+ // 250ms after the last window resize event, recalculate orb positions.
+ window.addEventListener(
+ "resize",
+ debounce(() => {
+ this.bounds = this.setBounds();
+ }, 250)
+ );
+ }
+
+ setBounds() {
+ // how far from the { x, y } origin can each orb move
+ const maxDist =
+ window.innerWidth < 1000 ? window.innerWidth / 3 : window.innerWidth / 5;
+ // the { x, y } origin for each orb (the bottom right of the screen)
+ const originX = window.innerWidth / 1.25;
+ const originY =
+ window.innerWidth < 1000
+ ? window.innerHeight
+ : window.innerHeight / 1.375;
+
+ // allow each orb to move x distance away from it's x / y origin
+ return {
+ x: {
+ min: originX - maxDist,
+ max: originX + maxDist,
+ },
+ y: {
+ min: originY - maxDist,
+ max: originY + maxDist,
+ },
+ };
+ }
+
+ update() {
+ // self similar "psuedo-random" or noise values at a given point in "time"
+ const xNoise = simplex.noise2D(this.xOff, this.xOff);
+ const yNoise = simplex.noise2D(this.yOff, this.yOff);
+ const scaleNoise = simplex.noise2D(this.xOff, this.yOff);
+
+ // map the xNoise/yNoise values (between -1 and 1) to a point within the orb's bounds
+ this.x = map(xNoise, -1, 1, this.bounds["x"].min, this.bounds["x"].max);
+ this.y = map(yNoise, -1, 1, this.bounds["y"].min, this.bounds["y"].max);
+ // map scaleNoise (between -1 and 1) to a scale value somewhere between half of the orb's original size, and 100% of it's original size
+ this.scale = map(scaleNoise, -1, 1, 0.5, 1);
+
+ // step through "time"
+ this.xOff += this.inc;
+ this.yOff += this.inc;
+ }
+
+ render() {
+ // update the PIXI.Graphics position and scale values
+ this.graphics.x = this.x;
+ this.graphics.y = this.y;
+ this.graphics.scale.set(this.scale);
+
+ // clear anything currently drawn to graphics
+ this.graphics.clear();
+
+ // tell graphics to fill any shapes drawn after this with the orb's fill color
+ this.graphics.beginFill(this.fill);
+ // draw a circle at { 0, 0 } with it's size set by this.radius
+ this.graphics.drawCircle(0, 0, this.radius);
+ // let graphics know we won't be filling in any more shapes
+ this.graphics.endFill();
+ }
+}
+
+// Create PixiJS app
+const app = new PIXI.Application({
+ // render to <canvas class="orb-canvas"></canvas>
+ view: document.querySelector(".orb-canvas"),
+ // auto adjust size to fit the current window
+ resizeTo: window,
+ // transparent background, we will be creating a gradient background later using CSS
+ transparent: true,
+});
+
+// Create colour palette
+const colorPalette = new ColorPalette();
+
+app.stage.filters = [new KawaseBlurFilter(30, 10, true)];
+
+// Create orbs
+const orbs = [];
+
+for (let i = 0; i < 10; i++) {
+ const orb = new Orb(colorPalette.randomColor());
+
+ app.stage.addChild(orb.graphics);
+
+ orbs.push(orb);
+}
+
+// Animate!
+if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+ app.ticker.add(() => {
+ orbs.forEach((orb) => {
+ orb.update();
+ orb.render();
+ });
+ });
+} else {
+ orbs.forEach((orb) => {
+ orb.update();
+ orb.render();
+ });
+}
diff --git a/js/members.js b/js/members.js
new file mode 100644
index 0000000..a9d3bcd
--- /dev/null
+++ b/js/members.js
@@ -0,0 +1,65 @@
+async function members() {
+ const idsdata = await fetch("https://api.blissroms.org/api/teambliss");
+ const data = await idsdata.json();
+ var container = ``;
+ for (var i = 0; i < data.length; i++) {
+ var usercard = `<div class="at-column"><div class="at-user">
+ <div class="at-user__avatar">
+ <img src="${data[i].avatar}" />
+ </div>
+ <div class="at-user__name">${data[i].member}</div>
+ <div class="at-user__title">${data[i].department}</div>
+ <ul class="at-social">
+ <li class="at-social__item">
+ <a href="">
+ <svg
+ viewBox="0 0 24 24"
+ width="18"
+ height="18"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M14 9h3l-.375 3H14v9h-3.89v-9H8V9h2.11V6.984c0-1.312.327-2.304.984-2.976C11.75 3.336 12.844 3 14.375 3H17v3h-1.594c-.594 0-.976.094-1.148.281-.172.188-.258.5-.258.938V9z"
+ fill-rule="evenodd"
+ ></path>
+ </svg>
+ </a>
+ </li>
+ <li class="at-social__item">
+ <a href="">
+ <svg
+ viewBox="0 0 24 24"
+ width="18"
+ height="18"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M20.875 7.5v.563c0 3.28-1.18 6.257-3.54 8.93C14.978 19.663 11.845 21 7.938 21c-2.5 0-4.812-.687-6.937-2.063.5.063.86.094 1.078.094 2.094 0 3.969-.656 5.625-1.968a4.563 4.563 0 0 1-2.625-.915 4.294 4.294 0 0 1-1.594-2.226c.375.062.657.094.844.094.313 0 .719-.063 1.219-.188-1.031-.219-1.899-.742-2.602-1.57a4.32 4.32 0 0 1-1.054-2.883c.687.328 1.375.516 2.062.516C2.61 9.016 1.938 7.75 1.938 6.094c0-.782.203-1.531.609-2.25 2.406 2.969 5.515 4.547 9.328 4.734-.063-.219-.094-.562-.094-1.031 0-1.281.438-2.36 1.313-3.234C13.969 3.437 15.047 3 16.328 3s2.375.484 3.281 1.453c.938-.156 1.907-.531 2.907-1.125-.313 1.094-.985 1.938-2.016 2.531.969-.093 1.844-.328 2.625-.703-.563.875-1.312 1.656-2.25 2.344z"
+ fill-rule="evenodd"
+ ></path>
+ </svg>
+ </a>
+ </li>
+ <li class="at-social__item">
+ <a href="">
+ <svg
+ viewBox="0 0 24 24"
+ width="18"
+ height="18"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M19.547 3c.406 0 .75.133 1.031.398.281.266.422.602.422 1.008v15.047c0 .406-.14.766-.422 1.078a1.335 1.335 0 0 1-1.031.469h-15c-.406 0-.766-.156-1.078-.469C3.156 20.22 3 19.86 3 19.453V4.406c0-.406.148-.742.445-1.008C3.742 3.133 4.11 3 4.547 3h15zM8.578 18V9.984H6V18h2.578zM7.36 8.766c.407 0 .743-.133 1.008-.399a1.31 1.31 0 0 0 .399-.96c0-.407-.125-.743-.375-1.009C8.14 6.133 7.813 6 7.406 6c-.406 0-.742.133-1.008.398C6.133 6.664 6 7 6 7.406c0 .375.125.696.375.961.25.266.578.399.984.399zM18 18v-4.688c0-1.156-.273-2.03-.82-2.624-.547-.594-1.258-.891-2.133-.891-.938 0-1.719.437-2.344 1.312V9.984h-2.578V18h2.578v-4.547c0-.312.031-.531.094-.656.25-.625.687-.938 1.312-.938.875 0 1.313.578 1.313 1.735V18H18z"
+ fill-rule="evenodd"
+ ></path>
+ </svg>
+ </a>
+ </li>
+ </ul>
+</div></div>`;
+ container += usercard;
+ }
+ document.getElementById("container").innerHTML = container;
+}
+members();
+console.log("hi");
diff --git a/main.js b/js/toggle.js
similarity index 95%
rename from main.js
rename to js/toggle.js
index ca9dc0f..6e71884 100644
--- a/main.js
+++ b/js/toggle.js
@@ -19,5 +19,5 @@
myMenu.style.display = "block";
}
}
-console.log("1");
+console.log("toggle");
// onclick = "toggleMenu()";
diff --git a/package.json b/package.json
index f78ed5b..d1edb84 100644
--- a/package.json
+++ b/package.json
@@ -6,5 +6,6 @@
"parcel-bundler": "^1.6.1"
},
"scripts": {},
- "devDependencies": {}
+ "devDependencies": {},
+ "type": "module"
}
\ No newline at end of file
diff --git a/public/playground_assets/nav_logo.svg b/public/playground_assets/nav_logo.svg
new file mode 100644
index 0000000..940438a
--- /dev/null
+++ b/public/playground_assets/nav_logo.svg
@@ -0,0 +1,19 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0001 47.8318C17.4236 43.3602 17.7055 37.4912 24.0001 34.0444C30.9525 37.8639 29.825 43.7329 24.0001 47.8318Z" fill="white"/>
+<path d="M24 47.8318L23.9537 47.8987L24.0008 47.9306L24.0473 47.8979L24 47.8318ZM24 34.0444L24.0396 33.9736L24.0001 33.9518L23.9604 33.9734L24 34.0444ZM24.0462 47.7648C20.77 45.5374 19.2203 42.9743 19.255 40.555C19.2897 38.1372 20.9075 35.8305 24.0395 34.1155L23.9604 33.9734C20.7977 35.7052 19.1271 38.0564 19.0914 40.5527C19.0557 43.0473 20.6532 45.6546 23.9537 47.8987L24.0462 47.7648ZM23.9603 34.1154C27.4197 36.0159 28.8484 38.4132 28.7098 40.8286C28.5709 43.2509 26.8549 45.7233 23.9526 47.7656L24.0473 47.8979C26.97 45.8413 28.7303 43.3296 28.8732 40.838C29.0165 38.3394 27.5327 35.8925 24.0396 33.9736L23.9603 34.1154Z" fill="white"/>
+<path d="M41.2372 41.0299C42.6988 33.2568 38.3141 29.3046 31.4051 31.2807C29.2128 38.8561 34.1953 42.2155 41.2372 41.0299Z" fill="white"/>
+<path d="M41.237 41.0298L41.3174 41.0447L41.3069 41.1003L41.2508 41.1097L41.237 41.0298ZM31.4049 31.2807L31.3262 31.2583L31.3386 31.2151L31.3821 31.2027L31.4049 31.2807ZM41.1565 41.015C41.8846 37.1428 41.1527 34.244 39.4029 32.5575C37.6542 30.8722 34.8653 30.3753 31.4275 31.3586L31.3821 31.2027C34.8535 30.2098 37.7114 30.7012 39.5169 32.4412C41.3213 34.18 42.0509 37.1439 41.3174 41.0447L41.1565 41.015ZM31.4834 31.303C30.3927 35.0723 31.0921 37.7692 32.9125 39.3801C34.7382 40.9955 37.7146 41.5405 41.2233 40.9498L41.2508 41.1097C37.7174 41.7047 34.6816 41.1629 32.8036 39.5011C30.9204 37.8349 30.2247 35.0643 31.3262 31.2583L31.4834 31.303Z" fill="white"/>
+<path d="M7.13881 41.0299C5.67727 33.2568 10.0619 29.3046 16.9709 31.2807C19.1633 38.8561 14.1808 42.2155 7.13881 41.0299Z" fill="white"/>
+<path d="M7.13901 41.0299L7.05859 41.0448L7.06904 41.1003L7.12532 41.1098L7.13901 41.0299ZM16.9711 31.2808L17.0498 31.2583L17.0374 31.2152L16.9939 31.2027L16.9711 31.2808ZM7.21944 41.015C6.49138 37.1428 7.22327 34.244 8.97313 32.5576C10.7218 30.8723 13.5108 30.3754 16.9485 31.3586L16.9939 31.2027C13.5225 30.2099 10.6646 30.7012 8.85909 32.4413C7.05474 34.1801 6.32511 37.1439 7.05859 41.0448L7.21944 41.015ZM16.8926 31.3031C17.9834 35.0724 17.284 37.7693 15.4635 39.3802C13.6379 40.9956 10.6614 41.5406 7.15272 40.9499L7.12532 41.1098C10.6586 41.7047 13.6945 41.1629 15.5725 39.5012C17.4555 37.835 18.1514 35.0644 17.0498 31.2583L16.8926 31.3031Z" fill="white"/>
+<path d="M47.8638 23.8967C43.3542 30.4178 37.4353 30.1383 33.959 23.8967C37.8111 17.0031 43.73 18.121 47.8638 23.8967Z" fill="white"/>
+<path d="M47.864 23.8967L47.9315 23.9425L47.9638 23.8959L47.9307 23.8498L47.864 23.8967ZM33.9591 23.8967L33.8877 23.8574L33.8657 23.8967L33.8875 23.9359L33.9591 23.8967ZM47.7965 23.8509C45.55 27.0993 42.9651 28.636 40.5252 28.6015C38.0869 28.5672 35.7605 26.9632 34.0309 23.8575L33.8875 23.9359C35.6341 27.0719 38.0053 28.7283 40.5229 28.7638C43.0388 28.7993 45.6683 27.2152 47.9315 23.9425L47.7965 23.8509ZM34.0307 23.936C35.9475 20.506 38.3652 19.0893 40.8013 19.2266C43.2443 19.3644 45.7375 21.0659 47.7973 23.9436L47.9307 23.8498C45.8566 20.9518 43.3235 19.2064 40.8106 19.0647C38.2907 18.9225 35.823 20.3939 33.8877 23.8574L34.0307 23.936Z" fill="white"/>
+<path d="M0.13623 23.8967C4.6459 30.4178 10.5648 30.1383 14.0411 23.8967C10.189 17.0031 4.2701 18.121 0.13623 23.8967Z" fill="white"/>
+<path d="M0.136379 23.8967L0.0689008 23.9425L0.0366211 23.8959L0.0696553 23.8498L0.136379 23.8967ZM14.0412 23.8967L14.1127 23.8574L14.1346 23.8967L14.1128 23.9359L14.0412 23.8967ZM0.203857 23.8509C2.45035 27.0993 5.03517 28.636 7.47517 28.6015C9.91354 28.5672 12.2399 26.9632 13.9695 23.8575L14.1128 23.9359C12.3662 27.0719 9.99503 28.7283 7.47749 28.7638C4.96154 28.7993 2.33208 27.2152 0.0689008 23.9425L0.203857 23.8509ZM13.9696 23.936C12.0529 20.506 9.6352 19.0893 7.19911 19.2266C4.75617 19.3644 2.26281 21.0659 0.203101 23.9436L0.0696553 23.8498C2.1438 20.9518 4.67684 19.2064 7.18983 19.0647C9.70968 18.9225 12.1774 20.3939 14.1127 23.8574L13.9696 23.936Z" fill="white"/>
+<path d="M41.1918 6.93697C33.3527 5.48779 29.3667 9.83534 31.3596 16.686C38.9995 18.8598 42.3876 13.9194 41.1918 6.93697Z" fill="white"/>
+<path d="M41.1915 6.93697L41.2065 6.85722L41.2625 6.86759L41.2721 6.9234L41.1915 6.93697ZM31.3593 16.686L31.3368 16.764L31.2933 16.7517L31.2807 16.7086L31.3593 16.686ZM41.1765 7.01673C37.2714 6.29481 34.3478 7.02053 32.6469 8.7556C30.9473 10.4895 30.4463 13.2549 31.4379 16.6636L31.2807 16.7086C30.2794 13.2665 30.7748 10.4327 32.5297 8.64251C34.2834 6.85343 37.2724 6.12995 41.2065 6.85722L41.1765 7.01673ZM31.3819 16.6081C35.1833 17.6897 37.9031 16.9962 39.5277 15.1911C41.1568 13.3809 41.7067 10.4296 41.1108 6.95056L41.2721 6.9234C41.8721 10.4268 41.3257 13.437 39.6498 15.2991C37.9694 17.1664 35.1753 17.8563 31.3368 16.764L31.3819 16.6081Z" fill="white"/>
+<path d="M6.99642 6.93697C14.8356 5.48779 18.8216 9.83534 16.8286 16.686C9.18874 18.8598 5.80062 13.9194 6.99642 6.93697Z" fill="white"/>
+<path d="M6.99616 6.93697L6.98116 6.85722L6.92506 6.86759L6.9155 6.9234L6.99616 6.93697ZM16.8284 16.686L16.8509 16.764L16.8944 16.7517L16.9069 16.7086L16.8284 16.686ZM7.01116 7.01673C10.9162 6.29481 13.8398 7.02053 15.5407 8.7556C17.2403 10.4895 17.7413 13.2549 16.7497 16.6636L16.9069 16.7086C17.9082 13.2665 17.4128 10.4327 15.658 8.64251C13.9042 6.85343 10.9152 6.12995 6.98116 6.85722L7.01116 7.01673ZM16.8057 16.6081C13.0044 17.6897 10.2845 16.9962 8.65992 15.1911C7.03074 13.3809 6.48102 10.4296 7.07682 6.95056L6.9155 6.9234C6.31551 10.4268 6.86194 13.437 8.53783 15.2991C10.2183 17.1664 13.0124 17.8563 16.8509 16.764L16.8057 16.6081Z" fill="white"/>
+<path d="M23.9151 0.135193C30.4916 4.60675 30.2098 10.4757 23.9151 13.9225C16.9627 10.103 18.09 4.23412 23.9151 0.135193Z" fill="white"/>
+<path d="M23.9154 0.13523L23.9616 0.0683229L23.9146 0.0363159L23.8681 0.069071L23.9154 0.13523ZM23.9154 13.9226L23.8757 13.9934L23.9152 14.0152L23.9549 13.9936L23.9154 13.9226ZM23.8692 0.202138C27.1453 2.42964 28.6951 4.99263 28.6603 7.412C28.6257 9.82977 27.0078 12.1365 23.8758 13.8515L23.9549 13.9936C27.1176 12.2617 28.7882 9.91057 28.8239 7.4143C28.8597 4.91961 27.2622 2.31238 23.9616 0.0683229L23.8692 0.202138ZM23.9551 13.8516C20.4957 11.9511 19.067 9.55378 19.2055 7.13828C19.3445 4.71599 21.0605 2.24369 23.9627 0.201389L23.8681 0.069071C20.9454 2.12569 19.1851 4.63732 19.0422 7.12907C18.8988 9.62763 20.3826 12.0745 23.8757 13.9934L23.9551 13.8516Z" fill="white"/>
+<path d="M19.678 22.1203L17.2354 23.7972L19.678 25.4741L19.1144 28.4551L22.1209 27.8961L23.9998 30.3182L25.8789 27.8961L28.6974 28.4551L28.1337 25.4741L30.5765 23.7972L28.1337 21.934L28.6974 19.1393L25.691 19.6983L23.9998 17.2762L22.0269 19.6983L19.1144 19.1393L19.678 22.1203Z" fill="white" stroke="white" stroke-width="1.2"/>
+</svg>
diff --git a/public/playground_assets/teamwork-600w.png b/public/playground_assets/teamwork-600w.png
new file mode 100644
index 0000000..daf7e44
--- /dev/null
+++ b/public/playground_assets/teamwork-600w.png
Binary files differ
diff --git a/style.css b/style.css
index 3fac28d..3a33770 100644
--- a/style.css
+++ b/style.css
@@ -1,25 +1,25 @@
:root {
--dl-color-gray-500: #595959;
--dl-color-gray-700: #999999;
- --dl-color-gray-900: #D9D9D9;
+ --dl-color-gray-900: #d9d9d9;
--dl-size-size-large: 144px;
--dl-size-size-small: 48px;
- --dl-color-danger-300: #A22020;
- --dl-color-danger-500: #BF2626;
- --dl-color-danger-700: #E14747;
+ --dl-color-danger-300: #a22020;
+ --dl-color-danger-500: #bf2626;
+ --dl-color-danger-700: #e14747;
--dl-color-gray-black: #000000;
- --dl-color-gray-white: #FFFFFF;
+ --dl-color-gray-white: #ffffff;
--dl-size-size-medium: 96px;
--dl-size-size-xlarge: 192px;
--dl-size-size-xsmall: 16px;
--dl-space-space-unit: 16px;
- --dl-color-primary-100: #003EB3;
- --dl-color-primary-300: #0074F0;
- --dl-color-primary-500: #14A9FF;
- --dl-color-primary-700: #85DCFF;
+ --dl-color-primary-100: #003eb3;
+ --dl-color-primary-300: #0074f0;
+ --dl-color-primary-500: #14a9ff;
+ --dl-color-primary-700: #85dcff;
--dl-color-success-300: #199033;
- --dl-color-success-500: #32A94C;
- --dl-color-success-700: #4CC366;
+ --dl-color-success-500: #32a94c;
+ --dl-color-success-700: #4cc366;
--dl-size-size-xxlarge: 288px;
--dl-size-size-maxwidth: 1400px;
--dl-color-bliss-primary: #0000ffff;
@@ -96,11 +96,11 @@
max-width: 280px;
transition: 0.3s;
align-items: flex-start;
- border-color: #98BDF9;
+ border-color: #98bdf9;
border-width: 1.6px;
border-radius: 16px;
flex-direction: column;
- background-color: #C5DBFD;
+ background-color: #c5dbfd;
}
.feature-card:hover {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
@@ -138,7 +138,7 @@
padding-right: 0px;
flex-direction: row;
justify-content: center;
- background-color: #95F9C3;
+ background-color: #95f9c3;
border-top-left-radius: 32px;
border-top-right-radius: 32px;
border-bottom-left-radius: 0;
@@ -162,7 +162,7 @@
text-decoration: none;
}
-@media(max-width: 767px) {
+@media (max-width: 767px) {
.nav-link {
margin-bottom: var(--dl-space-space-unit);
}
@@ -172,10 +172,392 @@
justify-content: center;
}
}
-@media(max-width: 479px) {
+@media (max-width: 479px) {
.teleport-menu-mobile {
height: auto;
display: none;
padding: 16px;
}
}
+:root {
+ --dl-color-gray-500: #595959;
+ --dl-color-gray-700: #999999;
+ --dl-color-gray-900: #d9d9d9;
+ --dl-size-size-large: 144px;
+ --dl-size-size-small: 48px;
+ --dl-color-danger-300: #a22020;
+ --dl-color-danger-500: #bf2626;
+ --dl-color-danger-700: #e14747;
+ --dl-color-gray-black: #000000;
+ --dl-color-gray-white: #ffffff;
+ --dl-size-size-medium: 96px;
+ --dl-size-size-xlarge: 192px;
+ --dl-size-size-xsmall: 16px;
+ --dl-space-space-unit: 16px;
+ --dl-color-primary-100: #003eb3;
+ --dl-color-primary-300: #0074f0;
+ --dl-color-primary-500: #14a9ff;
+ --dl-color-primary-700: #85dcff;
+ --dl-color-success-300: #199033;
+ --dl-color-success-500: #32a94c;
+ --dl-color-success-700: #4cc366;
+ --dl-size-size-xxlarge: 288px;
+ --dl-size-size-maxwidth: 1400px;
+ --dl-radius-radius-round: 50%;
+ --dl-space-space-halfunit: 8px;
+ --dl-space-space-sixunits: 96px;
+ --dl-space-space-twounits: 32px;
+ --dl-radius-radius-radius2: 2px;
+ --dl-radius-radius-radius4: 4px;
+ --dl-radius-radius-radius8: 8px;
+ --dl-space-space-fiveunits: 80px;
+ --dl-space-space-fourunits: 64px;
+ --dl-space-space-threeunits: 48px;
+ --dl-space-space-oneandhalfunits: 24px;
+}
+.teleport-show {
+ display: flex !important;
+}
+.list {
+ width: 100%;
+ margin: 1em 0px 1em 0px;
+ display: block;
+ padding: 0px 0px 0px 1.5rem;
+ list-style-type: none;
+ list-style-position: outside;
+}
+.list-item {
+ display: list-item;
+}
+.button {
+ color: var(--dl-color-gray-black);
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-color: var(--dl-color-gray-black);
+ border-width: 1px;
+ border-radius: 500px;
+ background-color: var(--dl-color-gray-white);
+}
+
+.input {
+ color: var(--dl-color-gray-black);
+ cursor: auto;
+ padding: 0.5rem 1rem;
+ border-color: var(--dl-color-gray-black);
+ border-width: 1px;
+ border-radius: 4px;
+ background-color: var(--dl-color-gray-white);
+}
+.textarea {
+ color: var(--dl-color-gray-black);
+ cursor: auto;
+ padding: 0.5rem;
+ border-color: var(--dl-color-gray-black);
+ border-width: 1px;
+ border-radius: 4px;
+ background-color: var(--dl-color-gray-white);
+}
+
+.Nav_bar {
+ top: 0%;
+ width: auto;
+ display: flex;
+ z-index: 1;
+ position: fixed;
+ max-width: var(--dl-size-size-maxwidth);
+ align-items: center;
+ padding-top: var(--dl-space-space-unit);
+ padding-left: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
+ padding-bottom: var(--dl-space-space-unit);
+ backdrop-filter: blur(2px);
+ -webkit-backdrop-filter: blur(8px);
+ justify-content: space-between;
+}
+.nav_element {
+ color: var(--dl-color-gray-white);
+ cursor: pointer;
+ transition: 0.3s;
+}
+.nav_element:hover {
+ color: var(--dl-color-primary-500);
+}
+.Footer_link {
+ color: var(--dl-color-gray-900);
+ cursor: pointer;
+ transition: 0.3s;
+ margin-bottom: var(--dl-space-space-unit);
+}
+.Footer_link:hover {
+ color: var(--dl-color-primary-500);
+}
+.icons {
+ fill: #d9d9d9;
+ width: 24px;
+ cursor: pointer;
+ height: 24px;
+ transition: 0.3s;
+ margin-right: var(--dl-space-space-unit);
+ text-decoration: none;
+}
+.icons:hover {
+ fill: var(--dl-color-primary-500);
+}
+.mid-element-initial {
+ width: 200px;
+ height: 300px;
+ display: flex;
+ min-width: 200px;
+ transform: translateX(100%);
+ object-fit: cover;
+ transition: 0.3s;
+ border-radius: var(--dl-radius-radius-radius8);
+ background-size: cover;
+ background-image: url("https://images.unsplash.com/photo-1638176373124-28142ef16c5b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE0fHx8fHx8Mnx8MTYzODE5NzE5OA&ixlib=rb-1.2.1&h=500");
+ background-position: center;
+}
+.left-element-initial {
+ width: 200px;
+ height: 300px;
+ margin: 0;
+ display: flex;
+ min-width: 300px;
+ transform: translateX(100%);
+ min-height: 500px;
+ object-fit: cover;
+ transition: 0.3s;
+ margin-left: var(--dl-space-space-twounits);
+ margin-right: var(--dl-space-space-twounits);
+ border-radius: var(--dl-radius-radius-radius8);
+ background-size: cover;
+ background-image: url("https://images.unsplash.com/photo-1638165212454-d92d3050351b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE5fHx8fHx8Mnx8MTYzODE5ODA2Mg&ixlib=rb-1.2.1&h=300");
+ background-position: center;
+}
+.right-element-initial {
+ width: 200px;
+ height: 300px;
+ margin: 0;
+ display: flex;
+ min-width: 200px;
+ transform: translateX(125%);
+ object-fit: cover;
+ margin-left: var(--dl-space-space-twounits);
+ margin-right: var(--dl-space-space-twounits);
+ border-radius: var(--dl-radius-radius-radius8);
+ background-size: cover;
+ background-image: url("https://images.unsplash.com/photo-1638165212454-d92d3050351b?ixid=Mnw5MTMyMXwwfDF8YWxsfDE5fHx8fHx8Mnx8MTYzODE5ODA2Mg&ixlib=rb-1.2.1&h=300");
+ background-position: center;
+}
+.mid-element {
+ order: 2;
+ min-width: 300px !important;
+ transform: translateX(0) !important;
+ min-height: 500px !important;
+}
+.left-element {
+ order: 1;
+ min-width: 200px !important;
+ transform: translateX(0) !important;
+ min-height: 300px !important;
+ margin-left: var(--dl-space-space-twounits);
+ margin-right: var(--dl-space-space-twounits);
+}
+.right-element {
+ order: 3;
+ transform: translateX(0) !important;
+ margin-left: var(--dl-space-space-twounits);
+ margin-right: var(--dl-space-space-twounits);
+}
+.hidden-element {
+ display: none !important;
+}
+.join {
+ text-align: center;
+ border-width: 0px;
+ padding-left: var(--dl-space-space-twounits);
+ border-radius: var(--dl-radius-radius-radius8);
+ padding-right: var(--dl-space-space-twounits);
+ -backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgba(17, 25, 40, 0.75);
+ -background-color: rgba(17, 25, 40, 0.75);
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+.navbar-fixed {
+ width: 100%;
+ max-width: 100%;
+ align-items: center;
+ padding-top: var(--dl-space-space-halfunit);
+ padding-left: var(--dl-space-space-threeunits);
+ padding-right: var(--dl-space-space-threeunits);
+ padding-bottom: var(--dl-space-space-halfunit);
+ justify-content: space-between;
+}
+.mb-12 {
+ margin-bottom: 12px;
+}
+
+.teleport-menu-mobile {
+ transform: translateX(100%);
+}
+
+.h3-36 {
+ font-size: 36px;
+ font-style: normal;
+ font-family: Poppins;
+ font-weight: 500;
+ line-height: 1.15;
+ text-transform: none;
+ text-decoration: none;
+}
+.h1-96 {
+ font-size: 96px;
+ font-family: Poppins;
+ font-weight: 300;
+ letter-spacing: -1.5%;
+ text-transform: none;
+ text-decoration: none;
+}
+.h3-48 {
+ font-size: 48px;
+ font-family: Poppins;
+ font-weight: 400;
+ text-transform: none;
+ text-decoration: none;
+}
+.heading {
+ font-size: 32px;
+ font-family: Inter;
+ font-weight: 700;
+ line-height: 1.15;
+ text-transform: none;
+ text-decoration: none;
+}
+.subtitle-14 {
+ font-size: 14px;
+ font-family: Arial;
+ font-weight: 500;
+ text-transform: none;
+ text-decoration: none;
+}
+.h5-24 {
+ font-size: 24px;
+ font-family: Poppins;
+ font-weight: 500;
+ text-transform: none;
+ text-decoration: none;
+}
+.h2-60 {
+ font-size: 60px;
+ font-family: Poppins;
+ font-weight: 300;
+ letter-spacing: -0.5%;
+ text-transform: none;
+ text-decoration: none;
+}
+.footer-Text-Style {
+ font-size: 16px;
+ font-family: Inter;
+ font-weight: 700;
+ line-height: 1.15;
+ text-transform: none;
+ text-decoration: none;
+}
+.h6-20 {
+ font-size: 20px;
+ font-family: Arial;
+ font-weight: 500;
+ text-transform: none;
+ text-decoration: none;
+}
+.caption {
+ font-size: 14px;
+ font-family: Poppins;
+ font-weight: 400;
+ text-transform: none;
+ text-decoration: none;
+}
+.body-16 {
+ font-size: 16px;
+ font-family: Arial;
+ font-weight: 500;
+ text-transform: none;
+ text-decoration: none;
+}
+.subtitle-16 {
+ font-size: 16px;
+ font-family: Poppins;
+ font-weight: 500;
+ text-transform: none;
+ text-decoration: none;
+}
+.content {
+ font-size: 16px;
+ font-family: Inter;
+ font-weight: 400;
+ line-height: 1.15;
+ text-transform: none;
+ text-decoration: none;
+}
+.h4-28 {
+ font-size: 28px;
+ font-family: Poppins;
+ font-weight: 400;
+ letter-spacing: 0.25%;
+ text-transform: none;
+ text-decoration: none;
+}
+.body-12 {
+ font-size: 12px;
+ font-family: Poppins;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: 0.25%;
+ text-transform: none;
+ text-decoration: none;
+}
+.button-14 {
+ font-size: 14px;
+ font-family: Poppins;
+ font-weight: 500;
+ letter-spacing: 1.25%;
+ text-transform: none;
+ text-decoration: none;
+}
+@media (max-width: 991px) {
+ .icons {
+ fill: var(--dl-color-gray-white);
+ color: var(--dl-color-primary-700);
+ }
+ .teleport-menu-mobile {
+ height: 100vh;
+ display: flex;
+ transition: 0.5s;
+ }
+ .teleport-menu-show {
+ display: flex !important;
+ transform: translateX(0);
+ }
+}
+@media (max-width: 767px) {
+ .Nav_bar {
+ padding-left: var(--dl-space-space-twounits);
+ padding-right: var(--dl-space-space-twounits);
+ }
+}
+@media (max-width: 479px) {
+ .Nav_bar {
+ padding: var(--dl-space-space-unit);
+ }
+ .icons {
+ fill: var(--dl-color-gray-white);
+ }
+ .join {
+ margin-top: var(--dl-space-space-unit);
+ margin-bottom: var(--dl-space-space-unit);
+ }
+ .navbar-fixed {
+ width: 100%;
+ padding-left: var(--dl-space-space-oneandhalfunits);
+ padding-right: var(--dl-space-space-oneandhalfunits);
+ }
+}
diff --git a/team.html b/team.html
new file mode 100644
index 0000000..2f83c5b
--- /dev/null
+++ b/team.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>BlissTeam</title>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="./css/newteams.css" />
+ <link rel="stylesheet" href="./css/team-sec.css" />
+ <link rel="stylesheet" href="style.css" />
+ <link rel="stylesheet" href="./css/home.css" />
+ <script src="./js/members.js"></script>
+ <script src="./js/toggle.js"></script>
+ <script type="module" src="./js/anim.js"></script>
+ </head>
+
+ <body>
+ <!-- navbar -->
+ <header class="header z-999">
+ <div class="container">
+ <div class="row align-items-center justify-content-between">
+ <div class="logo">
+ <a href="https://blissroms.org"
+ ><img
+ src="public/playground_assets/Bliss-logo.svg"
+ alt="Logo"
+ srcset=""
+ /></a>
+ </div>
+ <input type="checkbox" id="nav-check" />
+ <label for="nav-check" class="nav-toggler">
+ <span></span>
+ </label>
+ <nav class="nav">
+ <ul>
+ <li><a href="#" class="active">Teams</a></li>
+ <li><a href="#">Gear</a></li>
+ <li><a href="#">Blog</a></li>
+ <li><a href="https://blissroms.org">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </header>
+ <!-- herosection -->
+ <div class="hero">
+ <h1 class="hero-h1">Meet the <span>Developer Team</span></h1>
+ <h3 class="hero-h3">
+ Our development team is a group of people that work together to create
+ the blissful experience for you.
+ </h3>
+ <div class="container_mouse">
+ <span class="mouse-btn">
+ <span class="mouse-scroll"></span>
+ </span>
+ <p style="font-size: 0.8rem">scroll down</p>
+ </div>
+ </div>
+
+ <canvas class="orb-canvas"></canvas>
+
+ <!-- Teamsection -->
+ <div class="container">
+ <div class="at-section">
+ <div class="at-section__title">The Team</div>
+ </div>
+ <div class="at-grid" data-column="3" id="container"></div>
+ </div>
+
+ <!-- Footer -->
+
+ <footer class="footer-footer">
+ <div class="footer-container">
+ <div class="footer-logo">
+ <img
+ alt="logo"
+ src="public/playground_assets/bliss-logo.svg"
+ class="footer-image"
+ />
+ <span class="footer-text">
+ <span>
+ An open-source operating system based on Android with
+ customizations, options and added security features.
+ </span>
+ </span>
+ </div>
+ <div class="footer-links-container">
+ <div class="footer-container1">
+ <div class="footer-product-container">
+ <span class="footer-text1"><span>Community</span></span>
+ <a
+ href="https://t.me/Team_Bliss_Community"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link"
+ >
+ <span>BlissRoms Telegram</span>
+ </a>
+ <a
+ href="https://t.me/blissx86"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link01"
+ >
+ <span>Bliss OS Telegram</span>
+ </a>
+ <a
+ href="https://discord.com/invite/wwc4Aua4fp"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link02"
+ >
+ <span>Bliss Discord</span>
+ </a>
+ </div>
+ <div class="footer-company-container">
+ <span class="footer-text2"><span>Sources</span></span>
+ <a
+ href="https://review.blissroms.org/q/status:open+-is:wip"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link03"
+ >
+ <span>BlissRoms Gerrit Review</span>
+ </a>
+ <a
+ href="https://github.com/BlissRoms"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link04"
+ >
+ <span>BlissRoms GitHub</span>
+ </a>
+ <a
+ href="https://github.com/BlissRoms-Devices"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link05"
+ >
+ <span>BlissRoms-Devices GitHub</span>
+ </a>
+ <a
+ href="https://github.com/BlissRoms-x86"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link06"
+ >
+ <span>Bliss OS GitHub</span>
+ </a>
+ <a
+ href="https://github.com/BlissRoms-pine64"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link07"
+ >
+ <span>BlissRoms-PINE64 GitHub</span>
+ </a>
+ </div>
+ </div>
+ <div class="footer-container2">
+ <div class="footer-contact">
+ <span class="footer-text3"><span>Links</span></span>
+ <a
+ href="newteam.html"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link08"
+ >
+ <span>Team members</span>
+ </a>
+ <a
+ href="https://status.blissroms.org"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link09"
+ >
+ <span>Status</span>
+ </a>
+ <a
+ href="https://blog.blissroms.org/"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link10"
+ >
+ <span>Blog</span>
+ </a>
+ </div>
+ <div class="footer-socials">
+ <span class="footer-text4"><span>Follow Us</span></span>
+ <div class="footer-icon-group">
+ <a
+ href="https://twitter.com/bliss_roms"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link11"
+ >
+ <svg viewBox="0 0 950.8571428571428 1024" class="footer-icon">
+ <path
+ d="M925.714 233.143c-25.143 36.571-56.571 69.143-92.571 95.429 0.571 8 0.571 16 0.571 24 0 244-185.714 525.143-525.143 525.143-104.571 0-201.714-30.286-283.429-82.857 14.857 1.714 29.143 2.286 44.571 2.286 86.286 0 165.714-29.143 229.143-78.857-81.143-1.714-149.143-54.857-172.571-128 11.429 1.714 22.857 2.857 34.857 2.857 16.571 0 33.143-2.286 48.571-6.286-84.571-17.143-148-91.429-148-181.143v-2.286c24.571 13.714 53.143 22.286 83.429 23.429-49.714-33.143-82.286-89.714-82.286-153.714 0-34.286 9.143-65.714 25.143-93.143 90.857 112 227.429 185.143 380.571 193.143-2.857-13.714-4.571-28-4.571-42.286 0-101.714 82.286-184.571 184.571-184.571 53.143 0 101.143 22.286 134.857 58.286 41.714-8 81.714-23.429 117.143-44.571-13.714 42.857-42.857 78.857-81.143 101.714 37.143-4 73.143-14.286 106.286-28.571z"
+ ></path>
+ </svg>
+ </a>
+ <a
+ href="https://www.instagram.com/blissroms"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link12"
+ >
+ <svg
+ viewBox="0 0 877.7142857142857 1024"
+ class="footer-icon2"
+ >
+ <path
+ d="M585.143 512c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286 65.714 146.286 146.286 146.286 146.286-65.714 146.286-146.286zM664 512c0 124.571-100.571 225.143-225.143 225.143s-225.143-100.571-225.143-225.143 100.571-225.143 225.143-225.143 225.143 100.571 225.143 225.143zM725.714 277.714c0 29.143-23.429 52.571-52.571 52.571s-52.571-23.429-52.571-52.571 23.429-52.571 52.571-52.571 52.571 23.429 52.571 52.571zM438.857 152c-64 0-201.143-5.143-258.857 17.714-20 8-34.857 17.714-50.286 33.143s-25.143 30.286-33.143 50.286c-22.857 57.714-17.714 194.857-17.714 258.857s-5.143 201.143 17.714 258.857c8 20 17.714 34.857 33.143 50.286s30.286 25.143 50.286 33.143c57.714 22.857 194.857 17.714 258.857 17.714s201.143 5.143 258.857-17.714c20-8 34.857-17.714 50.286-33.143s25.143-30.286 33.143-50.286c22.857-57.714 17.714-194.857 17.714-258.857s5.143-201.143-17.714-258.857c-8-20-17.714-34.857-33.143-50.286s-30.286-25.143-50.286-33.143c-57.714-22.857-194.857-17.714-258.857-17.714zM877.714 512c0 60.571 0.571 120.571-2.857 181.143-3.429 70.286-19.429 132.571-70.857 184s-113.714 67.429-184 70.857c-60.571 3.429-120.571 2.857-181.143 2.857s-120.571 0.571-181.143-2.857c-70.286-3.429-132.571-19.429-184-70.857s-67.429-113.714-70.857-184c-3.429-60.571-2.857-120.571-2.857-181.143s-0.571-120.571 2.857-181.143c3.429-70.286 19.429-132.571 70.857-184s113.714-67.429 184-70.857c60.571-3.429 120.571-2.857 181.143-2.857s120.571-0.571 181.143 2.857c70.286 3.429 132.571 19.429 184 70.857s67.429 113.714 70.857 184c3.429 60.571 2.857 120.571 2.857 181.143z"
+ ></path>
+ </svg>
+ </a>
+ <a
+ href="https://www.facebook.com/BlissROMs"
+ target="_blank"
+ rel="noreferrer noopener"
+ class="footer-link13"
+ >
+ <svg
+ viewBox="0 0 602.2582857142856 1024"
+ class="footer-icon4"
+ >
+ <path
+ d="M548 6.857v150.857h-89.714c-70.286 0-83.429 33.714-83.429 82.286v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571c0-144.571 88.571-223.429 217.714-223.429 61.714 0 114.857 4.571 130.286 6.857z"
+ ></path>
+ </svg>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="footer-separator"></div>
+ <span class="footer-text5">
+ <span>Copyright © 2022 BlissLabs. All rights reserved</span>
+ </span>
+ </footer>
+ </body>
+</html>
