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

finished, or near finished mobile version of FAQ challenge (yes wrong branch, oops)

This commit is contained in:
Robert McGovern 2022-09-15 01:36:33 +01:00
parent da6a2fd540
commit 5639e33439
2 changed files with 199 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
projects/FrontendMentor/newbie/faq-accordion-card/css/style.css
View File

@ -1,5 +1,5 @@
/*
Info:
/*
Info:
desktop size 1440x768
mobile size 375x768
@ -25,9 +25,16 @@ Info:
--clr-test: rgb(255, 111, 000);
/* Fonts */
--fs-12px: 0.75rem;
--fs-header: 2rem;
--fs-question: 0.8125rem;
--fs-answer: 0.75rem;
--fw-400: 400;
--fw-700: 700;
--lh-header: 2.5rem;
--lh-question: 1rem;
--lh-answer: 1.125rem;
}
*,
@ -37,12 +44,16 @@ Info:
}
html,
body,
main {
body {
/* min-width: 320px; */
min-height: 100vh;
width: 100%;
}
img {
width: 100%;
}
/* Base page styling */
body {
@ -51,12 +62,9 @@ body {
var(--col-violet-soft) 0%,
var(--col-blue-soft) 100%
);
}
main {
display: grid;
align-content: center;
justify-items: center;
place-items: center;
}
.card {
@ -68,28 +76,77 @@ main {
width: 87%;
border-radius: 23px;
background-image: var(--card-image);
max-width: 920px;
}
.card__header {
text-align: center;
font-weight: var(--fw-700);
font-size: 2rem;
line-height: 2.5rem;
font-size: var(--fs-header);
line-height: var(--lh-header);
margin-bottom: 2.375rem;
}
.card__header_thing {
/* position: relative; */
margin-bottom: 40px;
height: 90px;
}
.card__header_image {
position: absolute;
position: relative;
background-size: contain;
content: url(../images/illustration-woman-online-mobile.svg);
/* background-image: url(../images/illustration-woman-online-mobile.svg),
url(../images/bg-pattern-mobile.svg);
background-position: center, bottom center;
background-repeat: no-repeat; */
/* margin: 0 auto; */
width: 237px;
/* width: 237px; */
width: 80%;
height: 180px;
left: calc(50% - calc(237px / 2) - 10px);
top: -20px;
/* left: calc(50% - calc(237px / 2) - 10px); */
/* left: calc(50% - calc(80% / 2) - 10px); */
/* top: calc(50% - calc(80% / 2) - 10px); */
/* : calc(100% - 237px/2); */
/* left: 40px; */
}
.card__header_image.desktop {
display: none;
}
.card__header_image.mobile {
display: contents;
margin: 0 auto;
}
.card__header_image.mobile > img {
/* width: 72.5%; */
}
.woman,
.box,
.background {
position: absolute;
}
.woman {
top: -95px;
left: calc((50% - 118.5px) - 10px);
width: 73%;
position: relative;
}
.background {
left: calc(50% - 118.5px + 15px);
width: 66%;
top: -170px;
position: relative;
}
.card__header_image_shadow {
background-image: url(../images/bg-pattern-mobile.svg);
background-repeat: no-repeat;
@ -97,41 +154,37 @@ main {
border: 1px solid red;
}
@media screen and (min-width: 376px) {
.card {
flex-direction: row;
}
.card__header {
text-align: start;
}
}
.faq {
margin-top: 6.125rem;
/* border: 1px red solid; */
color: var(--col-red-soft);
/* margin: 6.125rem 1.5rem 3rem; */
margin: 0 1.5rem 3rem;
}
/* FAQ Section */
details {
font-size: var(--fs-12px);
font-size: var(--fs-answer);
line-height: 1.125rem;
padding: 1rem 0 1rem 1.5rem;
padding: 1rem 0;
color: var(--col-blue-dark-grayish);
border-bottom: 1px solid var(--col-blue-light-grayish);
border-width: 75%;
}
h1 + details {
padding: 0 0 1rem 0;
}
summary {
font-size: 0.8125rem;
font-size: var(--fs-question);
font-weight: var(--fw-400);
line-height: 1rem;
line-height: var(--lh-question);
color: var(--col-blue-very-dark-grayish);
/* padding: 1rem 1.5rem; */
margin-bottom: 1rem;
/* margin-bottom: 1rem; */
outline: none;
/* border-radius: 0.25rem; */
text-align: left;
@ -147,7 +200,7 @@ summary:hover {
details > summary::after {
position: absolute;
content: url(../images/icon-arrow-down.svg);
right: 20px;
right: 0px;
}
details[open] > summary {
font-weight: var(--fw-700);
@ -161,6 +214,7 @@ details > summary::-webkit-details-marker {
display: none;
}
/* ! add check for prefers motion */
details[open] summary ~ * {
animation: sweep 0.5s ease-in-out;
}
@ -174,3 +228,62 @@ details[open] summary ~ * {
margin-top: 0px;
}
}
.faq__content {
width: 90%;
margin-top: 0.6875rem;
}
@media screen and (min-width: 600px) {
:root {
--fs-question: 0.875rem;
--lh-question: 1.0625rem;
}
.card {
flex-direction: row;
}
.card__header_thing {
display: grid;
align-content: center;
}
.card__header_image {
/* content: url(../images/illustration-woman-online-desktop.svg); */
top: unset;
position: unset;
width: 100%;
height: unset;
position: relative;
margin-bottom: unset;
}
.woman,
.box,
.background {
position: absolute;
}
.card__header_image.mobile {
display: none;
}
.card__header_image.desktop {
display: contents;
}
article {
width: 45%;
}
.faq {
margin-left: 5.4375rem;
}
.faq__content {
width: 95%;
}
}

99
projects/FrontendMentor/newbie/faq-accordion-card/index.html
View File

@ -25,55 +25,64 @@
</head>
<body>
<main>
<div class="card">
<!-- <header class="card__header"> -->
<div class="card__header_thing">
<div class="card__header_image"></div>
<div class="card__header_image_shadow"></div>
<!-- <main> -->
<div class="card">
<!-- <header class="card__header"> -->
<div class="card__header_thing">
<div class="card__header_image desktop">
<img class="woman" src="./images/illustration-woman-online-desktop.svg" alt="">
<img class="box" src="./images/bg-pattern-desktop.svg" alt="">
<img class="background" src="./images/illustration-box-desktop.svg" alt="">
</div>
<!-- </header> -->
<article>
<div class="faq">
<h2 class="card__header">FAQ</h2>
<details>
<summary>How many team members can I invite?</summary>
<div class="faq__content">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</div>
</details>
<details>
<summary>What is the maximum file upload size?</summary>
<div class="faq__content">
No more than 2GB. All files in your account must fit your allotted storage space. </div>
</details>
<details>
<summary>How do I reset my password?</summary>
<div class="faq__content">
Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.
</div>
</details>
<details>
<summary>Can I cancel my subscription?</summary>
<div class="faq__content">
Yes! Send us a message and we’ll process your request no questions asked.
</div>
</details>
<details>
<summary> Do you provide additional support?</summary>
<div class="faq__content">
Chat and email support is available 24/7. Phone lines are open during normal business hours.
</div>
</details>
</div>
</article>
<div class="card__header_image mobile">
<img class="woman" src="./images/illustration-woman-online-mobile.svg" alt="">
<img class="background" src="./images/bg-pattern-mobile.svg" alt="">
</div>
<!-- <div class="card__header_image_shadow"></div> -->
</div>
</main>
<!-- </header> -->
<article>
<div class="faq">
<h1 class="card__header">FAQ</h1>
<details>
<summary>How many team members can I invite?</summary>
<div class="faq__content">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</div>
</details>
<details>
<summary>What is the maximum file upload size?</summary>
<div class="faq__content">
No more than 2GB. All files in your account must fit your allotted storage space. </div>
</details>
<details>
<summary>How do I reset my password?</summary>
<div class="faq__content">
Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.
</div>
</details>
<details>
<summary>Can I cancel my subscription?</summary>
<div class="faq__content">
Yes! Send us a message and we’ll process your request no questions asked.
</div>
</details>
<details>
<summary> Do you provide additional support?</summary>
<div class="faq__content">
Chat and email support is available 24/7. Phone lines are open during normal business hours.
</div>
</details>
</div>
</article>
</div>
<!-- </main> -->
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://tarasis.net">Robert McGovern</a>.
</div> -->
</body>