set up variables
This commit is contained in:
parent
864a81faaf
commit
869b838a76
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* Design sizes:
|
||||
Desktop: 1440x800
|
||||
Mobile: 375x1530
|
||||
*/
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--col-primary-very-dark-magenta: hsl(300, 43%, 22%);
|
||||
--col-primary-soft-pink: hsl(333, 80%, 67%);
|
||||
--col-neutral-dark-grayish-magenta: hsl(303, 10%, 53%);
|
||||
--col-neutral-light-grayish-magenta: hsl(300, 24%, 96%);
|
||||
--col-neutral-white: hsl(0, 0%, 100%);
|
||||
|
||||
/* Typography */
|
||||
--fs-header: 2rem;
|
||||
--lh-header: 2rem;
|
||||
--ls-header: -1.14286px;
|
||||
--fw-header: 700;
|
||||
|
||||
--fs-body: 0.9375rem;
|
||||
--lh-body: 1.5625rem;
|
||||
--ls-body: -0.5px;
|
||||
--fw-body: 500;
|
||||
|
||||
--fs-rating: 0.8125rem;
|
||||
--lh-rating: 0.9375rem;
|
||||
--fw-rating: 700;
|
||||
|
||||
--fs-name: 0.8125rem;
|
||||
--lh-name: 0.9375rem;
|
||||
--fw-name: 700;
|
||||
|
||||
--fs-buyer: 0.8125rem;
|
||||
--lh-buyer: 0.9375rem;
|
||||
--fw-buyer: 400;
|
||||
|
||||
--fs-quote: 0.8125rem;
|
||||
--lh-quote: 1.375rem;
|
||||
--ls-quote: -0.232143px;
|
||||
--fw-quote: 500;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
:root {
|
||||
/* Typography */
|
||||
--fs-header: 3rem;
|
||||
--lh-header: 3rem;
|
||||
--ls-header: -1.71429px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- displays site properly based on user's device -->
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="./images/favicon-32x32.png"
|
||||
/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- displays site properly based on user's device -->
|
||||
|
||||
<title>Frontend Mentor | Social proof section</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
|
||||
|
||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||
<style>
|
||||
.attribution {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
.attribution a {
|
||||
color: hsl(228, 45%, 44%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
10,000+ of our users love our products.
|
||||
<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=League+Spartan:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
We only provide great products combined with excellent customer service.
|
||||
See what our satisfied customers are saying about our services.
|
||||
|
||||
Rated 5 Stars in Reviews
|
||||
Rated 5 Stars in Report Guru
|
||||
Rated 5 Stars in BestTech
|
||||
|
||||
Colton Smith
|
||||
Verified Buyer
|
||||
"We needed the same printed design as the one we had ordered a week prior.
|
||||
Not only did they find the original order, but we also received it in time.
|
||||
Excellent!"
|
||||
|
||||
Irene Roberts
|
||||
Verified Buyer
|
||||
"Customer service is always excellent and very quick turn around. Completely
|
||||
delighted with the simplicity of the purchase and the speed of delivery."
|
||||
|
||||
Anne Wallace
|
||||
Verified Buyer
|
||||
"Put an order with this company and can only praise them for the very high
|
||||
standard. Will definitely use them again and recommend them to everyone!"
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<div class="attribution">
|
||||
Challenge by
|
||||
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||||
>Frontend Mentor</a
|
||||
>. Coded by <a href="#">Your Name Here</a>.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<title>Frontend Mentor | Social proof section</title>
|
||||
|
||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||
<style>
|
||||
.attribution {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.attribution a {
|
||||
color: hsl(228, 45%, 44%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
10,000+ of our users love our products.
|
||||
|
||||
We only provide great products combined with excellent customer service.
|
||||
See what our satisfied customers are saying about our services.
|
||||
|
||||
Rated 5 Stars in Reviews
|
||||
Rated 5 Stars in Report Guru
|
||||
Rated 5 Stars in BestTech
|
||||
|
||||
Colton Smith
|
||||
Verified Buyer
|
||||
"We needed the same printed design as the one we had ordered a week prior.
|
||||
Not only did they find the original order, but we also received it in time.
|
||||
Excellent!"
|
||||
|
||||
Irene Roberts
|
||||
Verified Buyer
|
||||
"Customer service is always excellent and very quick turn around. Completely
|
||||
delighted with the simplicity of the purchase and the speed of delivery."
|
||||
|
||||
Anne Wallace
|
||||
Verified Buyer
|
||||
"Put an order with this company and can only praise them for the very high
|
||||
standard. Will definitely use them again and recommend them to everyone!"
|
||||
|
||||
<!-- <div class="attribution">
|
||||
Challenge by
|
||||
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your
|
||||
Name Here</a>.
|
||||
</div> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue