Initial commit
This commit is contained in:
sairaj mote
commit
86b20c2314
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/Puneet Sondh.jpg
Normal file
BIN
assets/Puneet Sondh.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
assets/Rohit Tripathy.jpg
Normal file
BIN
assets/Rohit Tripathy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
assets/Ruchir Gupta.jpg
Normal file
BIN
assets/Ruchir Gupta.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
10
assets/bg-art-1.svg
Normal file
10
assets/bg-art-1.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="1728" height="1175" viewBox="0 0 1728 1175" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M-420.48 1174.2C-359.098 941.18 -93.793 462.175 476.375 410.341C1046.54 358.508 1373.23 31.8202 1465.3 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-381.042 1174.2C-319.66 941.18 -54.355 462.175 515.813 410.341C1085.98 358.508 1412.67 31.8202 1504.74 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-341.604 1174.2C-280.223 941.18 -14.9171 462.175 555.251 410.341C1125.42 358.508 1452.11 31.8202 1544.18 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-302.167 1174.2C-240.785 941.18 24.5208 462.175 594.689 410.341C1164.86 358.508 1491.54 31.8202 1583.62 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-262.729 1174.2C-201.347 941.18 63.9587 462.175 634.127 410.341C1204.3 358.508 1530.98 31.8202 1623.06 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-223.291 1174.2C-161.909 941.18 103.396 462.175 673.565 410.341C1243.73 358.508 1570.42 31.8202 1662.49 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-183.853 1174.2C-122.471 941.18 142.834 462.175 713.003 410.341C1283.17 358.508 1609.86 31.8202 1701.93 -125.044" stroke="#CCCCCC"/>
|
||||
<path d="M-144.415 1174.2C-83.0332 941.18 182.272 462.175 752.441 410.341C1322.61 358.508 1649.3 31.8202 1741.37 -125.044" stroke="#CCCCCC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
6
assets/bg-art-2.svg
Normal file
6
assets/bg-art-2.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="390" height="390" viewBox="0 0 390 390" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.14136" y="1.13965" width="327.538" height="327.538" stroke="#D9D9D9"/>
|
||||
<rect x="21.1414" y="21.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
|
||||
<rect x="41.1414" y="41.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
|
||||
<rect x="61.1414" y="61.1396" width="327.538" height="327.538" stroke="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 435 B |
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: 2.4 MiB |
3
assets/stamp-outline.svg
Normal file
3
assets/stamp-outline.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="242" height="243" viewBox="0 0 242 243" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M128.033 5.83346L135.408 10.7602C139.597 13.5586 144.726 14.5788 149.667 13.5965L158.366 11.8671C163.523 10.842 168.789 13.0233 171.71 17.394L176.638 24.7681C179.437 28.9565 183.785 31.8618 188.726 32.8451L197.425 34.5764C202.581 35.6025 206.611 39.6329 207.637 44.7888L209.368 53.4875C210.352 58.4284 213.257 62.7764 217.446 65.5757L224.82 70.504C229.19 73.4251 231.372 78.6911 230.347 83.8472L228.617 92.5463C227.635 97.4873 228.655 102.616 231.453 106.805L236.38 114.18C239.3 118.552 239.3 124.252 236.38 128.623L231.453 135.998C228.655 140.187 227.635 145.316 228.617 150.257L230.347 158.956C231.372 164.112 229.19 169.378 224.82 172.299L217.446 177.228C213.257 180.027 210.352 184.375 209.368 189.316L207.637 198.014C206.611 203.17 202.581 207.201 197.425 208.227L188.726 209.958C183.785 210.941 179.437 213.847 176.638 218.035L171.71 225.409C168.789 229.78 163.523 231.961 158.366 230.936L149.667 229.207C144.726 228.224 139.597 229.245 135.408 232.043L128.033 236.97C123.662 239.89 117.962 239.89 113.591 236.97L106.216 232.043C102.027 229.245 96.8977 228.224 91.9567 229.207L83.2576 230.936C78.1015 231.961 72.8355 229.78 69.9144 225.409L64.9861 218.035C62.1868 213.847 57.8388 210.941 52.8979 209.958L44.1992 208.227C39.0433 207.201 35.0129 203.17 33.9868 198.014L32.2555 189.316C31.2722 184.375 28.3669 180.027 24.1785 177.228L16.8044 172.299C12.4337 169.378 10.2524 164.112 11.2775 158.956L13.0069 150.257C13.9892 145.316 12.969 140.187 10.1706 135.998L5.24386 128.623C2.32367 124.252 2.32366 118.552 5.24386 114.18L10.1706 106.805C12.969 102.616 13.9892 97.4873 13.0069 92.5463L11.2775 83.8472C10.2524 78.6911 12.4337 73.4251 16.8044 70.504L24.1785 65.5757C28.3669 62.7764 31.2722 58.4284 32.2555 53.4875L33.9868 44.7888C35.0129 39.6329 39.0433 35.6025 44.1992 34.5764L52.8979 32.8451C57.8388 31.8618 62.1868 28.9565 64.9861 24.7681L69.9144 17.394C72.8355 13.0233 78.1015 10.842 83.2576 11.8671L91.9567 13.5965C96.8977 14.5788 102.027 13.5586 106.216 10.7602L113.591 5.83346C117.962 2.91327 123.662 2.91326 128.033 5.83346Z" stroke="#4A72FF" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
3
assets/stamp.svg
Normal file
3
assets/stamp.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="242" height="243" viewBox="0 0 242 243" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M111.924 3.33888C117.304 -0.255207 124.32 -0.255209 129.7 3.33887L137.075 8.26563C140.602 10.6222 144.922 11.4813 149.082 10.6541L157.781 8.92467C164.127 7.66306 170.609 10.3477 174.204 15.7271L179.132 23.1011C181.489 26.6282 185.151 29.0748 189.312 29.9028L198.01 31.6341C204.356 32.897 209.317 37.8575 210.58 44.2032L212.311 52.9019C213.139 57.0627 215.585 60.7242 219.113 63.0815L226.487 68.0098C231.866 71.605 234.551 78.0862 233.289 84.4322L231.56 93.1312C230.732 97.2921 231.591 101.611 233.948 105.139L238.875 112.514C242.469 117.894 242.469 124.909 238.875 130.289L233.948 137.664C231.591 141.192 230.732 145.511 231.56 149.672L233.289 158.371C234.551 164.717 231.866 171.198 226.487 174.793L219.113 179.722C215.585 182.079 213.139 185.741 212.311 189.901L210.58 198.6C209.317 204.946 204.356 209.906 198.01 211.169L189.312 212.9C185.151 213.728 181.489 216.175 179.132 219.702L174.204 227.076C170.609 232.456 164.127 235.14 157.781 233.879L149.082 232.149C144.922 231.322 140.602 232.181 137.075 234.538L129.7 239.464C124.32 243.058 117.304 243.058 111.924 239.464L104.549 234.538C101.022 232.181 96.7025 231.322 92.5416 232.149L83.8426 233.879C77.4966 235.14 71.0154 232.456 67.4202 227.076L62.4919 219.702C60.1346 216.175 56.4731 213.728 52.3123 212.9L43.6136 211.169C37.2679 209.906 32.3074 204.946 31.0445 198.6L29.3132 189.901C28.4852 185.741 26.0386 182.079 22.5115 179.722L15.1375 174.793C9.75807 171.198 7.07346 164.717 8.33507 158.371L10.0645 149.672C10.8917 145.511 10.0326 141.192 7.67604 137.664L2.74928 130.289C-0.844806 124.909 -0.844809 117.894 2.74927 112.514L7.67603 105.139C10.0326 101.611 10.8917 97.2921 10.0645 93.1312L8.33507 84.4322C7.07346 78.0862 9.75807 71.605 15.1375 68.0098L22.5115 63.0815C26.0386 60.7242 28.4852 57.0627 29.3132 52.9019L31.0445 44.2032C32.3074 37.8575 37.2679 32.897 43.6136 31.6341L52.3123 29.9028C56.4731 29.0748 60.1346 26.6282 62.4919 23.1011L67.4202 15.7271C71.0154 10.3477 77.4966 7.66306 83.8426 8.92467L92.5416 10.6541C96.7025 11.4813 101.022 10.6222 104.549 8.26564L111.924 3.33888Z" fill="#4A72FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
3
assets/triangle-down.svg
Normal file
3
assets/triangle-down.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="50" height="24" viewBox="0 0 50 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.6649 23.6902L2.02452e-06 0.532466L49.3298 0.53247L24.6649 23.6902Z" fill="#4A72FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 201 B |
200
css/main.css
Normal file
200
css/main.css
Normal file
@ -0,0 +1,200 @@
|
||||
* {
|
||||
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: #4a72ff;
|
||||
--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: #6d83ff;
|
||||
--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(1.8rem, 4vw);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: max(1.2rem, 2vw);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
#company_title {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
|
||||
#hero_section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 6rem);
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
text-align: center;
|
||||
}
|
||||
#hero_section::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url("../assets/triangle-down.svg");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
top: calc(100% - 0.03rem);
|
||||
left: 0;
|
||||
}
|
||||
#hero_section p {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
margin-top: 2rem;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.team-member__image-container {
|
||||
display: grid;
|
||||
margin-bottom: 1.2rem;
|
||||
place-items: center;
|
||||
}
|
||||
.team-member__image-container > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
.team-member__image-container img:first-of-type {
|
||||
width: calc(100% - 1.5rem);
|
||||
}
|
||||
.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/stamp.svg") no-repeat center/contain;
|
||||
mask: url("../assets/stamp.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;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40rem) {
|
||||
#team_members {
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 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
@ -0,0 +1 @@
|
||||
*{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: #4a72ff;--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: #6d83ff;--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(1.8rem,4vw)}h2{font-size:3vw}h3{font-size:max(1.2rem,2vw)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow: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}header{display:flex;position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem;align-items:center;justify-content:space-between;background-color:var(--accent-color)}#company_title{position:relative;margin:auto;color:rgba(var(--foreground-color), 1)}section{height:100vh;padding-top:8vh;padding-bottom:8vh}#hero_section{position:relative;display:flex;flex-direction:column;gap:2rem;justify-items:center;justify-content:center;height:calc(100vh - 6rem);background-color:var(--accent-color);color:rgba(var(--foreground-color), 1);text-align:center}#hero_section::after{position:absolute;content:"";background:url("../assets/triangle-down.svg");background-repeat:repeat-x;background-size:1.8rem;width:100%;height:2rem;top:calc(100% - .03rem);left:0}#hero_section p{max-width:none}.section-title{text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr));margin-top:2rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member__image-container{display:grid;margin-bottom:1.2rem;place-items:center}.team-member__image-container>*{grid-area:1/1}.team-member__image-container img:first-of-type{width:calc(100% - 1.5rem)}.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/stamp.svg") no-repeat center/contain;mask:url("../assets/stamp.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:.9rem}@media screen and (min-width: 40rem){#team_members{grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr))}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.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}
|
||||
192
css/main.scss
Normal file
192
css/main.scss
Normal file
@ -0,0 +1,192 @@
|
||||
* {
|
||||
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: #4a72ff;
|
||||
--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: #6d83ff;
|
||||
--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(1.8rem, 4vw);
|
||||
}
|
||||
h2 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
h3 {
|
||||
font-size: max(1.2rem, 2vw);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
#company_title {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
section {
|
||||
height: 100vh;
|
||||
padding-top: 8vh;
|
||||
padding-bottom: 8vh;
|
||||
}
|
||||
#hero_section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 6rem);
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
text-align: center;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: url("../assets/triangle-down.svg");
|
||||
background-repeat: repeat-x;
|
||||
background-size: 1.8rem;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
top: calc(100% - 0.03rem);
|
||||
left: 0;
|
||||
}
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
.section-title {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
#team_members {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
margin-top: 2rem;
|
||||
gap: 3rem 1.5rem;
|
||||
}
|
||||
.team-member {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
&__image-container {
|
||||
display: grid;
|
||||
margin-bottom: 1.2rem;
|
||||
place-items: center;
|
||||
& > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
img:first-of-type {
|
||||
width: calc(100% - 1.5rem);
|
||||
}
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
object-position: center;
|
||||
aspect-ratio: 1/1;
|
||||
mask: url("../assets/stamp.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;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
#team_members {
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 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;
|
||||
}
|
||||
76
index.html
Normal file
76
index.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!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>
|
||||
<header>
|
||||
<h4 id="company_title">
|
||||
TC<sup>2</sup>
|
||||
</h4>
|
||||
</header>
|
||||
<section id="hero_section">
|
||||
<h1>Company Mission here <br>
|
||||
in huge font</h1>
|
||||
</section>
|
||||
<section id="team_section">
|
||||
<h3 class="section-title">Team</h3>
|
||||
<ul id="team_members"></ul>
|
||||
</section>
|
||||
<script>
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Parin Lapasia',
|
||||
title: 'Principal director and shareholder',
|
||||
image: 'assets/craig-mckay-jmURdhtm7Ng-unsplash.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Rohit Tripathy',
|
||||
title: 'Principal director and shareholder',
|
||||
image: 'assets/Rohit Tripathy.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Puneet Sondh',
|
||||
title: 'Principal director',
|
||||
image: 'assets/Puneet Sondh.jpg'
|
||||
},
|
||||
{
|
||||
name: 'Ruchir Gupta',
|
||||
title: 'Principal director',
|
||||
image: 'assets/Ruchir Gupta.jpg'
|
||||
},
|
||||
]
|
||||
|
||||
window.onload = () => {
|
||||
const teamMembersList = document.getElementById('team_members')
|
||||
teamMembers.sort((a, b) => a.name.localeCompare(b.name))
|
||||
teamMembers.forEach(member => {
|
||||
const { image, name, title } = member
|
||||
const memberItem = document.createElement('li')
|
||||
memberItem.classList.add('team-member')
|
||||
memberItem.innerHTML = `
|
||||
<div class="team-member__image-container">
|
||||
<img src="${image}" alt="${name} profile picture" loading="lazy">
|
||||
<img src="assets/stamp-outline.svg">
|
||||
</div>
|
||||
<p class="team-member__name">${name},</p>
|
||||
<p class="team-member__title">${title}</p>
|
||||
`
|
||||
teamMembersList.appendChild(memberItem)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user