Added social links
This commit is contained in:
sairaj mote
parent
966b5daf1d
commit
1cb523345b
11
css/main.css
11
css/main.css
@ -144,6 +144,9 @@ article > * {
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -152,6 +155,14 @@ header {
|
||||
-webkit-backdrop-filter: blur(1rem);
|
||||
backdrop-filter: blur(1rem);
|
||||
}
|
||||
header ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
header ul .icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#above_fold {
|
||||
padding-top: 0;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
@ -1 +1 @@
|
||||
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;overflow:hidden}body{--accent-color: #3d5afe;--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);--inline-padding: 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)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article{height:100vh;overflow-y:auto;scroll-snap-type:y proximity}article>*{scroll-snap-align:start;padding:max(1rem,2vw) var(--inline-padding)}header{position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:100vh;align-content:center}section:nth-of-type(2) img{position:absolute;opacity:.5;height:80vh;width:auto;align-self:center;right:0}section:nth-of-type(3){text-align:center}section:nth-of-type(3) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:2rem;font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));margin-top:5rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.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 (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}.hide-on-large{display:none !important}}
|
||||
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;overflow:hidden}body{--accent-color: #3d5afe;--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);--inline-padding: 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)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}h1{font-size:max(1.8rem,4vw)}h2{font-size:max(1.5rem,3vw)}h3{font-size:max(1.2rem,2vw)}h4{font-size:max(1rem,1.3vw)}img{-o-object-fit:contain;object-fit:contain}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.9)}.flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.flex-column{flex-direction:column}.flex-1{flex:1}.grid{display:grid}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.gap-4{gap:4rem}article{height:100vh;overflow-y:auto;scroll-snap-type:y proximity}article>*{scroll-snap-align:start;padding:max(1rem,2vw) var(--inline-padding)}header{display:flex;align-items:center;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background-color:rgba(var(--foreground-color), 0.5);z-index:2;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}header ul{list-style:none;display:flex;gap:.8rem}header ul .icon{display:flex}#above_fold{padding-top:0;height:calc(100vh - 6rem);text-align:center;align-content:center}#above_fold h2{margin:auto;max-width:46rem}#above_fold p{max-width:none}#hero_illustration{width:min(100%,26rem);margin:auto}section{display:grid;position:relative;min-height:100vh;align-content:center}section:nth-of-type(2) img{position:absolute;opacity:.5;height:80vh;width:auto;align-self:center;right:0}section:nth-of-type(3){text-align:center}section:nth-of-type(3) p{max-width:none}.section-header{display:flex;flex-direction:column;text-align:center}.section-header::after{content:"•••";line-height:.5}#poc_stats{list-style:none;display:flex;gap:1rem;border:solid thin rgba(var(--text-color), 0.5);padding:max(1.5rem,2vw) max(1rem,2vw);border-radius:1rem;margin:auto}#poc_stats .stat{display:flex;flex-direction:column;gap:.5rem;flex:1}#poc_stats .stat__number{font-size:2rem;font-weight:700}#poc_stats .stat__title{font-size:.9rem}#team_members{display:grid;grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr));margin-top:5rem;gap:3rem 1.5rem}.team-member{display:flex;flex-direction:column;text-align:center}.team-member img{-o-object-fit:cover;object-fit:cover;width:100%;aspect-ratio:3/3.5;border-radius:1rem;margin-bottom:1.2rem}.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 (max-width: 768px){.hide-on-small{display:none !important}}@media screen and (min-width: 768px){body{--inline-padding: max(1rem, 12vw)}.hide-on-large{display:none !important}}
|
||||
@ -119,11 +119,22 @@ article {
|
||||
}
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: rgba(var(--foreground-color), 0.5);
|
||||
z-index: 2;
|
||||
backdrop-filter: blur(1rem);
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
.icon {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
#above_fold {
|
||||
padding-top: 0;
|
||||
|
||||
35
index.html
35
index.html
@ -16,6 +16,41 @@
|
||||
<article>
|
||||
<header>
|
||||
<h4>Project B</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://twitter.com/ProjectBSV" target="_blank">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 248 204">
|
||||
<path
|
||||
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/profile.php?id=100091526117221&mibextid=ZbWKwL"
|
||||
target="_blank">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1365.333 1365.333">
|
||||
width="1365.333" height="1365.333">
|
||||
<path
|
||||
d="M1365.33 682.668C1365.33 305.643 1059.691.003 682.665.003S0 305.643 0 682.668c0 340.738 249.641 623.158 575.999 674.372V880.001H402.666V682.668h173.333v-150.4c0-171.093 101.917-265.599 257.853-265.599 74.689 0 152.813 13.333 152.813 13.333v168h-86.082c-84.804 0-111.25 52.623-111.25 106.609v128.057h189.333l-30.267 197.333H789.331v477.039c326.358-51.213 575.999-333.634 575.999-674.372"
|
||||
fill="#100f0d" />
|
||||
<path
|
||||
d="M948.398 880.001l30.267-197.333H789.331V554.611c0-53.987 26.447-106.609 111.25-106.609h86.082v-168s-78.124-13.333-152.813-13.333c-155.936 0-257.853 94.506-257.853 265.599v150.4H402.666v197.333h173.333v477.039c34.756 5.453 70.378 8.293 106.666 8.293s71.91-2.84 106.666-8.293V880.001h159.066"
|
||||
fill="#fff" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/projectbsv?igshid=ZDdkNTZiNTM=" target="_blank">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
|
||||
viewBox="0 0 1000 1000">
|
||||
<path
|
||||
d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34"
|
||||
transform="translate(-2.5 -2.5)" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section id="above_fold" class="gap-4">
|
||||
<img id="hero_illustration" src="assets/hero illustrator.svg" alt="">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user