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

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

@ -1,16 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device --> <!-- displays site properly based on user's device -->
<link <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
rel="icon"
type="image/png" <link rel="preconnect" href="https://fonts.googleapis.com">
sizes="32x32" <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
href="./images/favicon-32x32.png" <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> <title>Frontend Mentor | Social proof section</title>
@ -20,12 +22,14 @@
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
} }
.attribution a { .attribution a {
color: hsl(228, 45%, 44%); color: hsl(228, 45%, 44%);
} }
</style> </style>
</head> </head>
<body>
<body>
10,000+ of our users love our products. 10,000+ of our users love our products.
We only provide great products combined with excellent customer service. We only provide great products combined with excellent customer service.
@ -51,11 +55,11 @@
"Put an order with this company and can only praise them for the very high "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!" standard. Will definitely use them again and recommend them to everyone!"
<div class="attribution"> <!-- <div class="attribution">
Challenge by Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your
>Frontend Mentor</a Name Here</a>.
>. Coded by <a href="#">Your Name Here</a>. </div> -->
</div> </body>
</body>
</html> </html>