Initial commit
This commit is contained in:
sairaj mote
commit
f150898554
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
BIN
assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg
Normal file
BIN
assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
assets/dmitry-demidko-z4VuRg-ZOEg-unsplash.jpg
Normal file
BIN
assets/dmitry-demidko-z4VuRg-ZOEg-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
3
assets/hex-trim.svg
Normal file
3
assets/hex-trim.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="114" height="128" viewBox="0 0 114 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M62.0001 3.41429L106.969 29.377C110.063 31.1633 111.969 34.4646 111.969 38.0373V89.9627C111.969 93.5354 110.063 96.8366 106.969 98.623L62.0001 124.586C58.9061 126.372 55.0941 126.372 52.0001 124.586L7.03136 98.623C3.93735 96.8366 2.03136 93.5354 2.03136 89.9627V38.0373C2.03136 34.4646 3.93735 31.1633 7.03136 29.377L52.0001 3.41429C55.0941 1.62796 58.9061 1.62796 62.0001 3.41429Z" stroke="#F8474D" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 535 B |
3
assets/hex.svg
Normal file
3
assets/hex.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="88" height="98" viewBox="0 0 88 98" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M38 2.4641C41.7128 0.320508 46.2872 0.320508 50 2.4641L81.3013 20.5359C85.0141 22.6795 87.3013 26.641 87.3013 30.9282V67.0718C87.3013 71.359 85.0141 75.3205 81.3013 77.4641L50 95.5359C46.2872 97.6795 41.7128 97.6795 38 95.5359L6.69873 77.4641C2.98592 75.3205 0.69873 71.359 0.69873 67.0718V30.9282C0.69873 26.641 2.98592 22.6795 6.69873 20.5359L38 2.4641Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 484 B |
4
assets/icon.svg
Normal file
4
assets/icon.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2031 8.37711L15.5937 2.76769L0.635254 17.7261L6.24467 23.3356L6.24477 23.3355L15.5939 32.6846L21.2033 27.0752L11.8542 17.726L21.2031 8.37711Z" fill="white"/>
|
||||
<rect x="17.4634" y="17.7261" width="12.1006" height="12.1006" transform="rotate(-45 17.4634 17.7261)" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
446
css/main.css
Normal file
446
css/main.css
Normal file
@ -0,0 +1,446 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #f8474d;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
body > * {
|
||||
padding: 0 max(1rem, 6vw);
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #ff696e;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: max(2rem, 4vw);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: max(1.8rem, 3vw);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: max(1.5rem, 2vw);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: max(1.2rem, 1.3vw);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
a:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
max-width: 70ch;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 3rem;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
.reveal {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.reveal span {
|
||||
opacity: 0;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
.move-in {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1rem;
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
}
|
||||
|
||||
#company_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
padding-left: max(1rem, 6vw);
|
||||
}
|
||||
|
||||
section {
|
||||
min-height: 80vh;
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.section-title::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 0.2rem;
|
||||
background-color: var(--accent-color);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.section-title h3 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.colored-section {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.fancy-border {
|
||||
position: relative;
|
||||
}
|
||||
.fancy-border::before, .fancy-border::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
left: 0;
|
||||
}
|
||||
.fancy-border--top::before {
|
||||
background: url("../assets/triangle-up.svg");
|
||||
bottom: calc(100% - 0.04rem);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
}
|
||||
.fancy-border--bottom::after {
|
||||
top: calc(100% - 0.04rem);
|
||||
background: url("../assets/triangle-down.svg");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
}
|
||||
|
||||
#hero_section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 5rem);
|
||||
background: linear-gradient(rgba(var(--foreground-color), 0), rgba(var(--foreground-color), 0.8)), url("../assets/dmitry-demidko-z4VuRg-ZOEg-unsplash.jpg") no-repeat center/cover fixed;
|
||||
}
|
||||
#hero_section h1 {
|
||||
margin-top: auto;
|
||||
}
|
||||
#hero_section p {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.team-member__image-container {
|
||||
display: grid;
|
||||
margin-bottom: 1.2rem;
|
||||
place-items: center;
|
||||
}
|
||||
.team-member__image-container > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
.team-member img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
aspect-ratio: 1/1;
|
||||
-webkit-mask: url("../assets/hex.svg") no-repeat center/contain;
|
||||
mask: url("../assets/hex.svg") no-repeat center/contain;
|
||||
}
|
||||
.team-member__name {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.team-member__title {
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.team-member__button {
|
||||
margin-top: auto;
|
||||
padding: 0.5rem 1rem;
|
||||
align-self: center;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.fancy-list {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.fancy-list__item {
|
||||
display: grid;
|
||||
max-width: 42rem;
|
||||
width: auto;
|
||||
gap: 1rem 2rem;
|
||||
grid-template-areas: "label title" "label description";
|
||||
padding-right: 0;
|
||||
--stamp-size: 3.5rem;
|
||||
}
|
||||
.fancy-list__item:not(:last-of-type) .fancy-list__item__label-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.1rem;
|
||||
height: calc(100% - var(--stamp-size) - 1rem);
|
||||
top: calc(var(--stamp-size) + 0.5rem);
|
||||
background-color: var(--accent-color);
|
||||
z-index: -1;
|
||||
}
|
||||
.fancy-list__item__label-wrapper {
|
||||
grid-area: label;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.fancy-list__item__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--stamp-size);
|
||||
width: var(--stamp-size);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
line-height: 1;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
background: url("../assets/hex.svg") no-repeat center/contain;
|
||||
}
|
||||
.fancy-list__item__title {
|
||||
grid-area: title;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.fancy-list__item__title:last-child {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.fancy-list__item__description {
|
||||
grid-area: description;
|
||||
}
|
||||
.fancy-list__item__description:last-child {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#person_bio {
|
||||
margin: auto;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-animation: popup 0.3s forwards;
|
||||
animation: popup 0.3s forwards;
|
||||
width: min(100%, 48rem);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#person_bio button {
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
border-radius: 5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
}
|
||||
|
||||
#person_bio_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem 1.5rem;
|
||||
grid-template-columns: min(16rem, 100%) 1fr;
|
||||
grid-template-areas: "image name" "image title" "image bio";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
|
||||
#person__image {
|
||||
grid-area: image;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 3/4;
|
||||
}
|
||||
|
||||
#person__name {
|
||||
grid-area: name;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
#person__title {
|
||||
grid-area: title;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#person__bio {
|
||||
grid-area: bio;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
line-height: 1.5;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
#poc_images .poc-wrapper:nth-of-type(5) {
|
||||
grid-area: 3/2/4/3;
|
||||
}
|
||||
#person_bio_wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "image" "name" "title" "bio";
|
||||
}
|
||||
#person__image {
|
||||
aspect-ratio: 1/1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hide-on-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
section {
|
||||
padding: 8vw 12vw;
|
||||
}
|
||||
#team_members {
|
||||
gap: 4vw;
|
||||
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
.interactive:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
@supports (overflow: overlay) {
|
||||
body {
|
||||
overflow: overlay;
|
||||
}
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
1
css/main.min.css
vendored
Normal file
1
css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
428
css/main.scss
Normal file
428
css/main.scss
Normal file
@ -0,0 +1,428 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #f8474d;
|
||||
--secondary-color: #ffac2e;
|
||||
--text-color: 20, 20, 20;
|
||||
--foreground-color: 252, 253, 255;
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: rgb(220, 165, 0);
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
& > * {
|
||||
padding: 0 max(1rem, 6vw);
|
||||
}
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
--accent-color: #ff696e;
|
||||
--secondary-color: #d60739;
|
||||
--text-color: 220, 220, 220;
|
||||
--foreground-color: 27, 28, 29;
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: rgb(255, 213, 5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: max(2rem, 4vw);
|
||||
}
|
||||
h2 {
|
||||
font-size: max(1.8rem, 3vw);
|
||||
}
|
||||
h3 {
|
||||
font-size: max(1.5rem, 2vw);
|
||||
}
|
||||
h4 {
|
||||
font-size: max(1.2rem, 1.3vw);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
max-width: 70ch;
|
||||
line-height: 1.5;
|
||||
}
|
||||
button,
|
||||
.button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 3rem;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
.reveal {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
span {
|
||||
opacity: 0;
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
}
|
||||
.move-in {
|
||||
opacity: 0;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(0.5rem);
|
||||
}
|
||||
#company_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
padding-left: max(1rem, 6vw);
|
||||
}
|
||||
section {
|
||||
min-height: 80vh;
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
.section-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.1;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 0.2rem;
|
||||
background-color: var(--accent-color);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
.colored-section {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.fancy-border {
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
left: 0;
|
||||
}
|
||||
&--top {
|
||||
&::before {
|
||||
background: url("../assets/triangle-up.svg");
|
||||
bottom: calc(100% - 0.04rem);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
&--bottom {
|
||||
&::after {
|
||||
top: calc(100% - 0.04rem);
|
||||
background: url("../assets/triangle-down.svg");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#hero_section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 5rem);
|
||||
background: linear-gradient(
|
||||
rgba(var(--foreground-color), 0),
|
||||
rgba(var(--foreground-color), 0.8)
|
||||
),
|
||||
url("../assets/dmitry-demidko-z4VuRg-ZOEg-unsplash.jpg") no-repeat center /
|
||||
cover fixed;
|
||||
h1 {
|
||||
margin-top: auto;
|
||||
}
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&__image-container {
|
||||
display: grid;
|
||||
margin-bottom: 1.2rem;
|
||||
place-items: center;
|
||||
& > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
object-position: center;
|
||||
aspect-ratio: 1/1;
|
||||
mask: url("../assets/hex.svg") no-repeat center / contain;
|
||||
}
|
||||
&__name {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
&__title {
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&__button {
|
||||
margin-top: auto;
|
||||
padding: 0.5rem 1rem;
|
||||
align-self: center;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-list {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
&__item {
|
||||
display: grid;
|
||||
max-width: 42rem;
|
||||
width: auto;
|
||||
gap: 1rem 2rem;
|
||||
grid-template-areas: "label title" "label description";
|
||||
padding-right: 0;
|
||||
--stamp-size: 3.5rem;
|
||||
&:not(:last-of-type) {
|
||||
.fancy-list__item__label-wrapper {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.1rem;
|
||||
height: calc(100% - var(--stamp-size) - 1rem);
|
||||
top: calc(var(--stamp-size) + 0.5rem);
|
||||
background-color: var(--accent-color);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__label-wrapper {
|
||||
grid-area: label;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
&__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--stamp-size);
|
||||
width: var(--stamp-size);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
line-height: 1;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
background: url("../assets/hex.svg") no-repeat center / contain;
|
||||
}
|
||||
&__title {
|
||||
grid-area: title;
|
||||
line-height: 1.4;
|
||||
&:last-child {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
grid-area: description;
|
||||
&:last-child {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#person_bio {
|
||||
margin: auto;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: max(1rem, 2vw);
|
||||
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
|
||||
animation: popup 0.3s forwards;
|
||||
width: min(100%, 48rem);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
button {
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
border-radius: 5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
backdrop-filter: blur(0.5rem);
|
||||
}
|
||||
}
|
||||
#person_bio_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem 1.5rem;
|
||||
grid-template-columns: min(16rem, 100%) 1fr;
|
||||
grid-template-areas: "image name" "image title" "image bio";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
#person__image {
|
||||
grid-area: image;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 3/4;
|
||||
}
|
||||
#person__name {
|
||||
grid-area: name;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
#person__title {
|
||||
grid-area: title;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#person__bio {
|
||||
grid-area: bio;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
line-height: 1.5;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@keyframes popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
#poc_images {
|
||||
.poc-wrapper {
|
||||
&:nth-of-type(5) {
|
||||
grid-area: 3/2/4/3;
|
||||
}
|
||||
}
|
||||
}
|
||||
#person_bio_wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "image" "name" "title" "bio";
|
||||
}
|
||||
#person__image {
|
||||
aspect-ratio: 1/1;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.hide-on-small {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
section {
|
||||
padding: 8vw 12vw;
|
||||
}
|
||||
#team_members {
|
||||
gap: 4vw;
|
||||
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
|
||||
}
|
||||
}
|
||||
@media (hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.interactive:hover {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (overflow: overlay) {
|
||||
body {
|
||||
overflow: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
302
index.html
Normal file
302
index.html
Normal file
@ -0,0 +1,302 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Technology Certifier Company</title>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body data-theme="dark">
|
||||
<header>
|
||||
<h4 id="company_title">
|
||||
<img src="assets/icon.svg" alt="">
|
||||
Capital Asset Management
|
||||
</h4>
|
||||
</header>
|
||||
<section id="hero_section" class="fancy-border fancy-border--bottom">
|
||||
<h1>Company main objective or
|
||||
something important</h1>
|
||||
</section>
|
||||
<section>
|
||||
<div class="grid section-title">
|
||||
<h4 class="reveal">
|
||||
<span>
|
||||
Token
|
||||
</span>
|
||||
</h4>
|
||||
<h3 class="reveal">
|
||||
<span>
|
||||
Structuring
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="grid section-title">
|
||||
<h4 class="reveal">
|
||||
<span>
|
||||
Periodic
|
||||
</span>
|
||||
</h4>
|
||||
<h3 class="reveal">
|
||||
<span>
|
||||
legal services
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
<section id="">
|
||||
<h3 class="section-title reveal">
|
||||
<span>
|
||||
Methodology
|
||||
</span>
|
||||
</h3>
|
||||
<ul id="methodology_list" class="fancy-list"> </ul>
|
||||
</section>
|
||||
<section id="team_section">
|
||||
<h3 class="section-title reveal">
|
||||
<span>
|
||||
Team
|
||||
</span>
|
||||
</h3>
|
||||
<ul id="team_members" class="move-in"></ul>
|
||||
</section>
|
||||
<dialog id="person_bio">
|
||||
<button onclick="closePersonBio()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="person_bio_wrapper">
|
||||
<img src="" alt="" id="person__image">
|
||||
<h3 id="person__name"></h3>
|
||||
<p id="person__title"></p>
|
||||
<p id="person__bio"></p>
|
||||
</div>
|
||||
</dialog>
|
||||
<script>
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Silvia Aguilar',
|
||||
title: 'External assessor',
|
||||
image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg',
|
||||
bio: `
|
||||
Silvia Melisa Aguilar Cruz is an attorney from El Salvador. She holds a Bachelor's degree in Juridical Sciences from the University Doctor José Matías Delgado. Silvia has experience working in various legal roles:
|
||||
\n\nLegal Collaborator at Asesores Corporativos (July 2017 - August 2018) - She dealt with notarial document preparation, including sworn declarations, permits, and property transactions. She also handled institutional permits and processes with the National Medicines Institution.
|
||||
\n\nIndependent Legal Consultant at Lans Despacho de Abogados (August 2018 - January 2020) - Her responsibilities included municipal permits, National Registry procedures, corporate legal advice, and managing legal books and acts.
|
||||
\n\nLegal Manager at Grupo Piramide (August 2018 - April 2022) - Silvia was in charge of ensuring legal compliance for a group of companies in El Salvador, Guatemala, and Panama. She provided internal legal advice and managed institutional procedures.
|
||||
\n\nIndependent Legal Consultant at Monroy & Asociados (July 2019 - April 2022) - Her expertise included legal advice for banking and tax procedures.
|
||||
\n\nCurrent position as Legal Manager at Monroy & Asociados (April 2022 - Present) - Her current responsibilities involve legal compliance for an accounting and auditing firm, handling institutional procedures, and providing legal advice on tax and banking matters.
|
||||
\n\nSilvia has attended various training courses and has received certifications related to financial and legal aspects, including Anti-Money Laundering, Corporate Finance, and Compliance. She has been involved in Capacitadora American College, APAC Accounting classes, Capacitadora Multi Inversiones, Capacitadora Pro-Calidad, and other specialized courses.
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'Oscar Monroy',
|
||||
title: 'External assessor',
|
||||
image: 'assets/a.jpg',
|
||||
bio: `
|
||||
Oscar René Monroy Sánchez is a highly accomplished professional with expertise in Information Management, Finance, and Economics. He holds a Bachelor's degree in Gerencia Informatica and a Master's degree in Business Administration with a focus on Finances.
|
||||
\n\nCurrently pursuing a Doctorate in Economics, Oscar has a strong academic background. With extensive experience as a Director Executive and Manager of Consultancies, he brings valuable leadership skills to the table. Oscar is also a certified expert trainer in Finance and Auditing, making him a valuable asset in any organization.
|
||||
`
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const render = {
|
||||
teamMember(details, index) {
|
||||
const { image, name, title } = details
|
||||
const memberItem = document.createElement('li')
|
||||
memberItem.classList.add('team-member')
|
||||
memberItem.setAttribute('data-index', index)
|
||||
memberItem.innerHTML = `
|
||||
<div class="team-member__image-container">
|
||||
<img src="${image}" alt="${name} profile picture" loading="lazy">
|
||||
</div>
|
||||
<p class="team-member__name">${name},</p>
|
||||
<p class="team-member__title">${title}</p>
|
||||
<span class="team-member__button">Learn more</span>
|
||||
`
|
||||
return memberItem
|
||||
},
|
||||
fancyListItem(details, index) {
|
||||
const { label, title, description } = details
|
||||
const listItem = document.createElement('li')
|
||||
listItem.classList.add('fancy-list__item')
|
||||
listItem.innerHTML = `
|
||||
<div class="fancy-list__item__label-wrapper">
|
||||
<span class="fancy-list__item__label">${label || index + 1}</span>
|
||||
</div>
|
||||
${title ? `<h4 class="fancy-list__item__title">${title}</h4>` : ''}
|
||||
${description ? `<p class="fancy-list__item__description">${description}</p>` : ''}
|
||||
`
|
||||
return listItem
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
const teamMembersList = document.getElementById('team_members')
|
||||
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
||||
teamMembers.forEach((member, index) => {
|
||||
const memberItem = render.teamMember(member, index)
|
||||
teamMembersList.appendChild(memberItem)
|
||||
})
|
||||
document.getElementById('team_members').addEventListener('click', e => {
|
||||
const index = e.target.closest('li').dataset.index
|
||||
const { image, name, title, bio } = teamMembers[index]
|
||||
document.getElementById('person__image').src = image
|
||||
document.getElementById('person__name').textContent = name
|
||||
document.getElementById('person__title').textContent = title
|
||||
document.getElementById('person__bio').innerText = bio
|
||||
document.getElementById('person_bio').showModal()
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.top = `-${window.scrollY}px`;
|
||||
})
|
||||
dataLists.forEach(list => {
|
||||
const { target, list: items } = list
|
||||
const listContainer = document.getElementById(target)
|
||||
if (!listContainer) return console.error(`No element found with id ${target}`)
|
||||
items.forEach((item, index) => {
|
||||
const listItem = render.fancyListItem(item, index)
|
||||
listContainer.appendChild(listItem)
|
||||
})
|
||||
})
|
||||
const headingObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.firstElementChild.animate([
|
||||
{
|
||||
transform: 'translateY(0.5em)',
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 1
|
||||
},
|
||||
], {
|
||||
duration: 300,
|
||||
easing: 'ease',
|
||||
fill: 'forwards',
|
||||
delay: 100
|
||||
})
|
||||
observer.unobserve(entry.target)
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 0.8
|
||||
})
|
||||
|
||||
document.querySelectorAll('.reveal').forEach(heading => {
|
||||
headingObserver.observe(heading)
|
||||
})
|
||||
const sectionObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.animate([
|
||||
{
|
||||
transform: 'translateX(-0.5em)',
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 1
|
||||
},
|
||||
], {
|
||||
duration: 300,
|
||||
easing: 'ease',
|
||||
fill: 'forwards',
|
||||
delay: 100
|
||||
})
|
||||
observer.unobserve(entry.target)
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 0.1
|
||||
})
|
||||
|
||||
document.querySelectorAll('.move-in').forEach(section => {
|
||||
sectionObserver.observe(section)
|
||||
})
|
||||
}
|
||||
function closePersonBio() {
|
||||
const scrollY = document.body.style.top;
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.top = 'initial';
|
||||
document.getElementById('person_bio').animate([
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'scale(1)'
|
||||
},
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'scale(1.1)'
|
||||
}
|
||||
], {
|
||||
duration: 100,
|
||||
easing: 'ease',
|
||||
}).finished.then(animation => {
|
||||
animation.commitStyles();
|
||||
document.getElementById('person_bio').close()
|
||||
})
|
||||
}
|
||||
|
||||
const dataLists = [
|
||||
{
|
||||
target: 'methodology_list',
|
||||
list: [
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user