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>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<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
|
<head>
|
||||||
rel="icon"
|
<meta charset="UTF-8" />
|
||||||
type="image/png"
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
sizes="32x32"
|
<!-- displays site properly based on user's device -->
|
||||||
href="./images/favicon-32x32.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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 👍 -->
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<style>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
.attribution {
|
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
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.
|
<link rel="stylesheet" href="css/style.css">
|
||||||
See what our satisfied customers are saying about our services.
|
|
||||||
|
|
||||||
Rated 5 Stars in Reviews
|
<title>Frontend Mentor | Social proof section</title>
|
||||||
Rated 5 Stars in Report Guru
|
|
||||||
Rated 5 Stars in BestTech
|
|
||||||
|
|
||||||
Colton Smith
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
Verified Buyer
|
<style>
|
||||||
"We needed the same printed design as the one we had ordered a week prior.
|
.attribution {
|
||||||
Not only did they find the original order, but we also received it in time.
|
font-size: 11px;
|
||||||
Excellent!"
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
Irene Roberts
|
.attribution a {
|
||||||
Verified Buyer
|
color: hsl(228, 45%, 44%);
|
||||||
"Customer service is always excellent and very quick turn around. Completely
|
}
|
||||||
delighted with the simplicity of the purchase and the speed of delivery."
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
Anne Wallace
|
<body>
|
||||||
Verified Buyer
|
10,000+ of our users love our products.
|
||||||
"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!"
|
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>
|
||||||
|
|
||||||
<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>
|
</html>
|
||||||
Loading…
Reference in New Issue