Initial commit
This commit is contained in:
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
img/image-header-desktop.jpg
Normal file
BIN
img/image-header-desktop.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
img/image-header-mobile.jpg
Normal file
BIN
img/image-header-mobile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
47
index.html
Normal file
47
index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!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">
|
||||
|
||||
<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=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./styles/styles.css">
|
||||
|
||||
<title>stats-preview-card</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="card__text">
|
||||
<div class="card__textblock">
|
||||
<h1>Get <span>insights</span> that help your business grow.</h1>
|
||||
<p class="card__para">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
|
||||
<div class="card__stats">
|
||||
<div class="card__statblock">
|
||||
<div class="card__statnum">10k+</div>
|
||||
<div class="card__stattitle">Companies</div>
|
||||
</div>
|
||||
<div class="card__statblock">
|
||||
<div class="card__statnum">314</div>
|
||||
<div class="card__stattitle">templates</div>
|
||||
</div>
|
||||
<div class="card__statblock">
|
||||
<div class="card__statnum">12M+</div>
|
||||
<div class="card__stattitle">queries</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__img">
|
||||
<img src="./img/image-header-desktop.jpg" alt="" class="card__imgdskt">
|
||||
<img src="./img/image-header-mobile.jpg" alt="" class="card__imgmobl">
|
||||
<div class="pink"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
100
styles/_card.scss
Normal file
100
styles/_card.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
.card {
|
||||
background-color: $card-background;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
max-width: 1140px;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 6%;
|
||||
|
||||
.card__textblock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $main-heading;
|
||||
font-size: 3.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
line-height: 4.2rem;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $card-accent;
|
||||
}
|
||||
|
||||
.card__para {
|
||||
color: $main-paragraph;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.card__stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.card__statblock {
|
||||
display: fles;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card__statnum {
|
||||
color: $main-heading;
|
||||
font-weight: bold;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.card__stattitle {
|
||||
color: $main-heading;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
margin-top: 0.8rem;
|
||||
|
||||
}
|
||||
|
||||
.card__img {
|
||||
background-color: $card-accent;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
// max-width: 100%;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.card__imgmobl {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: $card-accent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.25;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
23
styles/_general.scss
Normal file
23
styles/_general.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
// font-family: 'Lexend Deca', sans-serif;
|
||||
background-color: $main-background;
|
||||
}
|
||||
|
||||
.container {
|
||||
//border: 1px solid white; //temporary settings
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
29
styles/_media_1050.scss
Normal file
29
styles/_media_1050.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
@media screen and (max-width: 1146px) {
|
||||
|
||||
.card__stattitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
.card__textblock {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2rem;
|
||||
line-height: 3.8rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
text {
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
// img {
|
||||
// max-width: 80%;
|
||||
// }
|
||||
}
|
||||
67
styles/_media_375.scss
Normal file
67
styles/_media_375.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
@media screen and (max-width: 375px) {
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 88%;
|
||||
|
||||
}
|
||||
|
||||
.card__stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card__statblock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 1.6rem;
|
||||
}
|
||||
|
||||
.card__img {
|
||||
order: 1;
|
||||
border-radius: 1rem 1rem 0 0 ;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.card__imgdskt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card__imgmobl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pink {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
order: 2;
|
||||
padding: 10%;
|
||||
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.card__textblock {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
67
styles/_media_980.scss
Normal file
67
styles/_media_980.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
@media screen and (max-width: 990px) {
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 78%;
|
||||
margin: 3% 0;
|
||||
|
||||
}
|
||||
|
||||
.card__stats {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card__statblock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 1.6rem;
|
||||
}
|
||||
|
||||
.card__img {
|
||||
order: 1;
|
||||
border-radius: 1rem 1rem 0 0 ;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.card__imgdskt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card__imgmobl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pink {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
order: 2;
|
||||
padding: 10%;
|
||||
|
||||
h1 {
|
||||
font-size: 3.6rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
|
||||
.card__textblock {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
338
styles/styles.css
Normal file
338
styles/styles.css
Normal file
@@ -0,0 +1,338 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #090b1a;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #1b1938;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
max-width: 1140px;
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.card__text {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 6%;
|
||||
}
|
||||
|
||||
.card__text .card__textblock {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.card__text h1 {
|
||||
color: white;
|
||||
font-size: 3.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
line-height: 4.2rem;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.card__text span {
|
||||
color: #aa5cdb;
|
||||
}
|
||||
|
||||
.card__text .card__para {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.card__stats {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.card__statblock {
|
||||
display: fles;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.card__statnum {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.card__stattitle {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Lexend Deca', sans-serif;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.card__img {
|
||||
background-color: #aa5cdb;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.card__imgmobl {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #aa5cdb;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.25;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1146px) {
|
||||
.card__stattitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.card__text .card__textblock {
|
||||
width: 100%;
|
||||
}
|
||||
.card__text h1 {
|
||||
font-size: 3.2rem;
|
||||
line-height: 3.8rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.card__text text {
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 990px) {
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
max-width: 78%;
|
||||
margin: 3% 0;
|
||||
}
|
||||
.card__stats {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.card__statblock {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 1.6rem;
|
||||
}
|
||||
.card__img {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
img {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.card__imgdskt {
|
||||
display: none;
|
||||
}
|
||||
.card__imgmobl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.pink {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.card__text {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
padding: 10%;
|
||||
}
|
||||
.card__text h1 {
|
||||
font-size: 3.6rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
.card__text .card__textblock {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
max-width: 88%;
|
||||
}
|
||||
.card__stats {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card__statblock {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 1.6rem;
|
||||
}
|
||||
.card__img {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
img {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.card__imgdskt {
|
||||
display: none;
|
||||
}
|
||||
.card__imgmobl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.pink {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
}
|
||||
.card__text {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
padding: 10%;
|
||||
}
|
||||
.card__text h1 {
|
||||
font-size: 2.6rem;
|
||||
text-align: center;
|
||||
line-height: 3.6rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.card__text .card__textblock {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
14
styles/styles.css.map
Normal file
14
styles/styles.css.map
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"styles.scss",
|
||||
"_general.scss",
|
||||
"_card.scss",
|
||||
"_media_1050.scss",
|
||||
"_media_980.scss",
|
||||
"_media_375.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "styles.css"
|
||||
}
|
||||
18
styles/styles.scss
Normal file
18
styles/styles.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// Variables
|
||||
// Primary
|
||||
$main-background: hsl(233, 47%, 7%);
|
||||
$card-background: hsl(244, 38%, 16%);
|
||||
$card-accent: hsl(277, 64%, 61%);
|
||||
|
||||
// Neutral
|
||||
$main-heading: hsl(0, 0%, 100%);
|
||||
$main-paragraph: hsla(0, 0%, 100%, 0.75);
|
||||
$stat-heading: hsla(0,0%, 100%, 0.6);
|
||||
|
||||
$font-size: 1.5rem;
|
||||
|
||||
@import "general";
|
||||
@import "card";
|
||||
@import "media_1050";
|
||||
@import "media_980";
|
||||
@import "media_375";
|
||||
Reference in New Issue
Block a user