├── .gitignore ├── .gitmodules ├── .vscode └── settings.json ├── 3columnpreview ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-luxury.svg │ ├── icon-sedans.svg │ └── icon-suvs.svg ├── index.html ├── style-guide.md └── stylesheet.css ├── README.md ├── accordioncard ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-pattern-desktop.svg │ ├── bg-pattern-mobile.svg │ ├── favicon-32x32.png │ ├── icon-arrow-down.svg │ ├── illustration-box-desktop.svg │ ├── illustration-woman-online-desktop.svg │ └── illustration-woman-online-mobile.svg ├── index.html ├── script.js ├── style-guide.md └── stylesheet.css ├── advicegeneratorapp ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-dice.svg │ ├── pattern-divider-desktop.svg │ └── pattern-divider-mobile.svg ├── index.html ├── index.js ├── sass │ ├── _config.scss │ └── _reset.scss ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── articlepreviewcomponent ├── .gitignore ├── README.md ├── design │ ├── desktop-active-state.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-active-state.jpg │ ├── mobile-design.jpg │ ├── mobile.png │ └── mobile_active.png ├── images │ ├── avatar-michelle.jpg │ ├── drawers.jpg │ ├── favicon-32x32.png │ ├── icon-facebook.svg │ ├── icon-pinterest.svg │ ├── icon-share.svg │ └── icon-twitter.svg ├── index.html ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── baseapparelcomingsoon ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-active.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-pattern-desktop.svg │ ├── favicon-32x32.png │ ├── hero-desktop.jpg │ ├── hero-mobile.jpg │ ├── icon-arrow.svg │ ├── icon-error.svg │ └── logo.svg ├── index.html ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── blogrlandingpage ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-menu.jpg │ └── mobile.png ├── images │ ├── bg-pattern-circles.svg │ ├── bg-pattern-intro-desktop.svg │ ├── bg-pattern-intro-mobile.svg │ ├── favicon-32x32.png │ ├── icon-arrow-dark.svg │ ├── icon-arrow-light.svg │ ├── icon-close.svg │ ├── icon-hamburger.svg │ ├── illustration-editor-desktop.svg │ ├── illustration-editor-mobile.svg │ ├── illustration-laptop-desktop.svg │ ├── illustration-laptop-mobile.svg │ ├── illustration-phones.svg │ └── logo.svg ├── index.html ├── index.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── calculatorapp ├── .gitignore ├── README.md ├── _reset.scss ├── design │ ├── active-states-theme-1.jpg │ ├── active-states-theme-2.jpg │ ├── active-states-theme-3.jpg │ ├── desktop-design-theme-1.jpg │ ├── desktop-design-theme-2.jpg │ ├── desktop-design-theme-3.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design-theme-1.jpg │ ├── mobile-design-theme-2.jpg │ ├── mobile-design-theme-3.jpg │ └── mobile.png ├── images │ └── favicon-32x32.png ├── index.html ├── index.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map ├── stylesheet.scss └── theme-toggle.js ├── codingbootcamptestimonials ├── .gitignore ├── README.md ├── data.js ├── design │ ├── desktop-design-slide-1.jpg │ ├── desktop-design-slide-2.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design-slide-1.jpg │ ├── mobile-design-slide-2.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-next.svg │ ├── icon-prev.svg │ ├── image-john.jpg │ ├── image-tanya.jpg │ ├── pattern-bg.svg │ ├── pattern-curve.svg │ └── pattern-quotes.svg ├── index.html ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── expenseschartcomponent ├── .gitignore ├── README.md ├── data.json ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ └── logo.svg ├── index.html ├── index.js ├── reset.css ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── fourcardfeaturesection ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-calculator.svg │ ├── icon-karma.svg │ ├── icon-supervisor.svg │ └── icon-team-builder.svg ├── index.html ├── style-guide.md └── stylesheet.css ├── fylodatastoragecomponent ├── .gitignore ├── .vscode │ └── settings.json ├── README-template.md ├── README.md ├── _reset.scss ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-desktop.png │ ├── bg-mobile.png │ ├── favicon-32x32.png │ ├── icon-document.svg │ ├── icon-folder.svg │ ├── icon-upload.svg │ └── logo.svg ├── index.html ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── huddlelandingpage ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design-375.jpg │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-desktop.svg │ ├── bg-mobile.svg │ ├── favicon-32x32.png │ ├── illustration-mockups.svg │ └── logo.svg ├── index.html ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── index.html ├── interactiveratingcomponent ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop-submitted.png │ ├── desktop-thank-you-state.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-submitted.png │ ├── mobile-thank-you-state.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-star.svg │ └── illustration-thank-you.svg ├── index.html ├── normalize.css ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── introcomponentwithform ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-active.png │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-preview.png │ └── mobile.png ├── images │ ├── bg-intro-desktop.png │ ├── bg-intro-mobile.png │ ├── favicon-32x32.png │ └── icon-error.svg ├── index.html ├── normalize.css ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── introsecdropdownnav-react ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-menu-collapsed.jpg │ ├── mobile-menu-expanded.jpg │ ├── mobile-menu-expanded.png │ └── mobile.png ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.png ├── redirect.js ├── src │ ├── App.jsx │ ├── assets │ │ ├── client-audiophile.svg │ │ ├── client-databiz.svg │ │ ├── client-maker.svg │ │ ├── client-meet.svg │ │ ├── icon-arrow-down.svg │ │ ├── icon-arrow-up.svg │ │ ├── icon-calendar.svg │ │ ├── icon-close-menu.svg │ │ ├── icon-menu.svg │ │ ├── icon-planning.svg │ │ ├── icon-reminders.svg │ │ ├── icon-todo.svg │ │ ├── image-hero-desktop.png │ │ ├── image-hero-mobile.png │ │ ├── logo.svg │ │ └── react.svg │ ├── components │ │ ├── Clients.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ ├── Hero.jsx │ │ ├── Intro.jsx │ │ ├── Landing.jsx │ │ ├── Login.jsx │ │ ├── Logo.jsx │ │ ├── Main.jsx │ │ ├── Menu.jsx │ │ ├── MenuToggle.jsx │ │ ├── Nav.jsx │ │ └── elements │ │ │ ├── Icon.jsx │ │ │ ├── LoginButton.jsx │ │ │ ├── NavButton.jsx │ │ │ └── SubNav.jsx │ ├── css │ │ ├── global.css │ │ └── global.css.map │ ├── helpers │ │ └── navData.js │ ├── index.css │ ├── main.jsx │ └── scss │ │ ├── _blocks.scss │ │ ├── _config.scss │ │ ├── _reset.scss │ │ ├── _utilities.scss │ │ └── global.scss └── vite.config.js ├── introsecdropdownnav ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-menu-collapsed.jpg │ ├── mobile-menu-expanded.jpg │ ├── mobile-menu-expanded.png │ └── mobile.png ├── images │ ├── client-audiophile.svg │ ├── client-databiz.svg │ ├── client-maker.svg │ ├── client-meet.svg │ ├── favicon-32x32.png │ ├── icon-arrow-down.svg │ ├── icon-arrow-up.svg │ ├── icon-calendar.svg │ ├── icon-close-menu.svg │ ├── icon-menu.svg │ ├── icon-planning.svg │ ├── icon-reminders.svg │ ├── icon-todo.svg │ ├── image-hero-desktop.png │ ├── image-hero-mobile.png │ ├── logo.svg │ └── react.svg ├── index.html ├── index.js ├── sass │ ├── _config.scss │ ├── _reset.scss │ └── _utilities.scss ├── style.css ├── style.css.map └── style.scss ├── newshomepage ├── .vscode │ └── settings.json ├── README.md ├── assets │ ├── fonts │ │ ├── Inter-VariableFont_slnt,wght.ttf │ │ ├── README.txt │ │ └── static │ │ │ ├── Inter-Bold.ttf │ │ │ ├── Inter-ExtraBold.ttf │ │ │ └── Inter-Regular.ttf │ └── images │ │ ├── favicon-32x32.png │ │ ├── icon-menu-close.svg │ │ ├── icon-menu.svg │ │ ├── image-gaming-growth.jpg │ │ ├── image-retro-pcs.jpg │ │ ├── image-top-laptops.jpg │ │ ├── image-web-3-desktop.jpg │ │ ├── image-web-3-mobile.jpg │ │ └── logo.svg ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-menu.jpg │ └── mobile.png ├── index.html ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── nftpreviewcard ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-clock.svg │ ├── icon-ethereum.svg │ ├── icon-view.svg │ ├── image-avatar.png │ └── image-equilibrium.jpg ├── index.html ├── style-guide.md ├── style.css ├── style.css.map └── style.scss ├── ordersummary ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-music.svg │ ├── illustration-hero.svg │ ├── pattern-background-desktop.svg │ └── pattern-background-mobile.svg ├── index.html ├── style-guide.md └── stylesheet.css ├── pingcomingsoonpage ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-hover-error-states.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-error-state.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── illustration-dashboard.png │ └── logo.svg ├── index.html ├── normalize.css ├── script.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── pricingcomponentwithtoggle ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design-annually.jpg │ ├── desktop-design-monthly.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design-annually.jpg │ ├── mobile-design-monthly.jpg │ └── mobile.png ├── images │ ├── bg-bottom.svg │ ├── bg-top.svg │ └── favicon-32x32.png ├── index.html ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── productpreviewcardcomponent ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── icon-cart.svg │ ├── image-product-desktop.jpg │ └── image-product-mobile.jpg ├── index.html ├── style-guide.md ├── style.css ├── style.css.map └── style.scss ├── profilecard ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-pattern-bottom.svg │ ├── bg-pattern-card.svg │ ├── bg-pattern-top.svg │ ├── favicon-32x32.png │ └── image-victor.jpg ├── index.html ├── style-guide.md └── stylesheet.css ├── public ├── images │ ├── favicon-32x32.png │ └── frontendmentor.png ├── js │ ├── data.js │ ├── footer.js │ └── script.js └── stylesheet.css ├── singlepricegrid ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ └── favicon-32x32.png ├── index.html ├── style-guide.md └── stylesheet.css ├── socialproofsection ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-pattern-bottom-desktop.svg │ ├── bg-pattern-bottom-mobile.svg │ ├── bg-pattern-top-desktop.svg │ ├── bg-pattern-top-mobile.svg │ ├── favicon-32x32.png │ ├── icon-star.svg │ ├── image-anne.jpg │ ├── image-colton.jpg │ └── image-irene.jpg ├── index.html ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── statspreview ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── favicon-32x32.png │ ├── image-header-desktop.jpg │ └── image-header-mobile.jpg ├── index.html ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── sunnysideagencylandingpage ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ ├── mobile-menu.jpg │ ├── mobile-menu.png │ └── mobile.png ├── images │ ├── desktop │ │ ├── image-gallery-cone.jpg │ │ ├── image-gallery-milkbottles.jpg │ │ ├── image-gallery-orange.jpg │ │ ├── image-gallery-sugarcubes.jpg │ │ ├── image-graphic-design.jpg │ │ ├── image-header.jpg │ │ ├── image-photography.jpg │ │ ├── image-stand-out.jpg │ │ └── image-transform.jpg │ ├── favicon-32x32.png │ ├── icon-arrow-down.svg │ ├── icon-facebook.svg │ ├── icon-hamburger.svg │ ├── icon-instagram.svg │ ├── icon-pinterest.svg │ ├── icon-twitter.svg │ ├── image-emily.jpg │ ├── image-jennie.jpg │ ├── image-thomas.jpg │ ├── logo.svg │ └── mobile │ │ ├── image-gallery-cone.jpg │ │ ├── image-gallery-milkbottles.jpg │ │ ├── image-gallery-orange.jpg │ │ ├── image-gallery-sugarcubes.jpg │ │ ├── image-graphic-design.jpg │ │ ├── image-header.jpg │ │ ├── image-photography.jpg │ │ ├── image-stand-out.jpg │ │ └── image-transform.jpg ├── index.html ├── index.js ├── reset.css ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss ├── testimonialsgridsection ├── .gitignore ├── .vscode │ └── settings.json ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── images │ ├── bg-pattern-quotation.svg │ ├── favicon-32x32.png │ ├── image-daniel.jpg │ ├── image-jeanette.jpg │ ├── image-jonathan.jpg │ ├── image-kira.jpg │ └── image-patrick.jpg ├── index.html ├── style-guide.md ├── style.css ├── style.css.map └── style.scss ├── timetrackingdashboard ├── .gitignore ├── README.md ├── data.json ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── desktop.png │ ├── mobile-design.jpg │ └── mobile.png ├── helpers.js ├── images │ ├── favicon-32x32.png │ ├── icon-ellipsis.svg │ ├── icon-exercise.svg │ ├── icon-play.svg │ ├── icon-self-care.svg │ ├── icon-social.svg │ ├── icon-study.svg │ ├── icon-work.svg │ └── image-jeremy.png ├── index.html ├── index.js ├── style-guide.md ├── stylesheet.css ├── stylesheet.css.map └── stylesheet.scss └── tipcalculatorapp ├── .gitignore ├── README.md ├── design ├── active-states.jpg ├── desktop-completed.png ├── desktop-design-completed.jpg ├── desktop-design-empty.jpg ├── desktop-preview.jpg ├── desktop.png ├── mobile-design.jpg └── mobile.png ├── images ├── favicon-32x32.png ├── icon-dollar.svg ├── icon-person.svg └── logo.svg ├── index.html ├── index.js ├── style-guide.md ├── style.css ├── style.css.map └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore 17 | 18 | **/*Zone.Identifier 19 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "introsecdropdownnav-react"] 2 | path = introsecdropdownnav-react 3 | url = https://github.com/elaineleung/fem-introsecdropdownnav.git 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /3columnpreview/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/active-states.jpg -------------------------------------------------------------------------------- /3columnpreview/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/desktop-design.jpg -------------------------------------------------------------------------------- /3columnpreview/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/desktop-preview.jpg -------------------------------------------------------------------------------- /3columnpreview/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/desktop.png -------------------------------------------------------------------------------- /3columnpreview/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/mobile-design.jpg -------------------------------------------------------------------------------- /3columnpreview/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/design/mobile.png -------------------------------------------------------------------------------- /3columnpreview/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/3columnpreview/images/favicon-32x32.png -------------------------------------------------------------------------------- /3columnpreview/images/icon-luxury.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3columnpreview/images/icon-sedans.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3columnpreview/images/icon-suvs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3columnpreview/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | Bright orange: hsl(31, 77%, 52%) 15 | --clr-orange-bright 16 | 17 | Dark cyan: hsl(184, 100%, 22%) 18 | --clr-cyan-dark 19 | 20 | Very dark cyan: hsl(179, 100%, 13%) 21 | --clr-cyan-xdark 22 | 23 | ### Neutral 24 | 25 | Transparent white (paragraphs): hsla(0, 0%, 100%, 0.75) 26 | --clr-white-trsp 27 | 28 | Very light gray (background, headings, buttons): hsl(0, 0%, 95%) 29 | -clr-gray-xlight 30 | 31 | ## Typography 32 | 33 | ### Body Copy 34 | 35 | - Font size: 15px 36 | 37 | ### Font 38 | 39 | - Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca) 40 | - Weights: 400 41 | 42 | - Family: [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display) 43 | - Weights: 700 44 | -------------------------------------------------------------------------------- /accordioncard/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | 17 | .prettierignore -------------------------------------------------------------------------------- /accordioncard/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/active-states.jpg -------------------------------------------------------------------------------- /accordioncard/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/desktop-design.jpg -------------------------------------------------------------------------------- /accordioncard/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/desktop-preview.jpg -------------------------------------------------------------------------------- /accordioncard/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/desktop.png -------------------------------------------------------------------------------- /accordioncard/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/mobile-design.jpg -------------------------------------------------------------------------------- /accordioncard/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/design/mobile.png -------------------------------------------------------------------------------- /accordioncard/images/bg-pattern-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /accordioncard/images/bg-pattern-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /accordioncard/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/accordioncard/images/favicon-32x32.png -------------------------------------------------------------------------------- /accordioncard/images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /accordioncard/script.js: -------------------------------------------------------------------------------- 1 | // Click on down arrow 2 | // Ada display: block to answer 3 | // Make arrow point up 4 | // Make question bold and change font color 5 | 6 | const faqs = document.querySelectorAll(".faq") 7 | 8 | faqs.forEach( faqEl => { 9 | const questionEl = faqEl.querySelector('.question') 10 | questionEl.addEventListener("toggle", () => { 11 | if (faqEl.open === false) { 12 | faqEl.open = true 13 | } else { 14 | faqEl.open = false 15 | } 16 | 17 | // let open = faqEl.open 18 | // faqEl.open = !open 19 | console.log(faqEl.open) 20 | }) 21 | }) -------------------------------------------------------------------------------- /accordioncard/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | #### Text 15 | 16 | - Very dark desaturated blue: hsl(238, 29%, 16%) 17 | --clr-blue-xdesat 18 | - Soft red: hsl(14, 88%, 65%) 19 | --clr-red-soft 20 | 21 | #### Gradient 22 | 23 | Background gradient: 24 | 25 | - Soft violet: hsl(273, 75%, 66%) 26 | --clr-violet-soft 27 | - Soft blue: hsl(240, 73%, 65%) 28 | --clr-blue-soft 29 | 30 | ### Neutral 31 | 32 | #### Text 33 | 34 | - Very dark grayish blue: hsl(237, 12%, 33%) 35 | --clr-bluegray-xdark 36 | - Dark grayish blue: hsl(240, 6%, 50%) 37 | --clr-bluegray-dark 38 | 39 | #### Dividers 40 | 41 | - Light grayish blue: hsl(240, 5%, 91%) 42 | 43 | ## Typography 44 | 45 | ### Body Copy 46 | 47 | - Font size: 12px 48 | 49 | ### Font 50 | 51 | - Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans) 52 | - Weights: 400, 700 53 | -------------------------------------------------------------------------------- /advicegeneratorapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /advicegeneratorapp/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/active-states.jpg -------------------------------------------------------------------------------- /advicegeneratorapp/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/desktop-design.jpg -------------------------------------------------------------------------------- /advicegeneratorapp/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/desktop-preview.jpg -------------------------------------------------------------------------------- /advicegeneratorapp/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/desktop.png -------------------------------------------------------------------------------- /advicegeneratorapp/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/mobile-design.jpg -------------------------------------------------------------------------------- /advicegeneratorapp/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/design/mobile.png -------------------------------------------------------------------------------- /advicegeneratorapp/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/advicegeneratorapp/images/favicon-32x32.png -------------------------------------------------------------------------------- /advicegeneratorapp/images/icon-dice.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /advicegeneratorapp/images/pattern-divider-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /advicegeneratorapp/images/pattern-divider-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /advicegeneratorapp/sass/_config.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --clr-white: hsl(0, 0%, 100%); 3 | --clr-bg: hsl(220, 22%, 16%); 4 | --clr-blue-grayish: hsl(217, 19%, 38%); 5 | --clr-blue-darkgrayish: hsl(218, 20%, 24%); 6 | 7 | --clr-cyan-light: hsl(193, 38%, 86%); 8 | --clr-green-neon: hsl(150, 100%, 66%); 9 | 10 | --clr-accent: hsl(346, 84%, 68%); 11 | 12 | --fs-body: 18px; 13 | --fs-p: 1rem; 14 | --fs-h1: 0.6rem; 15 | --fs-quote: 1.3rem; 16 | --fs-xsmall: 0.75rem; 17 | 18 | --lh-body: 1.5; 19 | --lh-p: 1.5; 20 | --lh-quote: 1.42; 21 | 22 | --ls-body: 0px; 23 | --ls-h1: 0.34em; 24 | 25 | --ff-primary: Manrope, Arial, sans-serif; 26 | --debug: 1px solid blue; 27 | } 28 | 29 | @media (min-width: 780px) { 30 | :root { 31 | --fs-body: 18px; 32 | --fs-p: 1rem; 33 | --fs-h1: 0.7rem; 34 | --fs-quote: 1.52rem; 35 | --fs-xsmall: 0.875rem; 36 | 37 | --lh-body: 1.5; 38 | --lh-p: 1.5; 39 | --lh-quote: 1.38; 40 | 41 | --ls-body: 0px; 42 | --ls-h1: 0.34em; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /advicegeneratorapp/sass/_reset.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | * { 8 | font: inherit; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | html:focus-within { 14 | scroll-behavior: smooth; 15 | } 16 | 17 | html, 18 | body { 19 | height: 100%; 20 | } 21 | 22 | body { 23 | text-rendering: optimizeSpeed; 24 | line-height: var(--lh-body); 25 | } 26 | 27 | img, 28 | picture, 29 | video, 30 | canvas, 31 | svg { 32 | display: block; 33 | max-width: 100%; 34 | } 35 | 36 | p, 37 | h1, 38 | h2, 39 | h3, 40 | h4, 41 | h5, 42 | h6 { 43 | overflow-wrap: break-word; 44 | } 45 | 46 | 47 | button, 48 | button:focus { 49 | border: 0; 50 | outline: 0; 51 | } 52 | 53 | -------------------------------------------------------------------------------- /advicegeneratorapp/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Light Cyan: hsl(193, 38%, 86%) 15 | - Neon Green: hsl(150, 100%, 66%) 16 | 17 | ### Neutral 18 | 19 | - Grayish Blue: hsl(217, 19%, 38%) 20 | - Dark Grayish Blue: hsl(217, 19%, 24%) 21 | - Dark Blue: hsl(218, 23%, 16%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size (quote): 28px 28 | 29 | ### Font 30 | 31 | - Family: [Manrope](https://fonts.google.com/specimen/Manrope) 32 | - Weights: 800 33 | -------------------------------------------------------------------------------- /articlepreviewcomponent/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /articlepreviewcomponent/design/desktop-active-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/desktop-active-state.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/desktop-design.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/desktop-preview.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/desktop.png -------------------------------------------------------------------------------- /articlepreviewcomponent/design/mobile-active-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/mobile-active-state.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/mobile-design.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/mobile.png -------------------------------------------------------------------------------- /articlepreviewcomponent/design/mobile_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/design/mobile_active.png -------------------------------------------------------------------------------- /articlepreviewcomponent/images/avatar-michelle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/images/avatar-michelle.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/images/drawers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/images/drawers.jpg -------------------------------------------------------------------------------- /articlepreviewcomponent/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/articlepreviewcomponent/images/favicon-32x32.png -------------------------------------------------------------------------------- /articlepreviewcomponent/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /articlepreviewcomponent/images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /articlepreviewcomponent/images/icon-share.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /articlepreviewcomponent/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /articlepreviewcomponent/script.js: -------------------------------------------------------------------------------- 1 | const socialEl = document.getElementById("socialEl") 2 | const shareEl = document.getElementById("shareEl") 3 | 4 | shareEl.addEventListener("click", () => { 5 | socialEl.classList.toggle("toggle") 6 | }) -------------------------------------------------------------------------------- /articlepreviewcomponent/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | - Very Dark Grayish Blue: hsl(217, 19%, 35%) 13 | --clr-grayblue-xdark 14 | 15 | - Desaturated Dark Blue: hsl(214, 17%, 51%) 16 | --clr-blue-desatdark 17 | 18 | - Grayish Blue: hsl(212, 23%, 69%) 19 | --clr-grayblue 20 | 21 | - Light Grayish Blue: hsl(210, 46%, 95%) 22 | --clr-grayblue-light 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size: 13px 29 | 30 | ### Headings 31 | 32 | - Family: [Manrope](https://fonts.google.com/specimen/Manrope) 33 | - Weights: 500, 700 34 | 35 | ## Icons 36 | 37 | We provide SVGs for the social icons. But please feel free to use a font icon library if you like. Some suggestions can be found below: 38 | 39 | - [Font Awesome](https://fontawesome.com) 40 | - [IcoMoon](https://icomoon.io) 41 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /baseapparelcomingsoon/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/active-states.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/desktop-design.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/desktop-preview.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/desktop.png -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/mobile-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/mobile-active.png -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/mobile-design.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/design/mobile.png -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/bg-pattern-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/images/favicon-32x32.png -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/hero-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/images/hero-desktop.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/hero-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/baseapparelcomingsoon/images/hero-mobile.jpg -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /baseapparelcomingsoon/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /baseapparelcomingsoon/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Desaturated Red: hsl(0, 36%, 70%) 15 | --clr-red-desat 16 | 17 | - Soft Red: hsl(0, 93%, 68%) 18 | --clr-red-soft 19 | 20 | ### Neutral 21 | 22 | - Dark Grayish Red: hsl(0, 6%, 24%) 23 | --clr-grayred-dark 24 | 25 | ### Gradients 26 | 27 | background 28 | - Linear, 135deg, from hsl(0, 0%, 100%), to hsl(0, 100%, 98%) 29 | 30 | button 31 | - Linear, 135deg, from hsl(0, 80%, 86%), to hsl(0, 74%, 74%) 32 | 33 | ## Typography 34 | 35 | ### Body Copy 36 | 37 | - Font size: 16px 38 | 39 | ### Font 40 | 41 | - Family: [Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans) 42 | - Weights: 300, 400, 600 43 | -------------------------------------------------------------------------------- /blogrlandingpage/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /blogrlandingpage/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/active-states.jpg -------------------------------------------------------------------------------- /blogrlandingpage/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/desktop-design.jpg -------------------------------------------------------------------------------- /blogrlandingpage/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/desktop-preview.jpg -------------------------------------------------------------------------------- /blogrlandingpage/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/desktop.png -------------------------------------------------------------------------------- /blogrlandingpage/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/mobile-design.jpg -------------------------------------------------------------------------------- /blogrlandingpage/design/mobile-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/mobile-menu.jpg -------------------------------------------------------------------------------- /blogrlandingpage/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/design/mobile.png -------------------------------------------------------------------------------- /blogrlandingpage/images/bg-pattern-circles.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/bg-pattern-intro-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/bg-pattern-intro-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/blogrlandingpage/images/favicon-32x32.png -------------------------------------------------------------------------------- /blogrlandingpage/images/icon-arrow-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/icon-arrow-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /blogrlandingpage/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Light red (CTA text): hsl(356, 100%, 66%) 15 | - Very light red (CTA hover background): hsl(355, 100%, 74%) 16 | - Very dark blue (headings): hsl(208, 49%, 24%) 17 | 18 | ### Neutral 19 | 20 | - White (text): hsl(0, 0%, 100%) 21 | - Grayish blue (footer text): hsl(240, 2%, 79%) 22 | - Very dark grayish blue (body copy): hsl(207, 13%, 34%) 23 | - Very dark black blue (footer background): hsl(240, 10%, 16%) 24 | 25 | ### Gradient 26 | 27 | Background gradient - Intro/CTA mobile nav: 28 | 29 | - Very light red: hsl(13, 100%, 72%) 30 | - Light red: hsl(353, 100%, 62%) 31 | 32 | Background gradient - body: 33 | 34 | - Very dark gray blue: hsl(237, 17%, 21%) 35 | - Very dark desaturated blue: hsl(237, 23%, 32%) 36 | 37 | ## Typography 38 | 39 | ### Body Copy 40 | 41 | - Font size: 16px 42 | 43 | ### Fonts 44 | 45 | - Family: [Overpass](https://fonts.google.com/specimen/Overpass?preview.text_type=custom) 46 | - Weights: 300, 600 47 | 48 | - Family: [Ubuntu](https://fonts.google.com/specimen/Ubuntu?preview.text_type=custom) 49 | - Weights: 400, 500, 700 50 | -------------------------------------------------------------------------------- /calculatorapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /calculatorapp/design/active-states-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/active-states-theme-1.jpg -------------------------------------------------------------------------------- /calculatorapp/design/active-states-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/active-states-theme-2.jpg -------------------------------------------------------------------------------- /calculatorapp/design/active-states-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/active-states-theme-3.jpg -------------------------------------------------------------------------------- /calculatorapp/design/desktop-design-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/desktop-design-theme-1.jpg -------------------------------------------------------------------------------- /calculatorapp/design/desktop-design-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/desktop-design-theme-2.jpg -------------------------------------------------------------------------------- /calculatorapp/design/desktop-design-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/desktop-design-theme-3.jpg -------------------------------------------------------------------------------- /calculatorapp/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/desktop-preview.jpg -------------------------------------------------------------------------------- /calculatorapp/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/desktop.png -------------------------------------------------------------------------------- /calculatorapp/design/mobile-design-theme-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/mobile-design-theme-1.jpg -------------------------------------------------------------------------------- /calculatorapp/design/mobile-design-theme-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/mobile-design-theme-2.jpg -------------------------------------------------------------------------------- /calculatorapp/design/mobile-design-theme-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/mobile-design-theme-3.jpg -------------------------------------------------------------------------------- /calculatorapp/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/design/mobile.png -------------------------------------------------------------------------------- /calculatorapp/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/calculatorapp/images/favicon-32x32.png -------------------------------------------------------------------------------- /calculatorapp/theme-toggle.js: -------------------------------------------------------------------------------- 1 | const storageKey = 'theme-preference' 2 | const theme = { 3 | value: getColorPreference(), 4 | } 5 | 6 | function getColorPreference () { 7 | if(localStorage.getItem(storageKey)) 8 | return localStorage.getItem(storageKey) 9 | else 10 | return window.matchMedia('(prefers-color-scheme: dark)').matches 11 | ? 'dark' 12 | : 'light' 13 | } 14 | 15 | function setPreference () { 16 | localStorage.setItem(storageKey, theme.value) 17 | reflectPreference() 18 | } 19 | 20 | function reflectPreference() { 21 | document.firstElementChild.setAttribute("data-theme", theme.value) 22 | } 23 | reflectPreference() 24 | 25 | window.onload = () => { 26 | reflectPreference() 27 | document.querySelector(".switch").addEventListener("change", (event) => { 28 | theme.value = event.target.value 29 | setPreference() 30 | }) 31 | } 32 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/data.js: -------------------------------------------------------------------------------- 1 | export const data = [ 2 | { 3 | name: "Tanya Sinclair", 4 | title: "UX Engineer", 5 | quote: 6 | "I’ve been interested in coding for a while but never taken the jump, until now. I couldn’t recommend this course enough. I’m now in the job of my dreams and so excited about the future.", 7 | src: "./images/image-tanya.jpg", 8 | }, 9 | { 10 | name: "John Tarkpor", 11 | title: "Junior Front-end Developer", 12 | quote: 13 | "If you want to lay the best foundation possible I’d recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer.", 14 | src: "./images/image-john.jpg", 15 | }, 16 | ]; 17 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/desktop-design-slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/desktop-design-slide-1.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/desktop-design-slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/desktop-design-slide-2.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/desktop-preview.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/desktop.png -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/mobile-design-slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/mobile-design-slide-1.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/mobile-design-slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/mobile-design-slide-2.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/design/mobile.png -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/images/favicon-32x32.png -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/icon-next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/icon-prev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/image-john.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/images/image-john.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/image-tanya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/codingbootcamptestimonials/images/image-tanya.jpg -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/pattern-curve.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/images/pattern-quotes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /codingbootcamptestimonials/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark Blue: hsl(240, 38%, 20%) 15 | - Grayish Blue: hsl(240, 18%, 77%) 16 | 17 | ## Typography 18 | 19 | ### Body Copy 20 | 21 | - Font size: 32px 22 | 23 | ### Font 24 | 25 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 26 | - Weights: 300, 500, 700 -------------------------------------------------------------------------------- /expenseschartcomponent/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /expenseschartcomponent/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "day": "mon", 4 | "amount": 17.45 5 | }, 6 | { 7 | "day": "tue", 8 | "amount": 34.91 9 | }, 10 | { 11 | "day": "wed", 12 | "amount": 52.36 13 | }, 14 | { 15 | "day": "thu", 16 | "amount": 31.07 17 | }, 18 | { 19 | "day": "fri", 20 | "amount": 23.39 21 | }, 22 | { 23 | "day": "sat", 24 | "amount": 43.28 25 | }, 26 | { 27 | "day": "sun", 28 | "amount": 25.48 29 | } 30 | ] -------------------------------------------------------------------------------- /expenseschartcomponent/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/active-states.jpg -------------------------------------------------------------------------------- /expenseschartcomponent/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/desktop-design.jpg -------------------------------------------------------------------------------- /expenseschartcomponent/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/desktop-preview.jpg -------------------------------------------------------------------------------- /expenseschartcomponent/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/desktop.png -------------------------------------------------------------------------------- /expenseschartcomponent/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/mobile-design.jpg -------------------------------------------------------------------------------- /expenseschartcomponent/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/design/mobile.png -------------------------------------------------------------------------------- /expenseschartcomponent/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/expenseschartcomponent/images/favicon-32x32.png -------------------------------------------------------------------------------- /expenseschartcomponent/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /expenseschartcomponent/index.js: -------------------------------------------------------------------------------- 1 | 2 | getData(); 3 | 4 | function getData() { 5 | fetch("./data.json") 6 | .then((response) => { 7 | return response.json(); 8 | }) 9 | .then((data) => { 10 | renderData(data); 11 | }) 12 | .catch((error) => console.log(error)); 13 | } 14 | 15 | function renderData(data) { 16 | const daysEl = document.querySelectorAll(".bars__day"); 17 | 18 | data.forEach((info, idx) => { 19 | const dayEl = Array.from(daysEl)[idx]; 20 | const currentDay = new Date().getDay(); 21 | 22 | dayEl.textContent = ""; 23 | const barHTML = ` 24 |
25 |
$${info.amount}
26 |
${info.day}
27 | ` 28 | dayEl.insertAdjacentHTML("afterbegin", barHTML) 29 | 30 | const barDiv = dayEl.querySelector(".bars__day-bar") 31 | 32 | if (idx !== 6) { 33 | idx + 1 === currentDay && barDiv.classList.add("highlight"); 34 | } else { 35 | currentDay === 0 && barDiv.classList.add("highlight"); 36 | } 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /expenseschartcomponent/reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | 1. Use a more-intuitive box-sizing model. 3 | */ 4 | *, *::before, *::after { 5 | box-sizing: border-box; 6 | } 7 | /* 8 | 2. Remove default margin 9 | */ 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | font: inherit; 14 | } 15 | /* 16 | 3. Allow percentage-based heights in the application 17 | */ 18 | html, body { 19 | height: 100%; 20 | } 21 | /* 22 | Typographic tweaks! 23 | 4. Add accessible line-height 24 | 5. Improve text rendering 25 | */ 26 | body { 27 | line-height: 1.5; 28 | -webkit-font-smoothing: antialiased; 29 | } 30 | /* 31 | 6. Improve media defaults 32 | */ 33 | img, picture, video, canvas, svg { 34 | display: block; 35 | max-width: 100%; 36 | } 37 | /* 38 | 7. Remove built-in form typography styles 39 | */ 40 | input, button, textarea, select { 41 | font: inherit; 42 | } 43 | /* 44 | 8. Avoid text overflows 45 | */ 46 | p, h1, h2, h3, h4, h5, h6 { 47 | overflow-wrap: break-word; 48 | } 49 | /* 50 | 9. Create a root stacking context 51 | */ 52 | #root, #__next { 53 | isolation: isolate; 54 | } -------------------------------------------------------------------------------- /expenseschartcomponent/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Soft red: hsl(10, 79%, 65%) 15 | - Cyan: hsl(186, 34%, 60%) 16 | 17 | ### Neutral 18 | 19 | - Dark brown: hsl(25, 47%, 15%) 20 | - Medium brown: hsl(28, 10%, 53%) 21 | - Cream: hsl(27, 66%, 92%) 22 | - Very pale orange: hsl(33, 100%, 98%) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size: 18px 29 | 30 | ### Font 31 | 32 | - Family: [DM Sans](https://fonts.google.com/specimen/DM+Sans) 33 | - Weights: 400, 700 34 | -------------------------------------------------------------------------------- /fourcardfeaturesection/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/design/desktop-design.jpg -------------------------------------------------------------------------------- /fourcardfeaturesection/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/design/desktop-preview.jpg -------------------------------------------------------------------------------- /fourcardfeaturesection/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/design/desktop.png -------------------------------------------------------------------------------- /fourcardfeaturesection/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/design/mobile-design.jpg -------------------------------------------------------------------------------- /fourcardfeaturesection/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/design/mobile.png -------------------------------------------------------------------------------- /fourcardfeaturesection/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fourcardfeaturesection/images/favicon-32x32.png -------------------------------------------------------------------------------- /fourcardfeaturesection/images/icon-calculator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fourcardfeaturesection/images/icon-team-builder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fourcardfeaturesection/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Red: hsl(0, 78%, 62%) 15 | - Cyan: hsl(180, 62%, 55%) 16 | - Orange: hsl(34, 97%, 64%) 17 | - Blue: hsl(212, 86%, 64%) 18 | 19 | ### Neutral 20 | 21 | - Very Dark Blue: hsl(234, 12%, 34%) 22 | - Grayish Blue: hsl(229, 6%, 66%) 23 | - Very Light Gray: hsl(0, 0%, 98%) 24 | 25 | ## Typography 26 | 27 | ### Body Copy 28 | 29 | - Font size: 15px 30 | 31 | ### Fonts 32 | 33 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 34 | - Weights: 200, 400, 600 35 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /fylodatastoragecomponent/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/design/desktop-design.jpg -------------------------------------------------------------------------------- /fylodatastoragecomponent/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/design/desktop-preview.jpg -------------------------------------------------------------------------------- /fylodatastoragecomponent/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/design/mobile-design.jpg -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/bg-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/images/bg-desktop.png -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/bg-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/images/bg-mobile.png -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/fylodatastoragecomponent/images/favicon-32x32.png -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/icon-document.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/icon-folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/images/icon-upload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Gradient: hsl(6, 100%, 80%) to hsl(335, 100%, 65%) 15 | 16 | ### Neutral 17 | 18 | - Pale Blue: hsl(243, 100%, 93%) 19 | - Grayish Blue: hsl(229, 7%, 55%) 20 | - Dark Blue: hsl(228, 56%, 26%) 21 | - Very Dark Blue: hsl(229, 57%, 11%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size: 14px 28 | 29 | ### Font 30 | 31 | - Family: [Raleway](https://fonts.google.com/specimen/Raleway) 32 | - Weights: 400, 700 33 | -------------------------------------------------------------------------------- /fylodatastoragecomponent/stylesheet.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["_reset.scss","stylesheet.css","stylesheet.scss"],"names":[],"mappings":"AAAA;;;EAGE,sBAAA;ACCF;;ADCA;;CAAA;AAGA;EACE,SAAA;EACA,UAAA;EACA,aAAA;ACEF;;ADCA,2GAAA;AACA;;EAEE,gBAAA;ACEF;;ADCA,2BAAA;AACA;EACE,uBAAA;ACEF;;ADCA,2BAAA;AACA;;EAEE,YAAA;ACEF;;ADCA;EACE,eAAA;ACEF;;ADCA;EACE,6BAAA;EACA,2BAAA;ACEF;;ADCA,0DAAA;AAEA;EACE,iCAAA;UAAA,8BAAA;ACCF;;ADEA,oCAAA;AAEA;;;;;EAKE,cAAA;EACA,eAAA;ACAF;;ADGA,yBAAA;AACA;;;;;;;EAOE,yBAAA;ACAF;;ADGA,gGAAA;AACA;EACE;IACE,qBAAA;ECAF;EDGA;;;IAGE,qCAAA;IACA,uCAAA;IACA,sCAAA;IACA,gCAAA;ECDF;AACF;AC9EA;EACE,mCAAA;EACA,iCAAA;EACA,kCAAA;EACA,kCAAA;EAEA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,cAAA;EACA,iBAAA;EAEA,wBAAA;EAEA,mCAAA;AD6EF;;ACxEA;EACE,SAAA;EACA,mBAAA;EACA,YAAA;EACA,SAAA;EACA,gBAAA;EACA,UAAA;EACA,kBAAA;EACA,UAAA;EACA,mBAAA;AD2EF;;ACvEA;EACE,8BAAA;EACA,yBAAA;EACA,0BAAA;EACA,qCAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,2BAAA;EACA,+CAAA;EACA,4BAAA;EACA,sBAAA;AD0EF;;ACtEA;EACE,kBAAA;ADyEF;;ACtEA;EACE;IACE,sBAAA;EDyEF;ECvEA;IACE,gDAAA;IACA,4BAAA;IACA,wBAAA;IACA,kBAAA;IACA,aAAA;EDyEF;AACF","file":"stylesheet.css"} -------------------------------------------------------------------------------- /huddlelandingpage/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /huddlelandingpage/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/active-states.jpg -------------------------------------------------------------------------------- /huddlelandingpage/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/desktop-design.jpg -------------------------------------------------------------------------------- /huddlelandingpage/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/desktop-preview.jpg -------------------------------------------------------------------------------- /huddlelandingpage/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/desktop.png -------------------------------------------------------------------------------- /huddlelandingpage/design/mobile-design-375.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/mobile-design-375.jpg -------------------------------------------------------------------------------- /huddlelandingpage/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/mobile-design.jpg -------------------------------------------------------------------------------- /huddlelandingpage/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/design/mobile.png -------------------------------------------------------------------------------- /huddlelandingpage/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/huddlelandingpage/images/favicon-32x32.png -------------------------------------------------------------------------------- /huddlelandingpage/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Violet: hsl(257, 40%, 49%) 15 | - Soft Magenta: hsl(300, 69%, 71%) 16 | 17 | ## Typography 18 | 19 | ### Headings 20 | 21 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 22 | - Weights: 400, 600 23 | 24 | ### Body 25 | 26 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 27 | - Weights: 400 28 | 29 | ## Icons 30 | 31 | For the social icons, you can use a font icon library. Some suggestions can be found below: 32 | 33 | - [Font Awesome](https://fontawesome.com/) 34 | - [IcoMoon](https://icomoon.io/) 35 | - [Ionicons](https://ionicons.com/) 36 | -------------------------------------------------------------------------------- /interactiveratingcomponent/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/active-states.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/desktop-design.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/desktop-preview.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/desktop-submitted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/desktop-submitted.png -------------------------------------------------------------------------------- /interactiveratingcomponent/design/desktop-thank-you-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/desktop-thank-you-state.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/desktop.png -------------------------------------------------------------------------------- /interactiveratingcomponent/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/mobile-design.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/mobile-submitted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/mobile-submitted.png -------------------------------------------------------------------------------- /interactiveratingcomponent/design/mobile-thank-you-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/mobile-thank-you-state.jpg -------------------------------------------------------------------------------- /interactiveratingcomponent/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/design/mobile.png -------------------------------------------------------------------------------- /interactiveratingcomponent/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/interactiveratingcomponent/images/favicon-32x32.png -------------------------------------------------------------------------------- /interactiveratingcomponent/images/icon-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /interactiveratingcomponent/script.js: -------------------------------------------------------------------------------- 1 | const cardEl = document.getElementById("cardEl"); 2 | const formEl = document.getElementById("formEl"); 3 | const scoreBtns = document.querySelectorAll("[type='radio']"); 4 | const submitBtn = document.querySelector("button.submit"); 5 | let selected; 6 | 7 | window.addEventListener("load", () => { 8 | formEl.reset(); 9 | submitBtn.disabled = true 10 | }); 11 | 12 | scoreBtns.forEach((btn) => { 13 | btn.addEventListener("click", () => { 14 | submitBtn.disabled = false 15 | selected = btn.value; 16 | }); 17 | }); 18 | 19 | formEl.addEventListener("submit", (event) => { 20 | event.preventDefault(); 21 | if (selected != null) { 22 | const src = "./images/illustration-thank-you.svg" 23 | const titleText = "Thank you!" 24 | const bodyText = "We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!" 25 | 26 | const thankyouHTML = ` 27 |
28 |
29 | 30 |
You selected ${selected} out of 5
31 |
32 |
33 |

${titleText}

34 |

${bodyText}

35 |
36 |
37 | `; 38 | 39 | cardEl.textContent = "" 40 | cardEl.insertAdjacentHTML("afterbegin", thankyouHTML) 41 | } 42 | }); 43 | -------------------------------------------------------------------------------- /interactiveratingcomponent/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Orange: hsl(25, 97%, 53%) 15 | 16 | ### Neutral 17 | 18 | - White: hsl(0, 0%, 100%) 19 | - Light Grey: hsl(217, 12%, 63%) 20 | - Medium Grey: hsl(216, 12%, 54%) 21 | - Dark Blue: hsl(213, 19%, 18%) 22 | - Very Dark Blue: hsl(216, 12%, 8%) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size (paragraph): 15px 29 | 30 | ### Font 31 | 32 | - Family: [Overpass](https://fonts.google.com/specimen/Overpass) 33 | - Weights: 400, 700 34 | -------------------------------------------------------------------------------- /introcomponentwithform/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /introcomponentwithform/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/active-states.jpg -------------------------------------------------------------------------------- /introcomponentwithform/design/desktop-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/desktop-active.png -------------------------------------------------------------------------------- /introcomponentwithform/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/desktop-design.jpg -------------------------------------------------------------------------------- /introcomponentwithform/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/desktop-preview.jpg -------------------------------------------------------------------------------- /introcomponentwithform/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/desktop.png -------------------------------------------------------------------------------- /introcomponentwithform/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/mobile-design.jpg -------------------------------------------------------------------------------- /introcomponentwithform/design/mobile-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/mobile-preview.png -------------------------------------------------------------------------------- /introcomponentwithform/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/design/mobile.png -------------------------------------------------------------------------------- /introcomponentwithform/images/bg-intro-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/images/bg-intro-desktop.png -------------------------------------------------------------------------------- /introcomponentwithform/images/bg-intro-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/images/bg-intro-mobile.png -------------------------------------------------------------------------------- /introcomponentwithform/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introcomponentwithform/images/favicon-32x32.png -------------------------------------------------------------------------------- /introcomponentwithform/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introcomponentwithform/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Red: hsl(0, 100%, 74%) 15 | --clr-red 16 | 17 | - Green: hsl(154, 59%, 51%) 18 | --clr-green 19 | 20 | ### Accent 21 | 22 | - Blue: hsl(248, 32%, 49%) 23 | --clr-blue 24 | 25 | ### Neutral 26 | 27 | - Dark Blue: hsl(249, 10%, 26%) 28 | --clr-blue-dark 29 | 30 | - Grayish Blue: hsl(246, 25%, 77%) 31 | --clr-grayblue 32 | 33 | ## Typography 34 | 35 | ### Body Copy 36 | 37 | - Font size: 16px 38 | 39 | ### Font 40 | 41 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 42 | - Weights: 400, 500, 600, 700 43 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/active-states.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/desktop-design.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/desktop-preview.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/desktop.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/mobile-design.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/mobile-menu-collapsed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/mobile-menu-collapsed.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/mobile-menu-expanded.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/mobile-menu-expanded.jpg -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/mobile-menu-expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/mobile-menu-expanded.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/design/mobile.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Frontend Mentor | Intro section with dropdown navigation 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "introsecwithdropdownnav", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "sass": "sass src/scss/global.scss src/css/global.css --watch", 9 | "sass-build": "sass src/scss/global.scss src/css/global.css --style=compressed", 10 | "build": "vite build", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.15", 19 | "@types/react-dom": "^18.0.6", 20 | "@vitejs/plugin-react": "^2.0.0", 21 | "sass": "^1.53.0", 22 | "vite": "^3.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/public/favicon.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/redirect.js: -------------------------------------------------------------------------------- 1 | if (location.href != "https://snapfemproject.vercel.app/") { 2 | location.replace("https://snapfemproject.vercel.app/") 3 | } -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | // import { useState } from 'react' 2 | import Footer from "./components/Footer"; 3 | import Header from "./components/Header"; 4 | import Main from "./components/Main"; 5 | 6 | function App() { 7 | return ( 8 |
9 |
10 |
11 |
12 |
13 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-close-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-planning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-reminders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/icon-todo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/image-hero-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/src/assets/image-hero-desktop.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/assets/image-hero-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav-react/src/assets/image-hero-mobile.png -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Clients.jsx: -------------------------------------------------------------------------------- 1 | import Audiophile from "../assets/client-audiophile.svg"; 2 | import Databiz from "../assets/client-databiz.svg"; 3 | import Maker from "../assets/client-maker.svg"; 4 | import Meet from "../assets/client-meet.svg"; 5 | 6 | function Clients() { 7 | return ( 8 |
9 |
10 | {" "} 11 | 12 |
13 |
14 | {" "} 15 | 16 |
17 |
18 | {" "} 19 | 20 |
21 |
22 | {" "} 23 | 24 |
25 | 26 |
27 | ); 28 | } 29 | export default Clients; 30 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | function Footer() { 2 | return ( 3 | 20 | ); 21 | } 22 | 23 | export default Footer; 24 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import Logo from './Logo' 2 | import Menu from './Menu' 3 | 4 | function Header () { 5 | return ( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | 13 | export default Header -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import mobileImg from "../assets/image-hero-mobile.png"; 2 | import desktopImg from "../assets/image-hero-desktop.png"; 3 | 4 | function Hero() { 5 | return ( 6 |
7 | 8 | 9 | A man typing into a laptop computer while standing 13 | 14 |
15 | ); 16 | } 17 | export default Hero; 18 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Intro.jsx: -------------------------------------------------------------------------------- 1 | function Intro() { 2 | return ( 3 |
4 |
5 |

Make remote work

6 |

7 | Get your team in sync, no matter your location. Streamline processes, 8 | create team rituals, and watch productivity soar. 9 |

10 | Learn more 11 |
12 |
13 | ); 14 | } 15 | export default Intro; 16 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Landing.jsx: -------------------------------------------------------------------------------- 1 | import Clients from "./Clients" 2 | import Intro from "./Intro" 3 | 4 | function Landing(){ 5 | return( 6 |
7 | 8 | 9 |
10 | ) 11 | } 12 | export default Landing -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Login.jsx: -------------------------------------------------------------------------------- 1 | import LoginButton from "./elements/LoginButton"; 2 | 3 | function Login() { 4 | return ( 5 |
6 | 10 |
11 | ); 12 | } 13 | 14 | export default Login; 15 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Logo.jsx: -------------------------------------------------------------------------------- 1 | import logoSVG from "../assets/logo.svg"; 2 | 3 | function Logo() { 4 | return ( 5 |
6 | company logo 7 |
8 | ); 9 | } 10 | 11 | export default Logo -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Main.jsx: -------------------------------------------------------------------------------- 1 | import Hero from "./Hero"; 2 | import Landing from "./Landing"; 3 | 4 | function Main() { 5 | return ( 6 |
7 |
8 | 9 | 10 |
11 |
12 | ); 13 | } 14 | export default Main; 15 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Menu.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | import Login from "./Login"; 4 | import MenuToggle from "./MenuToggle"; 5 | import Nav from "./Nav"; 6 | 7 | function Menu() { 8 | const [openMenu, setOpenMenu] = useState(false); 9 | 10 | return ( 11 |
12 | 13 |
14 |
15 |
18 |
19 | ); 20 | } 21 | 22 | export default Menu; 23 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/MenuToggle.jsx: -------------------------------------------------------------------------------- 1 | import menuOpen from "../assets/icon-menu.svg"; 2 | import menuClose from "../assets/icon-close-menu.svg"; 3 | 4 | function MenuToggle({ openMenu, setOpenMenu }) { 5 | const menuBtn = openMenu ? menuClose : menuOpen 6 | 7 | const handleMenu = () => setOpenMenu(!openMenu); 8 | 9 | return ( 10 | 18 | ); 19 | } 20 | 21 | export default MenuToggle; 22 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/Nav.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import NavButton from "./elements/NavButton"; 3 | import SubNav from "./elements/SubNav"; 4 | import navData from "../helpers/navData"; 5 | 6 | 7 | function Nav({ openMenu, setOpenMenu }) { 8 | const [ selected, setSelected ] = useState(); 9 | 10 | const navList = navData.map((navLi) => { 11 | return ( 12 |
  • 13 | {navLi.items ? ( 14 | <> 15 | 22 | 23 | 24 | ) : ( 25 | {navLi.title} 26 | )} 27 |
    • 28 | ); 29 | }); 30 | 31 | return ( 32 | 37 | ); 38 | } 39 | 40 | export default Nav; 41 | 42 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/elements/Icon.jsx: -------------------------------------------------------------------------------- 1 | function Icon ({ icon }) { 2 | return ( 3 | 4 | 5 | 6 | ); 7 | }; 8 | 9 | export default Icon -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/elements/LoginButton.jsx: -------------------------------------------------------------------------------- 1 | function LoginButton({ name, ...props }) { 2 | return ( 3 |
  • 4 | {name} 5 |
    • 6 | ); 7 | } 8 | 9 | export default LoginButton; 10 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/components/elements/SubNav.jsx: -------------------------------------------------------------------------------- 1 | import Icon from "./Icon"; 2 | 3 | function SubNav({ items, title }) { 4 | const itemsList = items.map((item) => { 5 | return ( 6 |
  • 7 | 8 | {item.icon && ( 9 |
    10 |
    11 | 12 |
    13 |
    14 | )} 15 | {item.name} 16 |     17 |
    • 18 | ); 19 | }); 20 | 21 | return ( 22 |
    23 | 24 |
    25 | ); 26 | } 27 | 28 | export default SubNav; 29 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/index.css: -------------------------------------------------------------------------------- 1 | /* :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } */ 71 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import './css/global.css' 4 | import App from './App' 5 | 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | ) 12 | -------------------------------------------------------------------------------- /introsecdropdownnav-react/src/scss/global.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap'); 2 | 3 | @import 'config'; 4 | @import 'reset'; 5 | @import 'utilities'; 6 | 7 | 8 | // html { 9 | // min-height: 100%; 10 | // display: flex; 11 | // flex-direction: column; 12 | // } 13 | 14 | 15 | button { 16 | background: inherit; 17 | border: 0; 18 | color: inherit; 19 | } 20 | 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | .link { 26 | color: var(--clr-link); 27 | a { 28 | color: var(--clr-link); 29 | &:hover, 30 | &:active { 31 | color: var(--clr-black); 32 | } 33 | } 34 | } 35 | 36 | .cta { 37 | display: inline-block; 38 | background-color: var(--clr-black); 39 | color: var(--clr-white); 40 | letter-spacing: var(--ls-cta); 41 | padding: 0.7rem 1.25rem 0.6rem 1.45rem ; 42 | border-radius: 0.85rem; 43 | cursor: pointer; 44 | z-index: 1; 45 | border: 1px solid var(--clr-black); 46 | &:hover { 47 | background-color: var(--clr-white); 48 | color: var(--clr-black); 49 | } 50 | } 51 | 52 | @import 'blocks'; -------------------------------------------------------------------------------- /introsecdropdownnav-react/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /introsecdropdownnav/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /introsecdropdownnav/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/active-states.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/desktop-design.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/desktop-preview.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/desktop.png -------------------------------------------------------------------------------- /introsecdropdownnav/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/mobile-design.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/mobile-menu-collapsed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/mobile-menu-collapsed.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/mobile-menu-expanded.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/mobile-menu-expanded.jpg -------------------------------------------------------------------------------- /introsecdropdownnav/design/mobile-menu-expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/mobile-menu-expanded.png -------------------------------------------------------------------------------- /introsecdropdownnav/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/design/mobile.png -------------------------------------------------------------------------------- /introsecdropdownnav/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/images/favicon-32x32.png -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-close-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-planning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-reminders.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/icon-todo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /introsecdropdownnav/images/image-hero-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/images/image-hero-desktop.png -------------------------------------------------------------------------------- /introsecdropdownnav/images/image-hero-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/introsecdropdownnav/images/image-hero-mobile.png -------------------------------------------------------------------------------- /introsecdropdownnav/sass/_utilities.scss: -------------------------------------------------------------------------------- 1 | // @use "./sass/config"; 2 | // utility classes (styling) 3 | 4 | .fs-small { 5 | font-size: var(--fs-small); 6 | } 7 | .fs-h1 { 8 | font-size: var(--fs-h1); 9 | } 10 | .fs-login { 11 | font-size: var(--fs-login); 12 | } 13 | .fs-nav { 14 | font-size: var(--fs-nav); 15 | } 16 | .fw-bold { 17 | font-weight: var(--fw-700); 18 | } 19 | .clr-white { 20 | color: hsl(var(--clr-white)); 21 | } 22 | .clr-black { 23 | color: hsl(var(--clr-black)); 24 | } 25 | .clr-neutral-500 { 26 | color: hsl(var(--clr-neutral-500)); 27 | } 28 | 29 | // utility classes (structure) 30 | .wrapper { 31 | margin-inline: auto; 32 | } 33 | 34 | .visually-hidden { 35 | border: 0; 36 | clip: rect(0 0 0 0); 37 | height: auto; 38 | margin: 0; 39 | overflow: hidden; 40 | padding: 0; 41 | position: absolute; 42 | width: 1px; 43 | white-space: nowrap; 44 | } 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /newshomepage/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /newshomepage/assets/fonts/Inter-VariableFont_slnt,wght.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/fonts/Inter-VariableFont_slnt,wght.ttf -------------------------------------------------------------------------------- /newshomepage/assets/fonts/static/Inter-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/fonts/static/Inter-Bold.ttf -------------------------------------------------------------------------------- /newshomepage/assets/fonts/static/Inter-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/fonts/static/Inter-ExtraBold.ttf -------------------------------------------------------------------------------- /newshomepage/assets/fonts/static/Inter-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/fonts/static/Inter-Regular.ttf -------------------------------------------------------------------------------- /newshomepage/assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /newshomepage/assets/images/icon-menu-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /newshomepage/assets/images/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /newshomepage/assets/images/image-gaming-growth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/image-gaming-growth.jpg -------------------------------------------------------------------------------- /newshomepage/assets/images/image-retro-pcs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/image-retro-pcs.jpg -------------------------------------------------------------------------------- /newshomepage/assets/images/image-top-laptops.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/image-top-laptops.jpg -------------------------------------------------------------------------------- /newshomepage/assets/images/image-web-3-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/image-web-3-desktop.jpg -------------------------------------------------------------------------------- /newshomepage/assets/images/image-web-3-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/assets/images/image-web-3-mobile.jpg -------------------------------------------------------------------------------- /newshomepage/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/active-states.jpg -------------------------------------------------------------------------------- /newshomepage/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/desktop-design.jpg -------------------------------------------------------------------------------- /newshomepage/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/desktop-preview.jpg -------------------------------------------------------------------------------- /newshomepage/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/desktop.png -------------------------------------------------------------------------------- /newshomepage/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/mobile-design.jpg -------------------------------------------------------------------------------- /newshomepage/design/mobile-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/mobile-menu.jpg -------------------------------------------------------------------------------- /newshomepage/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/newshomepage/design/mobile.png -------------------------------------------------------------------------------- /newshomepage/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Soft orange: hsl(35, 77%, 62%) 15 | - Soft red: hsl(5, 85%, 63%) 16 | 17 | ### Neutral 18 | 19 | Off-white: hsl(36, 100%, 99%) 20 | Grayish blue: hsl(233, 8%, 79%) 21 | Dark grayish blue: hsl(236, 13%, 42%) 22 | Very dark blue: hsl(240, 100%, 5%) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size (paragraph): 15px 29 | 30 | ### Font 31 | 32 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 33 | - Weights: 400, 700, 800 34 | -------------------------------------------------------------------------------- /nftpreviewcard/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /nftpreviewcard/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/active-states.jpg -------------------------------------------------------------------------------- /nftpreviewcard/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/desktop-design.jpg -------------------------------------------------------------------------------- /nftpreviewcard/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/desktop-preview.jpg -------------------------------------------------------------------------------- /nftpreviewcard/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/desktop.png -------------------------------------------------------------------------------- /nftpreviewcard/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/mobile-design.jpg -------------------------------------------------------------------------------- /nftpreviewcard/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/design/mobile.png -------------------------------------------------------------------------------- /nftpreviewcard/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/images/favicon-32x32.png -------------------------------------------------------------------------------- /nftpreviewcard/images/icon-clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nftpreviewcard/images/icon-ethereum.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nftpreviewcard/images/icon-view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nftpreviewcard/images/image-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/images/image-avatar.png -------------------------------------------------------------------------------- /nftpreviewcard/images/image-equilibrium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/nftpreviewcard/images/image-equilibrium.jpg -------------------------------------------------------------------------------- /nftpreviewcard/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Soft blue: hsl(215, 51%, 70%) 15 | - Cyan: hsl(178, 100%, 50%) 16 | 17 | ### Neutral 18 | 19 | - Very dark blue (main BG): hsl(217, 54%, 11%) 20 | - Very dark blue (card BG): hsl(216, 50%, 16%) 21 | - Very dark blue (line): hsl(215, 32%, 27%) 22 | - White: hsl(0, 0%, 100%) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size (paragraph): 18px 29 | 30 | ### Font 31 | 32 | - Family: [Outfit](https://fonts.google.com/specimen/Outfit) 33 | - Weights: 300, 400, 600 34 | -------------------------------------------------------------------------------- /ordersummary/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/active-states.jpg -------------------------------------------------------------------------------- /ordersummary/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/desktop-design.jpg -------------------------------------------------------------------------------- /ordersummary/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/desktop-preview.jpg -------------------------------------------------------------------------------- /ordersummary/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/desktop.png -------------------------------------------------------------------------------- /ordersummary/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/mobile-design.jpg -------------------------------------------------------------------------------- /ordersummary/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/design/mobile.png -------------------------------------------------------------------------------- /ordersummary/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/ordersummary/images/favicon-32x32.png -------------------------------------------------------------------------------- /ordersummary/images/icon-music.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ordersummary/images/pattern-background-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ordersummary/images/pattern-background-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ordersummary/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Pale blue: hsl(225, 100%, 94%) 15 | - Bright blue: hsl(245, 75%, 52%) 16 | 17 | ### Neutral 18 | 19 | - Very pale blue: hsl(225, 100%, 98%) 20 | - Desaturated blue: hsl(224, 23%, 55%) 21 | - Dark blue: hsl(223, 47%, 23%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size (paragraph): 16px 28 | 29 | ### Font 30 | 31 | - Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display) 32 | - Weights: 500, 700, 900 33 | -------------------------------------------------------------------------------- /pingcomingsoonpage/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /pingcomingsoonpage/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/desktop-design.jpg -------------------------------------------------------------------------------- /pingcomingsoonpage/design/desktop-hover-error-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/desktop-hover-error-states.jpg -------------------------------------------------------------------------------- /pingcomingsoonpage/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/desktop-preview.jpg -------------------------------------------------------------------------------- /pingcomingsoonpage/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/desktop.png -------------------------------------------------------------------------------- /pingcomingsoonpage/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/mobile-design.jpg -------------------------------------------------------------------------------- /pingcomingsoonpage/design/mobile-error-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/mobile-error-state.jpg -------------------------------------------------------------------------------- /pingcomingsoonpage/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/design/mobile.png -------------------------------------------------------------------------------- /pingcomingsoonpage/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/images/favicon-32x32.png -------------------------------------------------------------------------------- /pingcomingsoonpage/images/illustration-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pingcomingsoonpage/images/illustration-dashboard.png -------------------------------------------------------------------------------- /pingcomingsoonpage/script.js: -------------------------------------------------------------------------------- 1 | const formEl = document.getElementById("formEl"); 2 | const signupEl = document.getElementById("signupEl"); 3 | const emailEl = document.getElementById("emailEl"); 4 | 5 | const input = emailEl.querySelector("input"); 6 | const message = emailEl.querySelector(".input__message"); 7 | 8 | formEl.addEventListener("submit", () => { 9 | signupEl.innerHTML = ` 10 |

    Thank you for signing up!

    11 |

    Check your email to confirm your signup.

    12 | `; 13 | }); 14 | 15 | input.addEventListener("invalid", (event) => { 16 | event.preventDefault(); 17 | input.classList.add("is-invalid"); 18 | if (event.target.validity.valueMissing) { 19 | message.textContent = `Your ${input.name} cannot be empty`; 20 | } 21 | if (event.target.validity.patternMismatch) { 22 | message.textContent = `Please provide a valid email address`; 23 | } 24 | if (event.target.validity.tooShort) { 25 | message.textContent = `Your ${input.name} needs to be longer than ${input.minLength} characters`; 26 | } 27 | }); 28 | 29 | input.removeEventListener("valid", () => { 30 | input.classList.remove("is-invalid"); 31 | }); 32 | -------------------------------------------------------------------------------- /pingcomingsoonpage/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Blue: hsl(223, 87%, 63%) 15 | --clr-blue 16 | 17 | ### Secondary 18 | 19 | - Pale Blue: hsl(223, 100%, 88%) 20 | --clr-blue-pale 21 | 22 | - Light Red: hsl(354, 100%, 66%) 23 | --clr-red-light 24 | 25 | ### Neutral 26 | 27 | - Gray: hsl(0, 0%, 59%) 28 | --clr-gray 29 | 30 | - Very Dark Blue: hsl(209, 33%, 12%) 31 | --clr-blue-xdark 32 | 33 | ## Typography 34 | 35 | ### Body Copy 36 | 37 | - Font size: 20px 38 | 39 | ### Fonts 40 | 41 | - Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) 42 | - Weights: 300, 600, 700 43 | 44 | ## Icons 45 | 46 | For the social icons, you can use a font icon library. Some suggestions can be found below: 47 | 48 | - [Font Awesome](https://fontawesome.com) 49 | - [IcoMoon](https://icomoon.io) 50 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/active-states.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/desktop-design-annually.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/desktop-design-annually.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/desktop-design-monthly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/desktop-design-monthly.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/desktop-preview.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/desktop.png -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/mobile-design-annually.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/mobile-design-annually.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/mobile-design-monthly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/mobile-design-monthly.jpg -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/design/mobile.png -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/images/bg-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/images/bg-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/pricingcomponentwithtoggle/images/favicon-32x32.png -------------------------------------------------------------------------------- /pricingcomponentwithtoggle/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Linear Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%) 15 | 16 | ### Neutral 17 | 18 | - Very Light Grayish Blue: hsl(240, 78%, 98%) 19 | - Light Grayish Blue: hsl(234, 14%, 74%) 20 | - Grayish Blue: hsl(233, 13%, 49%) 21 | - Dark Grayish Blue: hsl(232, 13%, 33%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size: 15px 28 | 29 | ### Font 30 | 31 | - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) 32 | - Weight: 700 33 | -------------------------------------------------------------------------------- /productpreviewcardcomponent/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/active-states.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/desktop-design.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/desktop-preview.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/desktop.png -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/mobile-design.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/design/mobile.png -------------------------------------------------------------------------------- /productpreviewcardcomponent/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/images/favicon-32x32.png -------------------------------------------------------------------------------- /productpreviewcardcomponent/images/icon-cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /productpreviewcardcomponent/images/image-product-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/images/image-product-desktop.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/images/image-product-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/productpreviewcardcomponent/images/image-product-mobile.jpg -------------------------------------------------------------------------------- /productpreviewcardcomponent/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark cyan: hsl(158, 36%, 37%) 15 | - Cream: hsl(30, 38%, 92%) 16 | 17 | ### Neutral 18 | 19 | - Very dark blue: hsl(212, 21%, 14%) 20 | - Dark grayish blue: hsl(228, 12%, 48%) 21 | - White: hsl(0, 0%, 100%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size (paragraph): 14px 28 | 29 | ### Font 30 | 31 | - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) 32 | - Weights: 500, 700 33 | 34 | - Family: [Fraunces](https://fonts.google.com/specimen/Fraunces) 35 | - Weights: 700 36 | -------------------------------------------------------------------------------- /profilecard/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/design/desktop-design.jpg -------------------------------------------------------------------------------- /profilecard/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/design/desktop-preview.jpg -------------------------------------------------------------------------------- /profilecard/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/design/desktop.png -------------------------------------------------------------------------------- /profilecard/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/design/mobile-design.jpg -------------------------------------------------------------------------------- /profilecard/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/design/mobile.png -------------------------------------------------------------------------------- /profilecard/images/bg-pattern-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /profilecard/images/bg-pattern-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /profilecard/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/images/favicon-32x32.png -------------------------------------------------------------------------------- /profilecard/images/image-victor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/profilecard/images/image-victor.jpg -------------------------------------------------------------------------------- /profilecard/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | Dark cyan: hsl(185, 75%, 39%) 15 | 16 | - background color 17 | Very dark desaturated blue: hsl(229, 23%, 23%) 18 | - headings 19 | Dark grayish blue: hsl(227, 10%, 46%) 20 | - small text 21 | 22 | ### Neutral 23 | 24 | Dark gray: hsl(0, 0%, 59%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size (name and stats): 18px 31 | 32 | ### Font 33 | 34 | - Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans) 35 | - Weights: 400, 700 36 | -------------------------------------------------------------------------------- /public/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/public/images/favicon-32x32.png -------------------------------------------------------------------------------- /public/images/frontendmentor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/public/images/frontendmentor.png -------------------------------------------------------------------------------- /public/js/footer.js: -------------------------------------------------------------------------------- 1 | import { info } from "./data.js" 2 | 3 | function createFooter () { 4 | const attributionEl = document.body.querySelector(".attribution") 5 | 6 | const attributionHTML = ` 7 | 8 | Challenge by 9 | Frontend Mentor. 11 | 12 | Other Frontend Mentor Challenges by Elaine. 14 | 16 | ` 17 | 18 | attributionEl.insertAdjacentHTML("afterbegin", attributionHTML) 19 | } 20 | 21 | createFooter() -------------------------------------------------------------------------------- /singlepricegrid/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/design/desktop-design.jpg -------------------------------------------------------------------------------- /singlepricegrid/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/design/desktop-preview.jpg -------------------------------------------------------------------------------- /singlepricegrid/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/design/desktop.png -------------------------------------------------------------------------------- /singlepricegrid/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/design/mobile-design.jpg -------------------------------------------------------------------------------- /singlepricegrid/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/design/mobile.png -------------------------------------------------------------------------------- /singlepricegrid/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/singlepricegrid/images/favicon-32x32.png -------------------------------------------------------------------------------- /singlepricegrid/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Cyan: hsl(179, 62%, 43%) 15 | - Bright Yellow: hsl(71, 73%, 54%) 16 | 17 | ### Neutral 18 | 19 | - Light Gray: hsl(204, 43%, 93%) 20 | - Grayish Blue: hsl(218, 22%, 67%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 16px 27 | 28 | ### Font 29 | 30 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 31 | - Weights: 400, 700 32 | -------------------------------------------------------------------------------- /socialproofsection/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /socialproofsection/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/design/desktop-design.jpg -------------------------------------------------------------------------------- /socialproofsection/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/design/desktop-preview.jpg -------------------------------------------------------------------------------- /socialproofsection/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/design/desktop.png -------------------------------------------------------------------------------- /socialproofsection/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/design/mobile-design.jpg -------------------------------------------------------------------------------- /socialproofsection/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/design/mobile.png -------------------------------------------------------------------------------- /socialproofsection/images/bg-pattern-bottom-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /socialproofsection/images/bg-pattern-bottom-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /socialproofsection/images/bg-pattern-top-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /socialproofsection/images/bg-pattern-top-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /socialproofsection/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/images/favicon-32x32.png -------------------------------------------------------------------------------- /socialproofsection/images/icon-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /socialproofsection/images/image-anne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/images/image-anne.jpg -------------------------------------------------------------------------------- /socialproofsection/images/image-colton.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/images/image-colton.jpg -------------------------------------------------------------------------------- /socialproofsection/images/image-irene.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/socialproofsection/images/image-irene.jpg -------------------------------------------------------------------------------- /socialproofsection/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | var(--clr-magenta-xdark) 15 | Very Dark Magenta: hsl(300, 43%, 22%) 16 | 17 | var(--clr-pink-soft) 18 | Soft Pink: hsl(333, 80%, 67%) 19 | 20 | ### Neutral 21 | 22 | Dark Grayish Magenta: hsl(303, 10%, 53%) 23 | Light Grayish Magenta: hsl(300, 24%, 96%) 24 | White: hsl(0, 0%, 100%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size: 15px 31 | 32 | ### Font 33 | 34 | - Family: [League Spartan](https://fonts.google.com/specimen/League+Spartan) 35 | - Weights: 400, 500, 700 36 | -------------------------------------------------------------------------------- /statspreview/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /statspreview/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/design/desktop-design.jpg -------------------------------------------------------------------------------- /statspreview/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/design/desktop-preview.jpg -------------------------------------------------------------------------------- /statspreview/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/design/desktop.png -------------------------------------------------------------------------------- /statspreview/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/design/mobile-design.jpg -------------------------------------------------------------------------------- /statspreview/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/design/mobile.png -------------------------------------------------------------------------------- /statspreview/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/images/favicon-32x32.png -------------------------------------------------------------------------------- /statspreview/images/image-header-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/images/image-header-desktop.jpg -------------------------------------------------------------------------------- /statspreview/images/image-header-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/statspreview/images/image-header-mobile.jpg -------------------------------------------------------------------------------- /statspreview/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Very dark blue (main background): hsl(233, 47%, 7%) 15 | - Dark desaturated blue (card background): hsl(244, 38%, 16%) 16 | - Soft violet (accent): hsl(277, 64%, 61%) 17 | 18 | ### Neutral 19 | 20 | - White (main heading, stats): hsl(0, 0%, 100%) 21 | - Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75) 22 | - Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6) 23 | 24 | ## Typography 25 | 26 | ### Body Copy 27 | 28 | - Font size: 15px 29 | 30 | ### Font 31 | 32 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 33 | - Weights: 400, 700 34 | 35 | - Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca) 36 | - Weights: 400 37 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/active-states.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/desktop-design.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/desktop-preview.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/desktop.png -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/mobile-design.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/mobile-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/mobile-menu.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/mobile-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/mobile-menu.png -------------------------------------------------------------------------------- /sunnysideagencylandingpage/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/design/mobile.png -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-gallery-cone.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-gallery-orange.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-gallery-sugarcubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-gallery-sugarcubes.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-graphic-design.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-header.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-photography.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-stand-out.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/desktop/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/desktop/image-transform.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/favicon-32x32.png -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/image-emily.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/image-emily.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/image-jennie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/image-jennie.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/image-thomas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/image-thomas.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-gallery-cone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-gallery-cone.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-gallery-milkbottles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-gallery-milkbottles.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-gallery-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-gallery-orange.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-gallery-sugarcubes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-gallery-sugarcubes.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-graphic-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-graphic-design.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-header.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-photography.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-photography.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-stand-out.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-stand-out.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/images/mobile/image-transform.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/sunnysideagencylandingpage/images/mobile/image-transform.jpg -------------------------------------------------------------------------------- /sunnysideagencylandingpage/index.js: -------------------------------------------------------------------------------- 1 | const navBtnEl = document.getElementById("navBtnEl") 2 | const navEl = document.getElementById("navEl") 3 | 4 | navBtnEl.addEventListener("click", () => { 5 | navBtnEl.classList.toggle('open') 6 | navEl.classList.toggle("open") 7 | }) -------------------------------------------------------------------------------- /sunnysideagencylandingpage/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Soft red: hsl(7, 99%, 70%) 15 | - Yellow: hsl(51, 100%, 49%) 16 | 17 | - Dark desaturated cyan (graphic design text): hsl(167, 40%, 24%) 18 | - Dark blue (photography text): hsl(198, 62%, 26%) 19 | - Dark moderate cyan (footer): hsl(168, 34%, 41%) 20 | 21 | ### Neutral 22 | 23 | - Very dark desaturated blue: hsl(212, 27%, 19%) 24 | - Very dark grayish blue: hsl(213, 9%, 39%) 25 | - Dark grayish blue: hsl(232, 10%, 55%) 26 | - Grayish blue: hsl(210, 4%, 67%) 27 | - White: hsl(0, 0%, 100%) 28 | 29 | ## Typography 30 | 31 | ### Body Copy 32 | 33 | - Font size: 18px 34 | 35 | ### Font 36 | 37 | - Family: [Barlow](https://fonts.google.com/specimen/Barlow) 38 | - Weights: 600 39 | - Family: [Fraunces](https://fonts.google.com/specimen/Fraunces) 40 | - Weights: 700, 900 41 | 42 | ## Icons 43 | 44 | We provide the required social icons. But, if you prefer, you can use a font icon library. Some suggestions can be found below: 45 | 46 | - [Font Awesome](https://fontawesome.com) 47 | - [IcoMoon](https://icomoon.io) 48 | - [Ionicons](https://ionicons.com) 49 | -------------------------------------------------------------------------------- /testimonialsgridsection/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental Sketch file upload 2 | ############################################### 3 | ## Please do not remove line 5 - thanks! 🙂 ## 4 | ############################################### 5 | *.sketch 6 | 7 | # Avoid accidental XD or Figma upload if you convert the design file 8 | ####################################################### 9 | ## Please do not remove lines 11 and 12 - thanks! 🙂 ## 10 | ####################################################### 11 | *.xd 12 | *.fig 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | 17 | .prettierignore -------------------------------------------------------------------------------- /testimonialsgridsection/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /testimonialsgridsection/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/design/desktop-design.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/design/desktop-preview.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/design/desktop.png -------------------------------------------------------------------------------- /testimonialsgridsection/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/design/mobile-design.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/design/mobile.png -------------------------------------------------------------------------------- /testimonialsgridsection/images/bg-pattern-quotation.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /testimonialsgridsection/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/favicon-32x32.png -------------------------------------------------------------------------------- /testimonialsgridsection/images/image-daniel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/image-daniel.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/images/image-jeanette.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/image-jeanette.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/images/image-jonathan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/image-jonathan.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/images/image-kira.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/image-kira.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/images/image-patrick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/testimonialsgridsection/images/image-patrick.jpg -------------------------------------------------------------------------------- /testimonialsgridsection/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | Moderate violet: hsl(263, 55%, 52%) 15 | Very dark grayish blue: hsl(217, 19%, 35%) 16 | Very dark blackish blue: hsl(219, 29%, 14%) 17 | White: hsl(0, 0%, 100%) 18 | 19 | ### Neutral 20 | 21 | Light gray: hsl(0, 0%, 81%) 22 | Light grayish blue: hsl(210, 46%, 95%) 23 | 24 | Note for text colors: 25 | 26 | 1. "Verified Graduate" has the same color as the person's name with 50% opacity 27 | 2. Review paragraphs inside the quotations have the same color as well, but are at 70% opacity 28 | 29 | ## Typography 30 | 31 | ### Body Copy 32 | 33 | - Font size: 13px 34 | 35 | ### Font 36 | 37 | - Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed) 38 | - Weights: 500, 600 39 | -------------------------------------------------------------------------------- /timetrackingdashboard/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /timetrackingdashboard/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/active-states.jpg -------------------------------------------------------------------------------- /timetrackingdashboard/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/desktop-design.jpg -------------------------------------------------------------------------------- /timetrackingdashboard/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/desktop-preview.jpg -------------------------------------------------------------------------------- /timetrackingdashboard/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/desktop.png -------------------------------------------------------------------------------- /timetrackingdashboard/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/mobile-design.jpg -------------------------------------------------------------------------------- /timetrackingdashboard/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/design/mobile.png -------------------------------------------------------------------------------- /timetrackingdashboard/helpers.js: -------------------------------------------------------------------------------- 1 | export const areasMap = { 2 | work: "Work", 3 | play: "Play", 4 | study: "Study", 5 | exercise: "Exercise", 6 | social: "Social", 7 | "self-care": "Self Care", 8 | }; 9 | 10 | export const timeFrameMap = { 11 | daily: "Yesterday", 12 | weekly: "Last Week", 13 | monthly: "Last Month", 14 | }; -------------------------------------------------------------------------------- /timetrackingdashboard/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/images/favicon-32x32.png -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-ellipsis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-exercise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-self-care.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-social.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-study.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/icon-work.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /timetrackingdashboard/images/image-jeremy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/timetrackingdashboard/images/image-jeremy.png -------------------------------------------------------------------------------- /timetrackingdashboard/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Blue: hsl(246, 80%, 60%) 15 | 16 | - Light red (work): hsl(15, 100%, 70%) 17 | - Soft blue (play): hsl(195, 74%, 62%) 18 | - Light red (study): hsl(348, 100%, 68%) 19 | - Lime green (exercise): hsl(145, 58%, 55%) 20 | - Violet (social): hsl(264, 64%, 52%) 21 | - Soft orange (self care): hsl(43, 84%, 65%) 22 | 23 | ### Neutral 24 | 25 | - Very dark blue: hsl(226, 43%, 10%) 26 | - Dark blue: hsl(235, 46%, 20%) 27 | - Desaturated blue: hsl(235, 45%, 61%) 28 | - Pale Blue: hsl(236, 100%, 87%) 29 | 30 | ## Typography 31 | 32 | ### Body Copy 33 | 34 | - Font size: 18px (card titles e.g. Work, Play) 35 | 36 | ### Font 37 | 38 | - Family: [Rubik](https://fonts.google.com/specimen/Rubik) 39 | - Weights: 300, 400, 500 40 | -------------------------------------------------------------------------------- /tipcalculatorapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /tipcalculatorapp/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/active-states.jpg -------------------------------------------------------------------------------- /tipcalculatorapp/design/desktop-completed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/desktop-completed.png -------------------------------------------------------------------------------- /tipcalculatorapp/design/desktop-design-completed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/desktop-design-completed.jpg -------------------------------------------------------------------------------- /tipcalculatorapp/design/desktop-design-empty.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/desktop-design-empty.jpg -------------------------------------------------------------------------------- /tipcalculatorapp/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/desktop-preview.jpg -------------------------------------------------------------------------------- /tipcalculatorapp/design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/desktop.png -------------------------------------------------------------------------------- /tipcalculatorapp/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/mobile-design.jpg -------------------------------------------------------------------------------- /tipcalculatorapp/design/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/design/mobile.png -------------------------------------------------------------------------------- /tipcalculatorapp/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elaineleung/frontendmentor/fff4c1527e15bdcb9ff10f04dc781141460e888b/tipcalculatorapp/images/favicon-32x32.png -------------------------------------------------------------------------------- /tipcalculatorapp/images/icon-dollar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tipcalculatorapp/images/icon-person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tipcalculatorapp/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Strong cyan: hsl(172, 67%, 45%) 15 | 16 | ### Neutral 17 | 18 | - Very dark cyan: hsl(183, 100%, 15%) 19 | - Dark grayish cyan: hsl(186, 14%, 43%) 20 | - Grayish cyan: hsl(184, 14%, 56%) 21 | - Light grayish cyan: hsl(185, 41%, 84%) 22 | - Very light grayish cyan: hsl(189, 41%, 97%) 23 | - White: hsl(0, 0%, 100%) 24 | 25 | ## Typography 26 | 27 | ### Body Copy 28 | 29 | - Font size (form inputs): 24px 30 | 31 | ### Font 32 | 33 | - Family: [Space Mono](https://fonts.google.com/specimen/Space+Mono) 34 | - Weights: 700 35 | --------------------------------------------------------------------------------