finished qr code, fastest I've done a challenge. about 45 minutes
This commit is contained in:
parent
3a6bf65eba
commit
e2de50e1a3
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* design sizing
|
||||
* Desktop: 1440x800
|
||||
* Mobile: 375x667
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--col-primary-dark-blue: hsl(218, 44%, 22%);
|
||||
--col-primary-grayish-blue: hsl(220, 15%, 55%);
|
||||
--col-neutral-white: hsl(0, 0%, 100%);
|
||||
--col-neutral-light-gray: hsl(212, 45%, 89%);
|
||||
|
||||
--col-page-background: var(--col-neutral-light-gray);
|
||||
--col-card-background: var(--col-neutral-white);
|
||||
--col-heading: var(--col-primary-dark-blue);
|
||||
--col-body: var(--col-primary-grayish-blue);
|
||||
|
||||
/* Typography */
|
||||
--fs-heading: 1.375rem;
|
||||
--lh-heading: 1.75rem;
|
||||
--fw-heading: 700;
|
||||
|
||||
--fs-body: 0.9375rem;
|
||||
--lh-body: 1.1875rem;
|
||||
--fw-body: 400;
|
||||
--ls-body: 0.1875px;
|
||||
|
||||
/* Styling */
|
||||
--border-radius--outer: 1.25rem;
|
||||
--border-radius--inner: 0.625rem;
|
||||
/* Positioning */
|
||||
--width-qr-card__body: 26ch;
|
||||
|
||||
/* Other */
|
||||
--img: url(images/image-qr-code.png);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
background-color: var(--col-page-background);
|
||||
}
|
||||
|
||||
.qr-card {
|
||||
font-family: "Outfit", sans-serif;
|
||||
|
||||
background-color: var(--col-card-background);
|
||||
border-radius: var(--border-radius--outer);
|
||||
|
||||
padding: 1rem 1rem 2.5rem 1rem;
|
||||
|
||||
width: 20rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.qr-card__img {
|
||||
border-radius: var(--border-radius--inner);
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qr-card__heading {
|
||||
color: var(--col-heading);
|
||||
font-size: var(--fs-heading);
|
||||
font-weight: var(--fw-heading);
|
||||
line-height: var(--lh-heading);
|
||||
text-align: center;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.qr-card__body {
|
||||
color: var(--col-body);
|
||||
font-size: var(--fs-body);
|
||||
font-weight: var(--fw-body);
|
||||
line-height: var(--lh-body);
|
||||
letter-spacing: var(--ls-body);
|
||||
|
||||
text-align: center;
|
||||
|
||||
width: var(--width-qr-card__body);
|
||||
}
|
||||
|
|
@ -1,28 +1,58 @@
|
|||
<!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 -->
|
||||
<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="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Frontend Mentor | QR code component</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%); }
|
||||
.attribution {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.attribution a {
|
||||
color: hsl(228, 45%, 44%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<section class="qr-card">
|
||||
<picture>
|
||||
<img class="qr-card__img" src="images/image-qr-code.png" alt="QR Code">
|
||||
</picture>
|
||||
<h1 class="qr-card__heading">
|
||||
Improve your front-end skills by building projects
|
||||
|
||||
</h1>
|
||||
<p class="qr-card__body">
|
||||
Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
|
||||
</p>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<!-- <footer>
|
||||
<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>
|
||||
</footer> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue