Skip to content

Instantly share code, notes, and snippets.

@jigneshk5

jigneshk5/index.html

Created August 22, 2021 21:54
Show Gist options
  • Save jigneshk5/002cd5b4a81a398451bece21712b0f4a to your computer and use it in GitHub Desktop.
Save jigneshk5/002cd5b4a81a398451bece21712b0f4a to your computer and use it in GitHub Desktop.
Download ZIP
Section Web - METAMO
Raw
index.html
<div class="full-width">
<div class="grid-section">
<div class="image-section">
<div class="image">
<div class="img">
<img src="https://images.unsplash.com/photo-1558403194-611308249627?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="">
</div>
<div class="shadow">
<div class="position-relative d">
<div class="drag">
<svg width="50" height="50">
<use xlink:href="#apps"/>
</svg>
</div>
<div class="drag">
<svg width="50" height="50">
<use xlink:href="#apps"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="info-section">
<div class="icon-info">
<svg width="28" height="28" viewBox="0 0 24 24" id="lightning-bolt"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h1 class="title-section">What is <span>METAMO</span></h1>
<p class="desc-section">
One morning, when <span>Gregor Samsa</span> woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
</p>
<div class="cards-b">
<div class="card_">
<div class="left">
<div class="card-image">
<svg width="20" height="20">
<use xlink:href="#laptop"/>
</svg>
</div>
<p class="card-title">METAMO for Web</p>
</div>
<div class="right">
<svg width="20" height="20">
<use xlink:href="#chevron-right"/>
</svg>
</div>
</div>
<div class="card_">
<div class="left">
<div class="card-image">
<svg width="20" height="20">
<use xlink:href="#smartphone"/>
</svg>
</div>
<p class="card-title">METAMO for mobile</p>
</div>
<div class="right">
<svg width="20" height="20">
<use xlink:href="#chevron-right"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="hide">
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="chevron-right"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol>
<symbol id="smartphone" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 16H11V18H13V16Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4ZM7 4H17V20H7L7 4Z" fill="currentColor" /></symbol>
<symbol id="laptop" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 4.89543 3.89543 4 5 4H19C20.1046 4 21 4.89543 21 6V14C21 15.1046 20.1046 16 19 16H5C3.89543 16 3 15.1046 3 14V6ZM5 6H19V14H5V6Z" fill="currentColor" /><path d="M2 18C1.44772 18 1 18.4477 1 19C1 19.5523 1.44772 20 2 20H22C22.5523 20 23 19.5523 23 19C23 18.4477 22.5523 18 22 18H2Z" fill="currentColor" /></aymbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="light-bulb"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="plus"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></symbol>
<symbol id="close"viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd"></path></symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="beaker"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></symbol>
<symbol id="lightning" fill="currentColor" stroke="currentColor" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="m6.5 7.5h4l-6 9v-6.997l-4-.003 6-9z" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 2)"/></symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="finger-print"><path fill-rule="evenodd" d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z" clip-rule="evenodd"></path></symbol>
<symbol viewBox="0 0 20 20" fill="currentColor" id="terminal"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></symbol>
<symbol id="apps" viewBox="0 0 24 24" fill="none"> <path d="M8 6C8 7.10457 7.10457 8 6 8C4.89543 8 4 7.10457 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6Z" fill="currentColor"/> <path d="M8 12C8 13.1046 7.10457 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12Z" fill="currentColor"/> <path d="M6 20C7.10457 20 8 19.1046 8 18C8 16.8954 7.10457 16 6 16C4.89543 16 4 16.8954 4 18C4 19.1046 4.89543 20 6 20Z" fill="currentColor"/> <path d="M14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6Z" fill="currentColor"/> <path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="currentColor"/> <path d="M14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18Z" fill="currentColor"/> <path d="M18 8C19.1046 8 20 7.10457 20 6C20 4.89543 19.1046 4 18 4C16.8954 4 16 4.89543 16 6C16 7.10457 16.8954 8 18 8Z" fill="currentColor"/> <path d="M20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z" fill="currentColor"/> <path d="M18 20C19.1046 20 20 19.1046 20 18C20 16.8954 19.1046 16 18 16C16.8954 16 16 16.8954 16 18C16 19.1046 16.8954 20 18 20Z" fill="currentColor"/></symbol>
<symbol id="border" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 11H1V13H3V11Z" fill="currentColor"/> <path d="M7 11H5V13H7V11Z" fill="currentColor"/> <path d="M9 11H11V13H9V11Z" fill="currentColor"/> <path d="M15 11H13V13H15V11Z" fill="currentColor"/> <path d="M17 11H19V13H17V11Z" fill="currentColor"/> <path d="M23 11H21V13H23V11Z" fill="currentColor"/></symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="chip"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg>
</svg>
Raw
style.scss
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
:root {
--bg-page: #181818;
--text-color: #f9f9f9;
--bg-accordion: linear-gradient(30deg, #272727, #2b2b2b);
--blue: #0870f8;
--g-yellow: linear-gradient(30deg, #fc0, #fc0);
--g-red: linear-gradient(30deg, #f36, #f24);
--g-blue: linear-gradient(30deg, #0cf, #0af);
--g-purple: linear-gradient(30deg, #85f, #9966ff);
--blue-rgb: 8, 112, 248;
}
* {
box-sizing: border-box;
font-family: "Inter var", sans-serif;
font-size: 16px;
font-weight: 400;
}
html, body, .full-width {
height: 100%;
}
body {
&, html {
margin: 0;
padding: 0;
}
background:var(--bg-page);
color:var(--text-color);
}
@keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
.hide {
display: none;
visibility: hidden;
height: 0;
opacity: 0;
}
.full-width {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
}
.grid-section {
width: 100%;
// padding: 70px 40px;
display: grid;
grid-template-columns: 1.5fr 1.2fr;
align-items: center;
grid-column-gap: 45px;
}
.image {
position: relative;
&:after {
content: '';
position: absolute;
width: 90%;
height: 100%;
top: -5%;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
left: 5%;
opacity: 0;
z-index: 2;
animation: opacity 500ms forwards;
animation-delay: 350ms;
}
}
.shadow {
position: absolute;
left: 30%;
top: -20px;
width: 80%;
height: 100%;
transform: rotate(90deg);
z-index: 1;
background: var(--g-purple);
opacity: 0;
animation: opacity 500ms forwards;
animation-delay: 200ms;
}
.img {
max-width: 600px;
padding-top: calc(9 / 16 * 100%);
width: 100%;
overflow: hidden;
position: relative;
background: #aa98cd;
z-index: 5;
animation: opacity 500ms forwards;
animation-delay: 500ms;
opacity: 0;
img {
mix-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 6;
opacity: 0;
animation: opacity 500ms forwards;
animation-delay: 500ms;
}
}
.icon-info {
width: 48px;
height: 48px;
background: var(--g-purple);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.position-relative {
position: relative;
&.d {
width: 100%;
height: 100%;
}
}
.drag {
position: absolute;
left: 10px;
opacity: 0;
animation: opacity 500ms forwards;
animation-delay: 500ms;
&:nth-of-type(1) {
top: 10px;
animation-delay: 600ms;
}
&:nth-of-type(2) {
bottom: 10px;
animation-delay: 600ms;
}
}
#lightning-bolt {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
stroke: currentColor;
fill: none;
animation: dash 5s linear forwards;
animation-delay: 1s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.title-section {
margin: 10px 0 15px;
font-variation-settings: 'wght' 700;
span {
font-variation-settings: 'wght' 900;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background: var(--g-purple);
}
&, span {font-size: 40px!important};
}
.desc-section {
font-size: 14px;
span {
font-variation-settings: 'ital' 14, 'wght' 600;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background: var(--g-yellow);
}
}
.cards-b {
margin-top: 20px;
display: flex;
flex-direction: column;
}
.card_ {
padding: 2px 10px;
display: flex;
max-width: 350px;
align-items: center;
background: var(--bg-accordion);
border-radius: 6px;
line-height: 100%;
& + .card_ {
margin-top: 15px;
}
.left {
display: flex;
align-items: center;
margin-right: auto;
.card-image {
width: 40px;
height: 40px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: var(--bg-page);
}
.card-title {
margin-left: 14px;
font-variation-settings: 'wght' 600;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment