tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
projects/FrontendMentor/newbie/social-proof-section/css/style.css
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;
}
}

26
projects/FrontendMentor/newbie/social-proof-section/index.html
View File

@ -1,16 +1,18 @@
<!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"
/>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<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">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Social proof section</title>
@ -20,11 +22,13 @@
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
10,000+ of our users love our products.
@ -51,11 +55,11 @@
"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">
<!-- <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>
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your
Name Here</a>.
</div> -->
</body>
</html>