Skip to content

Instantly share code, notes, and snippets.

@Ashon-G

Ashon-G/finzaar.markdown

Last active January 12, 2023 09:01
Show Gist options
  • Save Ashon-G/185d7ad874a95cd09e725ebd45e2604e to your computer and use it in GitHub Desktop.
Save Ashon-G/185d7ad874a95cd09e725ebd45e2604e to your computer and use it in GitHub Desktop.
Download ZIP
Finzaar
Raw
finzaar.markdown
Raw
index.html
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div class="container">
<div class="container__item landing-page-container">
<div class="content__wrapper">
<header class="header">
<div class="menu-icon header__item">
<span class="menu-icon__line"></span>
</div>
<h1 class="heading header__item">FINZAAR</h1>
<ul class="social-container header__item">
<li class="social__icon social__icon--fb">
<img src="https://image.flaticon.com/icons/svg/1077/1077041.svg" alt="facebook">
</li>
<li class="social__icon social__icon--dr">
<img src="https://image.flaticon.com/icons/svg/25/25631.svg" alt="dribbble">
</li>
<li class="social__icon social__icon--in">
<img src="https://image.flaticon.com/icons/svg/1077/1077042.svg" alt="instagram">
</li>
</ul>
</header>
<p class="coords">N 49° 16' 35.173" / W 0° 42' 11.30"</p>
<div class="ellipses-container">
<h2 class="greeting">Hello</h2><br></br><p class="welcome">Welcome to Finzaar</p>
<div class="ellipses ellipses__outer--thin">
<p>O</p>
<div class="ellipses ellipses__orbit"></div>
</div>
<div class="ellipses ellipses__outer--thick"></div>
</div>
<div class="scroller">
<p class="page-title">home</p>
<div class="timeline">
<span class="timeline__unit"></span>
<span class="timeline__unit timeline__unit--active"></span>
<span class="timeline__unit"></span>
</div>
</div>
</div>
</div>
</div>
<ul class="cards">
<li>
<a href="" class="card">
<img src="https://cdn.dribbble.com/users/88761/screenshots/3241881/dribbble_user_cards_volkov_lubos.gif" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://cdn-icons-png.flaticon.com/512/9368/9368098.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">Card Tokenization</h3>
<span class="card__status">Uploaded By KAPED INC.</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://cdn-icons-png.flaticon.com/512/9368/9368091.png" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/sjLMNDM.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">kim Cattrall</h3>
<span class="card__status">3 hours ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://cdn-icons-png.flaticon.com/512/9368/9368098.png" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/7D7I6dI.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">Jessica Parker</h3>
<span class="card__tagline">Lorem ipsum dolor sit amet consectetur</span>
<span class="card__status">1 hour ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
<li>
<a href="" class="card">
<img src="https://cdn-icons-png.flaticon.com/512/9368/9368097.png" class="card__image" alt="" />
<div class="card__overlay">
<div class="card__header">
<svg class="card__arc" xmlns="http://www.w3.org/2000/svg"><path /></svg>
<img class="card__thumb" src="https://i.imgur.com/sjLMNDM.png" alt="" />
<div class="card__header-text">
<h3 class="card__title">kim Cattrall</h3>
<span class="card__status">3 hours ago</span>
</div>
</div>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, blanditiis?</p>
</div>
</a>
</li>
</ul>
</body>
</html>
Raw
style.scss
$tiber: #09383E;
$elephant: #0C383E;
$white: #fff;
// rem font sizing.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
.container__item {
margin: 0 auto 40px;
}
.landing-page-container {
width: 100%;
min-height: 100%;
height: 90rem;
background-image: url('https://s29.postimg.org/vho8xb2pj/landing_bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
color: $tiber;
}
.content__wrapper {
max-width: 1200px;
width: 90%;
height: 100%;
margin: 0 auto;
position: relative;
}
.header {
width: 100%;
height: 2rem;
padding: 4.5rem 0;
display: block;
}
.menu-icon {
width: 2.5rem;
height: 1.5rem;
display: inline-block;
cursor: pointer;
}
.header__item {
display: inline-block;
float: left;
}
.menu-icon__line {
width: 1.5rem;
height: 0.2rem;
background-color: $elephant;
display: block;
&:before,
&:after {
content: '';
width: 1.5rem;
height: 0.2rem;
background-color: $elephant;
display: inline-block;
position: relative;
}
&:before {
left: 0.5rem;
top: -0.6rem;
}
&:after {
top: -1.8rem;
}
}
.heading {
width: 90%;
font-size: 2rem;
font-weight: bold;
margin: 0;
line-height: 1.7rem;
margin: 0 auto;
text-align: center;
}
.social-container {
width: 7.25rem;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
float: right;
.social__icon {
float: left;
cursor: pointer;
&.social__icon--dr {
margin-left: 0.5rem;
img {
height: 2rem;
}
}
&.social__icon--in {
margin-left: 0.75rem;
img {
height: 2rem;
}
}
&.social__icon--fb {
img {
height: 2rem;
margin: 0rem;
}
}
}
}
.coords {
font-size: 1rem;
display: inline-block;
transform: rotate(-90deg) translateY(50%);
float: left;
position: relative;
top: 40%;
letter-spacing: 0.2rem;
left: -11.5rem;
margin: 0;
}
.ellipses-container {
width: 50rem;
height: 50rem;
border-radius: 50%;
margin: 0 auto;
position: relative;
top: 10.5rem;
.greeting {
position: absolute;
top: 11.6rem;
left: 13rem;
right: 0;
margin: 0 auto;
text-transform: uppercase;
letter-spacing: 4rem;
font-size: 2.2rem;
font-weight: 400;
opacity: 0.5;
&:after{
content: '';
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
display: inline-block;
background-color: $elephant;
position: relative;
top: -0.65rem;
left: -5.05rem;
}
}
.welcome {
position: absolute;
top: 16.9rem;
left: 10rem;
right: 0;
margin: 0 auto;
text-transform: lowercase;
letter-spacing: 1rem;
font-size: 1.3rem;
font-weight: 400;
opacity: 1.5
}
}
.ellipses {
border-radius: 50%;
position: absolute;
top: 0;
border-style: solid;
}
.ellipses__outer--thin {
width: 100%;
height: 100%;
border-width: 1px;
border-color: rgba(9, 56, 62, 0.1);
animation: ellipsesOrbit 15s ease-in-out infinite;
&:after {
content: "";
background-image: url('https://s29.postimg.org/5h0r4ftkn/ellipses_dial.png');
background-repeat: no-repeat;
background-position: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.15;
}
}
.ellipses__outer--thick {
width: 99.5%;
height: 99.5%;
border-color: $tiber transparent;
border-width: 2px;
transform: rotate(-45deg);
animation: ellipsesRotate 15s ease-in-out infinite;
}
.ellipses__orbit {
width: 2.5rem;
height: 2.5rem;
border-width: 2px;
border-color: $tiber;
top: 5rem;
right: 6.75rem;
&:before {
content: '';
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
display: inline-block;
background-color: $tiber;
margin: 0 auto;
left: 0;
right: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
.scroller {
width: 7.5rem;
display: inline-block;
float: right;
position: relative;
top: -15%;
transform: translateY(50%);
overflow: hidden;
.page-title {
font-family: 'Playfair Display', serif;
letter-spacing: 0.5rem;
display: inline-block;
float: left;
margin-top: 1rem;
}
.timeline {
width: 1.5rem;
height: 9rem;
display: inline-block;
float: right;
.timeline__unit {
width: 100%;
height: 0.1rem;
display: block;
background-color: $elephant;
margin: 0 0 2rem;
opacity: 0.2;
&.timeline__unit--active {
opacity: 1;
&:after {
opacity: 0.2;
}
}
&:after {
content: '';
width: 70%;
height: 0.1rem;
display: block;
position: relative;
float: right;
background-color: $elephant;
top: 1rem;
}
}
}
}
@keyframes ellipsesRotate {
0% {
transform: rotate(-45deg);
}
100% {
transform: rotate(-405deg);
}
}
@keyframes ellipsesOrbit {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
:root {
--surface-color: #fff;
--curve: 40;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: #fef8f8;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 4rem 5vw;
padding: 0;
list-style-type: none;
}
.card {
position: relative;
display: block;
height: 100%;
border-radius: calc(var(--curve) * 1px);
overflow: hidden;
text-decoration: none;
}
.card__image {
width: 100%;
height: auto;
}
.card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
border-radius: calc(var(--curve) * 1px);
background-color: var(--surface-color);
transform: translateY(100%);
transition: .2s ease-in-out;
}
.card:hover .card__overlay {
transform: translateY(0);
}
.card__header {
position: relative;
display: flex;
align-items: center;
gap: 2em;
padding: 2em;
border-radius: calc(var(--curve) * 1px) 0 0 0;
background-color: var(--surface-color);
transform: translateY(-100%);
transition: .2s ease-in-out;
}
.card__arc {
width: 80px;
height: 80px;
position: absolute;
bottom: 100%;
right: 0;
z-index: 1;
}
.card__arc path {
fill: var(--surface-color);
d: path("M 40 80 c 22 0 40 -22 40 -40 v 40 Z");
}
.card:hover .card__header {
transform: translateY(0);
}
.card__thumb {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
}
.card__title {
font-size: 1em;
margin: 0 0 .3em;
color: #6A515E;
}
.card__tagline {
display: block;
margin: 1em 0;
font-family: "MockFlowFont";
font-size: .8em;
color: #D7BDCA;
}
.card__status {
font-size: .8em;
color: #D7BDCA;
}
.card__description {
padding: 0 2em 2em;
margin: 0;
color: #D7BDCA;
font-family: "MockFlowFont";
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400italic,700italic" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment