set up variables

This commit is contained in:
Robert McGovern 2022-10-03 15:01:55 +01:00
parent 864a81faaf
commit 869b838a76
2 changed files with 117 additions and 54 deletions

View File

@ -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;
}
}

View File

@ -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.
<link rel="stylesheet" href="css/style.css">
Rated 5 Stars in Reviews
Rated 5 Stars in Report Guru
Rated 5 Stars in BestTech
<title>Frontend Mentor | Social proof section</title>
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!"
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
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."
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
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!"
<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>
<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>