diff --git a/10social-proof-section-master/.gitignore b/10social-proof-section-master/.gitignore new file mode 100644 index 0000000..c306796 --- /dev/null +++ b/10social-proof-section-master/.gitignore @@ -0,0 +1,15 @@ +# Avoid accidental Sketch file upload +############################################### +## Please do not remove line 5 - thanks! 🙂 ## +############################################### +*.sketch + +# Avoid accidental XD or Figma upload if you convert the design file +####################################################### +## Please do not remove lines 11 and 12 - thanks! 🙂 ## +####################################################### +*.xd +*.fig + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store diff --git a/10social-proof-section-master/README-template.md b/10social-proof-section-master/README-template.md new file mode 100644 index 0000000..d50b492 --- /dev/null +++ b/10social-proof-section-master/README-template.md @@ -0,0 +1,110 @@ +# Frontend Mentor - Social proof section solution + +This is a solution to the [Social proof section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-proof-section-6e0qTv_bA). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the section depending on their device's screen size + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/10social-proof-section-master/README.md b/10social-proof-section-master/README.md new file mode 100644 index 0000000..3bca674 --- /dev/null +++ b/10social-proof-section-master/README.md @@ -0,0 +1,91 @@ +# Frontend Mentor - Social proof section + +![Design preview for the Social proof section coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this social proof section and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout for the section depending on their device's screen size + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/10social-proof-section-master/design/desktop-design.jpg b/10social-proof-section-master/design/desktop-design.jpg new file mode 100644 index 0000000..ae6eecb Binary files /dev/null and b/10social-proof-section-master/design/desktop-design.jpg differ diff --git a/10social-proof-section-master/design/desktop-preview.jpg b/10social-proof-section-master/design/desktop-preview.jpg new file mode 100644 index 0000000..986fd9e Binary files /dev/null and b/10social-proof-section-master/design/desktop-preview.jpg differ diff --git a/10social-proof-section-master/design/mobile-design.jpg b/10social-proof-section-master/design/mobile-design.jpg new file mode 100644 index 0000000..b2bc158 Binary files /dev/null and b/10social-proof-section-master/design/mobile-design.jpg differ diff --git a/10social-proof-section-master/images/bg-pattern-bottom-desktop.svg b/10social-proof-section-master/images/bg-pattern-bottom-desktop.svg new file mode 100644 index 0000000..a9ab79c --- /dev/null +++ b/10social-proof-section-master/images/bg-pattern-bottom-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/10social-proof-section-master/images/bg-pattern-bottom-mobile.svg b/10social-proof-section-master/images/bg-pattern-bottom-mobile.svg new file mode 100644 index 0000000..f42595f --- /dev/null +++ b/10social-proof-section-master/images/bg-pattern-bottom-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/10social-proof-section-master/images/bg-pattern-top-desktop.svg b/10social-proof-section-master/images/bg-pattern-top-desktop.svg new file mode 100644 index 0000000..8bd11f8 --- /dev/null +++ b/10social-proof-section-master/images/bg-pattern-top-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/10social-proof-section-master/images/bg-pattern-top-mobile.svg b/10social-proof-section-master/images/bg-pattern-top-mobile.svg new file mode 100644 index 0000000..7f19323 --- /dev/null +++ b/10social-proof-section-master/images/bg-pattern-top-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/10social-proof-section-master/images/favicon-32x32.png b/10social-proof-section-master/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/10social-proof-section-master/images/favicon-32x32.png differ diff --git a/10social-proof-section-master/images/icon-star.svg b/10social-proof-section-master/images/icon-star.svg new file mode 100644 index 0000000..eb84b44 --- /dev/null +++ b/10social-proof-section-master/images/icon-star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/10social-proof-section-master/images/image-anne.jpg b/10social-proof-section-master/images/image-anne.jpg new file mode 100644 index 0000000..3824a1c Binary files /dev/null and b/10social-proof-section-master/images/image-anne.jpg differ diff --git a/10social-proof-section-master/images/image-colton.jpg b/10social-proof-section-master/images/image-colton.jpg new file mode 100644 index 0000000..8102530 Binary files /dev/null and b/10social-proof-section-master/images/image-colton.jpg differ diff --git a/10social-proof-section-master/images/image-irene.jpg b/10social-proof-section-master/images/image-irene.jpg new file mode 100644 index 0000000..4a9653a Binary files /dev/null and b/10social-proof-section-master/images/image-irene.jpg differ diff --git a/10social-proof-section-master/index.html b/10social-proof-section-master/index.html new file mode 100644 index 0000000..8ce744d --- /dev/null +++ b/10social-proof-section-master/index.html @@ -0,0 +1,133 @@ + + + + + + + + + + + Frontend Mentor | Social proof section + + + + + + +
+ +
+
+

10,000+ of our users love our products.

+

+ We only provide great products combined with excellent customer service. + See what our satisfied customers are saying about our services. +

+
+ +
+
+
+ + + + + +
+

Rated 5 Stars in Reviews

+
+
+
+ + + + + +
+

Rated 5 Stars in Report Guru

+
+
+
+ + + + + +
+

Rated 5 Stars in BestTech

+
+
+
+ +
+
+
+
+ +
+

Colton Smith

+

Verified Buyer

+
+
+

+ "We needed the same printed design as the one we had ordered a week prior. + Not only did they find the original order, but we also received it in time. + Excellent!" +

+
+
+
+ +
+

Irene Roberts

+

Verified Buyer

+
+
+

+ "Customer service is always excellent and very quick turn around. Completely + delighted with the simplicity of the purchase and the speed of delivery." +

+
+
+
+ +
+

Anne Wallace

+

Verified Buyer

+
+
+

+ "Put an order with this company and can only praise them for the very high + standard. Will definitely use them again and recommend them to everyone!" +

+
+
+
+
+ + + + + + + + diff --git a/10social-proof-section-master/style-guide.md b/10social-proof-section-master/style-guide.md new file mode 100644 index 0000000..4ad826b --- /dev/null +++ b/10social-proof-section-master/style-guide.md @@ -0,0 +1,32 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +Very Dark Magenta: hsl(300, 43%, 22%) +Soft Pink: hsl(333, 80%, 67%) + +### Neutral + +Dark Grayish Magenta: hsl(303, 10%, 53%) +Light Grayish Magenta: hsl(300, 24%, 96%) +White: hsl(0, 0%, 100%) + +## Typography + +### Body Copy + +- Font size: 15px + +### Font + +- Family: [League Spartan](https://fonts.google.com/specimen/League+Spartan) +- Weights: 400, 500, 700 diff --git a/10social-proof-section-master/style.css b/10social-proof-section-master/style.css new file mode 100644 index 0000000..06841b8 --- /dev/null +++ b/10social-proof-section-master/style.css @@ -0,0 +1,227 @@ +@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap'); + +/* CSS Variables - Start */ + +:root { + --clr-primary-dark: hsl(300, 43%, 22%); + --clr-primary-soft: hsl(333, 80%, 67%); + --clr-primary-soft-opacity: hsla(333, 80%, 67%, 0.4); + --clr-neutral-dark: hsl(303, 10%, 53%); + --clr-neutral-soft: hsl(300, 24%, 96%); + --clr-neutral-white: hsl(0, 0%, 100%); + + --font-family: 'League Spartan', sans-serif; + + --fw-regular: 400; + --fw-bold: 500; + --fw-black: 700; +} + +/* CSS Variables - End */ + +/* CSS Reset - Start */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* CSS Reset - End */ + +/* General Styles - Start */ +body { + font-family: var(--font-family); + font-size: .875rem; + background-image: url(images/bg-pattern-top-mobile.svg); + background-repeat: no-repeat; +} +main { + max-width: 90%; + margin-inline: auto; + text-align: center; + display: grid; + gap: 1rem; +} +header { + margin-top: 1rem; + display: grid; + gap: 1rem; +} +article { + display: grid; + gap: 1rem; +} +section { + padding: 1rem; +} +.box-1 > section { + background-color: var(--clr-primary-soft-opacity); + border-radius: .5rem; + display: grid; + gap: .5rem; +} +.box-2 > section { + background-color: var(--clr-primary-dark); + border-radius: .5rem; + display: grid; + gap: 1rem; + text-align: left; + padding: 1rem 2.6rem; +} +.box-2 > section > .title > img { + object-fit: cover; + width: 2.7rem; + height: 2.7rem; + border-radius: 100%; + margin-right: 1.5rem; +} +.stars { + display: flex; + justify-content: center; +} +.title { + display: flex; +} +.fw-regular{font-weight: var(--fw-regular);} +.fw-bold{font-weight: var(--fw-bold);} +.fw-black{font-weight: var(--fw-black);} +.clr-white{color: var(--clr-neutral-white);} +.soft-magenta{color: var(--clr-primary-soft);} +.primary-magenta{color: var(--clr-primary-dark);} +.neutral-dark{color: var(--clr-neutral-dark);} + +/* General Styles - End */ + +/* Typography - Start */ + +header > h1 { + font-size: 2.3rem; + line-height: 1; +} +/* Typography - End */ + +/* Media Queries - Start */ + +@media (min-width:860px) { + body { +background-image: url(images/bg-pattern-bottom-desktop.svg) , url(images/bg-pattern-top-desktop.svg); +background-repeat: no-repeat; +background-size: cover; + } + main { + margin-top: 5%; + } + .desktop-box-1 { + display: flex; + justify-content: space-between; + } + .desktop-box-2 { + display: flex; + } + header { + display: flex; + flex-direction: column; + padding: 0; + text-align: left; + max-width: 40%; + } + .rated-1 {margin-left: -6rem;} + .rated-2 {margin-left: -3rem;} + .box-1 > section { + display: flex; + } + .star-1 > img, + .star-2 > img, + .star-3 > img { + aspect-ratio: 1 / 1; + height: 20px; + } + .box-2 { + display: flex; + } + .colton { + height: 38dvh; + } + .irene { + margin-top: 3rem; + height: 38dvh; + } + .anne { + margin-top: 6rem; + height: 38dvh; + } +} + +@media (min-width:1024px) { + .colton { + height: 32dvh; + } + .irene { + margin-top: 3rem; + height: 32dvh; + } + .anne { + margin-top: 6rem; + height: 32dvh; + } +} +/* Media Queries - End */ \ No newline at end of file diff --git a/11profile-card-component-main/.gitignore b/11profile-card-component-main/.gitignore new file mode 100644 index 0000000..195d48c --- /dev/null +++ b/11profile-card-component-main/.gitignore @@ -0,0 +1,17 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store + +.prettierignore \ No newline at end of file diff --git a/11profile-card-component-main/README-template.md b/11profile-card-component-main/README-template.md new file mode 100644 index 0000000..357222c --- /dev/null +++ b/11profile-card-component-main/README-template.md @@ -0,0 +1,108 @@ +# Frontend Mentor - Profile card component solution + +This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +- Build out the project to the designs provided + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/11profile-card-component-main/README.md b/11profile-card-component-main/README.md new file mode 100644 index 0000000..5da0b75 --- /dev/null +++ b/11profile-card-component-main/README.md @@ -0,0 +1,87 @@ +# Frontend Mentor - Profile card component + +![Design preview for the Profile card component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this profile card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/11profile-card-component-main/design/desktop-design.jpg b/11profile-card-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..57b442b Binary files /dev/null and b/11profile-card-component-main/design/desktop-design.jpg differ diff --git a/11profile-card-component-main/design/desktop-preview.jpg b/11profile-card-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..d83cb14 Binary files /dev/null and b/11profile-card-component-main/design/desktop-preview.jpg differ diff --git a/11profile-card-component-main/design/mobile-design.jpg b/11profile-card-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..cf588cb Binary files /dev/null and b/11profile-card-component-main/design/mobile-design.jpg differ diff --git a/11profile-card-component-main/images/bg-pattern-bottom.svg b/11profile-card-component-main/images/bg-pattern-bottom.svg new file mode 100644 index 0000000..216cdde --- /dev/null +++ b/11profile-card-component-main/images/bg-pattern-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/11profile-card-component-main/images/bg-pattern-card.svg b/11profile-card-component-main/images/bg-pattern-card.svg new file mode 100644 index 0000000..5289dca --- /dev/null +++ b/11profile-card-component-main/images/bg-pattern-card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/11profile-card-component-main/images/bg-pattern-top.svg b/11profile-card-component-main/images/bg-pattern-top.svg new file mode 100644 index 0000000..0c4a24b --- /dev/null +++ b/11profile-card-component-main/images/bg-pattern-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/11profile-card-component-main/images/favicon-32x32.png b/11profile-card-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/11profile-card-component-main/images/favicon-32x32.png differ diff --git a/11profile-card-component-main/images/image-victor.jpg b/11profile-card-component-main/images/image-victor.jpg new file mode 100644 index 0000000..e1b20b2 Binary files /dev/null and b/11profile-card-component-main/images/image-victor.jpg differ diff --git a/11profile-card-component-main/index.html b/11profile-card-component-main/index.html new file mode 100644 index 0000000..ec6d735 --- /dev/null +++ b/11profile-card-component-main/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + Frontend Mentor | Profile card component + + + + + + +
+ +
+ +
+
+
+

Victor Crest

+ 26 +
+

London

+
+
+
+
+

80K

+

Followers

+
+
+

803K

+

Likes

+
+
+

1.4K

+

Photos

+
+
+
+
+
+ +
+ Challenge by Frontend Mentor. + Coded by Meric Cintosun. +
+ + diff --git a/11profile-card-component-main/style-guide.md b/11profile-card-component-main/style-guide.md new file mode 100644 index 0000000..efe7aae --- /dev/null +++ b/11profile-card-component-main/style-guide.md @@ -0,0 +1,31 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +Dark cyan: hsl(185, 75%, 39%) +Very dark desaturated blue: hsl(229, 23%, 23%) +Dark grayish blue: hsl(227, 10%, 46%) + +### Neutral + +Dark gray: hsl(0, 0%, 59%) + +## Typography + +### Body Copy + +- Font size (name and stats): 18px + +### Font + +- Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans) +- Weights: 400, 700 diff --git a/11profile-card-component-main/style.css b/11profile-card-component-main/style.css new file mode 100644 index 0000000..9c4c8a2 --- /dev/null +++ b/11profile-card-component-main/style.css @@ -0,0 +1,162 @@ +@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); +/* Variables - Start */ +:root { + --clr-primary-dark-cyan: hsl(185, 75%, 39%); + --clr-primary-very-dark-blue: hsl(229, 23%, 23%); + --clr-primary-very-dark-blu-opacity: hsla(229, 23%, 23%, 0.4); + --clr-primary-dark-grayish: hsl(227, 10%, 46%); + + --clr-neutral-dark: hsl(0, 0%, 59%); + + --font-family: 'Kumbh Sans', sans-serif; + + --fw-regular: 400; + --fw-bold: 700; + + --fs-body: 1.125rem; +} +/* Variables - End */ +/* CSS Reset - Start */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +/* CSS Reset - End */ +/* General Styles - Start */ +body { + font-family: var(--font-family); + background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); + background-position: right 40vw bottom 60vh, left 25vw top 50vh; + background-repeat: no-repeat, no-repeat; + background-color: var(--clr-primary-dark-cyan); +} +main { + display: grid; + max-width: 90%; + margin-inline: auto; + place-items: center; + border-radius: 1rem; + margin-top: 10%; + overflow: hidden; +} +article { + background-color: white; + width: 100%; + position: relative; +} +hr { + opacity: 0.3; +} +.data > p { + font-size: .875rem; +} +.background { + width: 100%; +} +.profile-img { + position: absolute; + top: -24%; + left: 32%; + aspect-ratio: 1 / 1; + border-radius: 100%; + border: 6px solid white; +} +.name { + display: flex; + margin-top: 4.5em; + margin-inline:auto; + justify-content:center; + text-align: center; +} +span { + margin-left: 10px; +} +.city { + text-align: center; + margin-bottom: 2em; +} +.stats { + display: flex; + text-align: center; + justify-content: space-between; + max-width:90%; + margin-inline:auto; + padding: 1.5em 0; +} +.fs-body {font-size: var(--fs-body);} +.fw-regular {font-weight: var(--fw-regular);} +.fw-bold {font-weight: var(--fw-bold);} +.clr-dark {color: var(--clr-primary-very-dark-blue);} +.clr-light {color: var(--clr-primary-very-dark-blu-opacity);} + +/* General Styles - End */ +/* Responsive - Start */ +@media (min-width:400px) { + main { + max-width: 22em; + margin-inline: auto; + } + .profile-img { + left: 34%; + } +} +/* Responsive - End */ \ No newline at end of file diff --git a/12article-preview-component-master b/12article-preview-component-master new file mode 160000 index 0000000..0b1998a --- /dev/null +++ b/12article-preview-component-master @@ -0,0 +1 @@ +Subproject commit 0b1998ac5ad56db546b9a6bd46a45e4ca9abea98 diff --git a/13huddle-landing-page-with-single-introductory-section-master/.gitignore b/13huddle-landing-page-with-single-introductory-section-master/.gitignore new file mode 100644 index 0000000..c306796 --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/.gitignore @@ -0,0 +1,15 @@ +# Avoid accidental Sketch file upload +############################################### +## Please do not remove line 5 - thanks! 🙂 ## +############################################### +*.sketch + +# Avoid accidental XD or Figma upload if you convert the design file +####################################################### +## Please do not remove lines 11 and 12 - thanks! 🙂 ## +####################################################### +*.xd +*.fig + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store diff --git a/13huddle-landing-page-with-single-introductory-section-master/README-template.md b/13huddle-landing-page-with-single-introductory-section-master/README-template.md new file mode 100644 index 0000000..271dce9 --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/README-template.md @@ -0,0 +1,111 @@ +# Frontend Mentor - Huddle landing page with single introductory section solution + +This is a solution to the [Huddle landing page with single introductory section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/huddle-landing-page-with-a-single-introductory-section-B_2Wvxgi0). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the page depending on their device's screen size +- See hover states for all interactive elements on the page + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/13huddle-landing-page-with-single-introductory-section-master/README.md b/13huddle-landing-page-with-single-introductory-section-master/README.md new file mode 100644 index 0000000..1d258b9 --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/README.md @@ -0,0 +1,92 @@ +# Frontend Mentor - Huddle landing page with single introductory section + +![Design preview for the Huddle landing page with single introductory section](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this landing page from the designs provided in the starter code. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout for the page depending on their device's screen size +- See hover states for all interactive elements on the page + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/13huddle-landing-page-with-single-introductory-section-master/design/active-states.jpg b/13huddle-landing-page-with-single-introductory-section-master/design/active-states.jpg new file mode 100644 index 0000000..2546d16 Binary files /dev/null and b/13huddle-landing-page-with-single-introductory-section-master/design/active-states.jpg differ diff --git a/13huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg b/13huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg new file mode 100644 index 0000000..36ccb1a Binary files /dev/null and b/13huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg differ diff --git a/13huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg b/13huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg new file mode 100644 index 0000000..474d35b Binary files /dev/null and b/13huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg differ diff --git a/13huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg b/13huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg new file mode 100644 index 0000000..9c5c70a Binary files /dev/null and b/13huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg differ diff --git a/13huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg b/13huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg new file mode 100644 index 0000000..95857ad --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/13huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg b/13huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg new file mode 100644 index 0000000..772b03b --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/13huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png b/13huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/13huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png differ diff --git a/13huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg b/13huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg new file mode 100644 index 0000000..73ab59c --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/13huddle-landing-page-with-single-introductory-section-master/images/logo.svg b/13huddle-landing-page-with-single-introductory-section-master/images/logo.svg new file mode 100644 index 0000000..90d5c32 --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/13huddle-landing-page-with-single-introductory-section-master/index.html b/13huddle-landing-page-with-single-introductory-section-master/index.html new file mode 100644 index 0000000..eec78c1 --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + Frontend Mentor | Huddle landing page with single introductory section + + + + + + +
+ +
+
+ +
+
+

Build The Community Your Fans Will Love

+

+ Huddle re-imagines the way we build communities. You have a voice, but so does your audience. + Create connections with your users as you engage in genuine discussion. +

+ +
+
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/13huddle-landing-page-with-single-introductory-section-master/style-guide.md b/13huddle-landing-page-with-single-introductory-section-master/style-guide.md new file mode 100644 index 0000000..a798a6d --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/style-guide.md @@ -0,0 +1,35 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Violet: hsl(257, 40%, 49%) +- Soft Magenta: hsl(300, 69%, 71%) + +## Typography + +### Headings + +- Family: [Poppins](https://fonts.google.com/specimen/Poppins) +- Weights: 400, 600 + +### Body + +- Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) +- Weights: 400 + +## Icons + +For the social icons, you can use a font icon library. Some suggestions can be found below: + +- [Font Awesome](https://fontawesome.com/) +- [IcoMoon](https://icomoon.io/) +- [Ionicons](https://ionicons.com/) diff --git a/13huddle-landing-page-with-single-introductory-section-master/style.css b/13huddle-landing-page-with-single-introductory-section-master/style.css new file mode 100644 index 0000000..83d56ad --- /dev/null +++ b/13huddle-landing-page-with-single-introductory-section-master/style.css @@ -0,0 +1,174 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); + +@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); + +:root { + --clr-primary-violet: hsl(257, 40%, 49%); + --clr-primary-soft: hsl(300, 69%, 71%); + + --ff-heading: 'Poppins', sans-serif; + --ff-body: 'Open Sans', sans-serif; + + --fw-regular: 400; + --fw-bold: 600; +} +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +body { + background-color: var(--clr-primary-violet); + background-image: url(images/bg-mobile.svg); + background-repeat: no-repeat; + color: white; + font-size: 1rem; +} +.ff-one {font-family: var(--ff-heading); font-weight: var(--fw-bold);} +.ff-two {font-family: var(--ff-body);} +svg { + fill:white; + border: 1px solid white; + border-radius: 1rem; + width: 30px; + height: 30px; + padding: .3rem; + margin: 0 .2rem; +} +main { + max-width: 85%; + margin-inline:auto; + margin-top: 10%; + display: grid; + gap: 2rem; + place-items: center; + text-align: center; +} +section { + display: grid; + gap: 1rem; + margin-top: 2rem; +} +section > h1 { + font-size: 1.5rem; +} +.logo { + width: 50%; + place-self: flex-start; +} +.social-media { + display: flex; + width: 100%; + justify-content: center; + margin-top: 1rem; +} +button { + width: 40%; + border-radius: .8rem; + font-size: .75rem; + padding: .5rem 1rem; + color: var(--clr-primary-violet); + border: none; + cursor: pointer; + margin-inline: auto; + box-shadow: 1px 1px 6px .5px rgb(77, 73, 73); +} + +@media (min-width:600px) { + body { + background-image:url(images/bg-desktop.svg); + } + main { + /* border: 3px solid lightblue; */ + margin-top: 2%; + max-width: 60%; + } + article { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + place-items: center; + } + .social-media{ + /* grid-area: social; */ + /* border: 3px solid red; */ + justify-content: flex-end; + } + .logo { + /* border: 3px solid blue; */ + width: 20%; + } + .mockups { + /* border: 3px solid green; */ + object-fit: cover; + } + section { + /* border: 3px solid yellow; */ + text-align: left; + } + section > p { + font-size: .8rem; + } + button { + margin-inline:initial; + } +} \ No newline at end of file diff --git a/14four-card-feature-section-master/.gitignore b/14four-card-feature-section-master/.gitignore new file mode 100644 index 0000000..c306796 --- /dev/null +++ b/14four-card-feature-section-master/.gitignore @@ -0,0 +1,15 @@ +# Avoid accidental Sketch file upload +############################################### +## Please do not remove line 5 - thanks! 🙂 ## +############################################### +*.sketch + +# Avoid accidental XD or Figma upload if you convert the design file +####################################################### +## Please do not remove lines 11 and 12 - thanks! 🙂 ## +####################################################### +*.xd +*.fig + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store diff --git a/14four-card-feature-section-master/README-template.md b/14four-card-feature-section-master/README-template.md new file mode 100644 index 0000000..2f26ade --- /dev/null +++ b/14four-card-feature-section-master/README-template.md @@ -0,0 +1,110 @@ +# Frontend Mentor - Four card feature section solution + +This is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the site depending on their device's screen size + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/14four-card-feature-section-master/README.md b/14four-card-feature-section-master/README.md new file mode 100644 index 0000000..b8c412e --- /dev/null +++ b/14four-card-feature-section-master/README.md @@ -0,0 +1,91 @@ +# Frontend Mentor - Four card feature section + +![Design preview for the Four card feature section coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this feature section and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should: + +- View the optimal layout for the site depending on their device's screen size + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/14four-card-feature-section-master/design/desktop-design.jpg b/14four-card-feature-section-master/design/desktop-design.jpg new file mode 100644 index 0000000..1993fed Binary files /dev/null and b/14four-card-feature-section-master/design/desktop-design.jpg differ diff --git a/14four-card-feature-section-master/design/desktop-preview.jpg b/14four-card-feature-section-master/design/desktop-preview.jpg new file mode 100644 index 0000000..94936b3 Binary files /dev/null and b/14four-card-feature-section-master/design/desktop-preview.jpg differ diff --git a/14four-card-feature-section-master/design/mobile-design.jpg b/14four-card-feature-section-master/design/mobile-design.jpg new file mode 100644 index 0000000..ce4ec5d Binary files /dev/null and b/14four-card-feature-section-master/design/mobile-design.jpg differ diff --git a/14four-card-feature-section-master/images/favicon-32x32.png b/14four-card-feature-section-master/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/14four-card-feature-section-master/images/favicon-32x32.png differ diff --git a/14four-card-feature-section-master/images/icon-calculator.svg b/14four-card-feature-section-master/images/icon-calculator.svg new file mode 100644 index 0000000..f768d66 --- /dev/null +++ b/14four-card-feature-section-master/images/icon-calculator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/14four-card-feature-section-master/images/icon-karma.svg b/14four-card-feature-section-master/images/icon-karma.svg new file mode 100644 index 0000000..f961782 --- /dev/null +++ b/14four-card-feature-section-master/images/icon-karma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/14four-card-feature-section-master/images/icon-supervisor.svg b/14four-card-feature-section-master/images/icon-supervisor.svg new file mode 100644 index 0000000..c4f5d8f --- /dev/null +++ b/14four-card-feature-section-master/images/icon-supervisor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/14four-card-feature-section-master/images/icon-team-builder.svg b/14four-card-feature-section-master/images/icon-team-builder.svg new file mode 100644 index 0000000..a9da606 --- /dev/null +++ b/14four-card-feature-section-master/images/icon-team-builder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/14four-card-feature-section-master/index.html b/14four-card-feature-section-master/index.html new file mode 100644 index 0000000..80742fe --- /dev/null +++ b/14four-card-feature-section-master/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + Frontend Mentor | Four card feature section + + + + + + +
+
+

+ Reliable, efficient delivery + Powered by Technology +

+

+ Our Artificial Intelligence powered tools use millions of project data points + to ensure that your project is successful +

+
+
+
+

Supervisor

+

Monitors activity to identify project roadblocks

+ +
+
+
+

Team Builder

+

Scans our talent network to create the optimal team for your project

+ +
+
+

Karma

+

Regularly evaluates our talent to ensure quality

+ +
+
+
+

Calculator

+

Uses data from past projects to provide better delivery estimates

+ +
+
+
+ + + + \ No newline at end of file diff --git a/14four-card-feature-section-master/style-guide.md b/14four-card-feature-section-master/style-guide.md new file mode 100644 index 0000000..dc1804b --- /dev/null +++ b/14four-card-feature-section-master/style-guide.md @@ -0,0 +1,34 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Red: hsl(0, 78%, 62%) +- Cyan: hsl(180, 62%, 55%) +- Orange: hsl(34, 97%, 64%) +- Blue: hsl(212, 86%, 64%) + +### Neutral + +- Very Dark Blue: hsl(234, 12%, 34%) +- Grayish Blue: hsl(229, 6%, 66%) +- Very Light Gray: hsl(0, 0%, 98%) + +## Typography + +### Body Copy + +- Font size: 15px + +### Fonts + +- Family: [Poppins](https://fonts.google.com/specimen/Poppins) +- Weights: 200, 400, 600 diff --git a/14four-card-feature-section-master/style.css b/14four-card-feature-section-master/style.css new file mode 100644 index 0000000..6f5357d --- /dev/null +++ b/14four-card-feature-section-master/style.css @@ -0,0 +1,167 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap'); + +:root { + --clr-primary-red: hsl(0, 78%, 62%); + --clr-primary-cyan: hsl(180, 62%, 55%); + --clr-primary-orange: hsl(34, 97%, 64%); + --clr-primary-blue: hsl(212, 86%, 64%); + + --clr-neutral-100: hsl(0, 0%, 98%); + --clr-neutral-400: hsl(229, 6%, 66%); + --clr-neutral-900: hsl(234, 12%, 34%); + + --font-family: 'Poppins', sans-serif; + + --fw-tiny: 200; + --fw-regular:400; + --fw-bold: 600; + + --fs-head: 1.3rem; + --fs-section-head: 1rem; + --fs-body: 0.875rem; +} +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +body { + font-family:var(--font-family); + background-color: var(--clr-neutral-100); +} +main { + max-width: 90%; + margin-inline:auto; + display: grid; + gap: 1.5rem; + margin-top: 5%; +} +section { + text-align: center; + padding: 1rem; + display: grid; + gap: 2rem; +} +.box { + box-shadow: 1px 1px 10px gray; + text-align: left; + gap: 0.5rem; + border-radius: 1rem; +} +.box > img { + justify-self:flex-end; + margin-top: 2rem; +} +.cyan{border-top:2px var(--clr-primary-cyan) solid;} +.red{border-top:2px var(--clr-primary-red) solid;} +.orange{border-top:2px var(--clr-primary-orange) solid;} +.blue{border-top:2px var(--clr-primary-blue) solid;} + +.fw-tiny {font-weight: var(--fw-tiny);} +.fw-regular {font-weight: var(--fw-regular);} +.fw-bold {font-weight: var(--fw-bold);} +.fs-head {font-size: var(--fs-head);} +.fs-section-head {font-size: var(--fs-section-head);} +.fs-body {font-size: var(--fs-body);} + +@media (min-width:600px) { + main { + gap: 0; + max-width: 70%; + } + .box { + margin-top: .4rem; + } + .cyan, + .blue { + max-width: 30%; + } + .orange, + .red { + max-width: 70%; + margin-inline: auto; + } + .header { + gap: 0.5rem; + max-width: 55%; + margin-inline:auto; + } + .title { + display: flex; + flex-direction: column; + } + .flex-grow { + display: flex; + justify-content: space-evenly; + } + .flex-column { + display: flex; + flex-direction: column; + gap: 1rem; + } + .cyan { + align-self: center; + } + .blue { + align-self:center; + } +} \ No newline at end of file diff --git a/2results-summary-component-project/index.html b/2results-summary-component-project/index.html index f1d91e1..26b8c38 100644 --- a/2results-summary-component-project/index.html +++ b/2results-summary-component-project/index.html @@ -66,9 +66,9 @@

Visual

- + Coded by Meric Cintosun. + \ No newline at end of file diff --git a/3product-preview-card-component/.gitignore b/3product-preview-card-component/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/3product-preview-card-component/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/3product-preview-card-component/README-template.md b/3product-preview-card-component/README-template.md new file mode 100644 index 0000000..754dfe2 --- /dev/null +++ b/3product-preview-card-component/README-template.md @@ -0,0 +1,111 @@ +# Frontend Mentor - Product preview card component solution + +This is a solution to the [Product preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover and focus states for interactive elements + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/3product-preview-card-component/README.md b/3product-preview-card-component/README.md new file mode 100644 index 0000000..7f11de5 --- /dev/null +++ b/3product-preview-card-component/README.md @@ -0,0 +1,92 @@ +# Frontend Mentor - Product preview card component + +![Design preview for the Product preview card component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this product preview card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover and focus states for interactive elements + +Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommend hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/3product-preview-card-component/design/active-states.jpg b/3product-preview-card-component/design/active-states.jpg new file mode 100644 index 0000000..0077dce Binary files /dev/null and b/3product-preview-card-component/design/active-states.jpg differ diff --git a/3product-preview-card-component/design/desktop-design.jpg b/3product-preview-card-component/design/desktop-design.jpg new file mode 100644 index 0000000..b7e9c92 Binary files /dev/null and b/3product-preview-card-component/design/desktop-design.jpg differ diff --git a/3product-preview-card-component/design/desktop-preview.jpg b/3product-preview-card-component/design/desktop-preview.jpg new file mode 100644 index 0000000..9884d8d Binary files /dev/null and b/3product-preview-card-component/design/desktop-preview.jpg differ diff --git a/3product-preview-card-component/design/mobile-design.jpg b/3product-preview-card-component/design/mobile-design.jpg new file mode 100644 index 0000000..0f6da04 Binary files /dev/null and b/3product-preview-card-component/design/mobile-design.jpg differ diff --git a/3product-preview-card-component/images/favicon-32x32.png b/3product-preview-card-component/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/3product-preview-card-component/images/favicon-32x32.png differ diff --git a/3product-preview-card-component/images/icon-cart.svg b/3product-preview-card-component/images/icon-cart.svg new file mode 100644 index 0000000..307ea61 --- /dev/null +++ b/3product-preview-card-component/images/icon-cart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/3product-preview-card-component/images/image-product-desktop.jpg b/3product-preview-card-component/images/image-product-desktop.jpg new file mode 100644 index 0000000..ca93ea1 Binary files /dev/null and b/3product-preview-card-component/images/image-product-desktop.jpg differ diff --git a/3product-preview-card-component/images/image-product-mobile.jpg b/3product-preview-card-component/images/image-product-mobile.jpg new file mode 100644 index 0000000..e2076e3 Binary files /dev/null and b/3product-preview-card-component/images/image-product-mobile.jpg differ diff --git a/3product-preview-card-component/index.html b/3product-preview-card-component/index.html new file mode 100644 index 0000000..99c0d6c --- /dev/null +++ b/3product-preview-card-component/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + Frontend Mentor | Product preview card component + + + + + +
+ + +
+
+

PERFUME

+
+
+

+ Gabrielle Essence Eau De Parfum +

+

A floral, solar and voluptuous interpretation composed by Olivier Polge, + Perfumer-Creator for the House of CHANEL. +

+
+
+

$149.99

+

$169.99

+
+
+ +

Add to card

+
+
+
+
+ Challenge by Frontend Mentor. + Coded by Meric Cintosun. +
+ + diff --git a/3product-preview-card-component/style-guide.md b/3product-preview-card-component/style-guide.md new file mode 100644 index 0000000..aaec4ff --- /dev/null +++ b/3product-preview-card-component/style-guide.md @@ -0,0 +1,35 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Dark cyan: hsl(158, 36%, 37%) +- Cream: hsl(30, 38%, 92%) + +### Neutral + +- Very dark blue: hsl(212, 21%, 14%) +- Dark grayish blue: hsl(228, 12%, 48%) +- White: hsl(0, 0%, 100%) + +## Typography + +### Body Copy + +- Font size (paragraph): 14px + +### Font + +- Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) +- Weights: 500, 700 + +- Family: [Fraunces](https://fonts.google.com/specimen/Fraunces) +- Weights: 700 diff --git a/3product-preview-card-component/style.css b/3product-preview-card-component/style.css new file mode 100644 index 0000000..a976fdd --- /dev/null +++ b/3product-preview-card-component/style.css @@ -0,0 +1,162 @@ +:root { + --green:158, 36%, 37%; + --cream:30, 38%, 92%; + --darkblue:212, 21%, 14%; + --gray:228, 12%, 48%; + --white:0, 0%, 100%; + + --gr:hsl(var(--green)); + --cr:hsl(var(--cream)); + --db:hsl(var(--darkblue)); + --gy:hsl(var(--gray)); + --wh:hsl(var(--white)); + + --ff-one: 'Montserrat'; + --ff-two: 'Fraunces'; + --fw-regular: 500; + --fw-bold: 700; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + background: hsl(var(--cream)); +} +main { + display: grid; + width: 40%; + grid-template-columns: 1fr 1fr; + margin: auto; + margin-top: 6%; + border-radius: 2rem; + overflow: hidden; +} +.mobile-img { + display: none; +} +.desktop-img { + display: inline-block; + max-width: 100%; + height: 100%; + object-fit: cover; +} +article { + height: 100%; + display: grid; + padding: 2rem 1rem; + background: hsl(var(--white)); +} +p, svg { + background: none; +} +.perfume, .price { + background: none; +} +.perfume p { + font-family: var(--ff-one); + color:hsl(var(--darkblue), .6); + font-size: .8rem; + letter-spacing:5px; + margin-bottom: 1rem; +} +.title { + font-family: var(--ff-two); + font-size: 2.4rem; + color:hsl(var(--darkblue)); +} +.paragraph { + color:hsl(var(--darkblue), 0.6); + font-family: var(--ff-one); + font-size: 14px; + margin: 1rem 0; +} +.price { + display: flex; + align-items: center; +} +.price-active, +.price-passive { + color:hsl(var(--green)); + font-size: 2rem; + font-family: var(--ff-two); +} +.price-passive { + font-size: 0.7rem; + color:hsl(var(--darkblue), 0.6); + text-decoration:line-through; + margin-left: .7rem; +} +.btn { + background-color: hsl(var(--green)); + color:hsl(var(--cream)); + display: flex; + padding: .7rem 1.5rem; + justify-content: center; + align-items: center; + font-size: 1.2rem; + font-family: var(--ff-one); + margin-top: 1rem; + cursor: pointer; + border-radius: 1rem; +} +.btn:hover { + background: hsl(var(--darkblue)); +} +.btn svg { + margin-right: .5rem; +} +.content { + background: hsl(var(--white)); +} +@media (max-width:768px) { + .desktop-img { + display: none; + } + .mobile-img { + display: inline-block; + max-width: 100%; + height: 100%; + object-fit: cover; + } + main { + display: grid; + grid-template-columns: 1fr; + margin: auto; + margin-top: 10%; + border-radius: 2rem; + overflow: hidden; + width: 50%; + } +} +@media (max-width:565px) { + main { + width: 50%; + } + article { + padding:.5rem 1rem; + } + .perfume p { + font-size: .5rem; + margin: 0; + margin-bottom: .5rem; + } + .title { + font-size: 1rem; + } + .paragraph { + font-size: .5rem; + } + .price-active { + font-size: 1rem; + } + .price-passive { + font-size: 0.35rem; + } + .btn { + font-size: .5rem; + margin: 0; + padding: 0; + margin-top: .5rem; + padding: .3rem; + } +} \ No newline at end of file diff --git a/3project-deneme/index.html b/3project-deneme/index.html deleted file mode 100644 index 03df916..0000000 --- a/3project-deneme/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Document - - - -

Hello!

- - \ No newline at end of file diff --git a/3project-deneme/style.css b/3project-deneme/style.css deleted file mode 100644 index 3af1ff1..0000000 --- a/3project-deneme/style.css +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - color:red; -} \ No newline at end of file diff --git a/4qr-code-component-main/.gitignore b/4qr-code-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/4qr-code-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/4qr-code-component-main/README-template.md b/4qr-code-component-main/README-template.md new file mode 100644 index 0000000..d281ce1 --- /dev/null +++ b/4qr-code-component-main/README-template.md @@ -0,0 +1,103 @@ +# Frontend Mentor - QR code component solution + +This is a solution to the [QR code component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/4qr-code-component-main/README.md b/4qr-code-component-main/README.md new file mode 100644 index 0000000..4553d5e --- /dev/null +++ b/4qr-code-component-main/README.md @@ -0,0 +1,87 @@ +# Frontend Mentor - QR code component + +![Design preview for the QR code component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this QR code component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/4qr-code-component-main/design/desktop-design.jpg b/4qr-code-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..a1cea0e Binary files /dev/null and b/4qr-code-component-main/design/desktop-design.jpg differ diff --git a/4qr-code-component-main/design/desktop-preview.jpg b/4qr-code-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..885a872 Binary files /dev/null and b/4qr-code-component-main/design/desktop-preview.jpg differ diff --git a/4qr-code-component-main/design/mobile-design.jpg b/4qr-code-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..f9c1b56 Binary files /dev/null and b/4qr-code-component-main/design/mobile-design.jpg differ diff --git a/4qr-code-component-main/images/favicon-32x32.png b/4qr-code-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/4qr-code-component-main/images/favicon-32x32.png differ diff --git a/4qr-code-component-main/images/image-qr-code.png b/4qr-code-component-main/images/image-qr-code.png new file mode 100644 index 0000000..2e0095a Binary files /dev/null and b/4qr-code-component-main/images/image-qr-code.png differ diff --git a/4qr-code-component-main/index.html b/4qr-code-component-main/index.html new file mode 100644 index 0000000..65c9f2a --- /dev/null +++ b/4qr-code-component-main/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + Frontend Mentor | QR code component + + + + + + + + +
+ +
+

+ Improve your front-end skills by building projects +

+
+ Scan the QR code to visit Frontend Mentor and take your coding skills to the next level +
+
+
+ + + + + \ No newline at end of file diff --git a/4qr-code-component-main/style-guide.md b/4qr-code-component-main/style-guide.md new file mode 100644 index 0000000..273553b --- /dev/null +++ b/4qr-code-component-main/style-guide.md @@ -0,0 +1,26 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +- White: hsl(0, 0%, 100%) +- Light gray: hsl(212, 45%, 89%) +- Grayish blue: hsl(220, 15%, 55%) +- Dark blue: hsl(218, 44%, 22%) + +## Typography + +### Body Copy + +- Font size (paragraph): 15px + +### Font + +- Family: [Outfit](https://fonts.google.com/specimen/Outfit) +- Weights: 400, 700 diff --git a/4qr-code-component-main/style.css b/4qr-code-component-main/style.css new file mode 100644 index 0000000..94c5503 --- /dev/null +++ b/4qr-code-component-main/style.css @@ -0,0 +1,93 @@ +:root { + --white: 0, 0%, 100%; + --lightgray: 212, 45%, 89%; + --grayishblue:220, 15%, 55%; + --darkblue: 218, 44%, 22%; + + --wh:hsl(var(--white)); + --lg:hsl(var(--lightgray)); + --gb:hsl(var(--grayishblue)); + --db:hsl(var(--darkblue)); + + --fw-regular: 400; + --fw-bold: 700; + --ff: 'Outfit' sans-serif; + +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + background: hsl(var(--lightgray)); + margin-top: 2%; +} +main { + background: hsl(var(--white)); + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; + align-items: center; + width: 30%; + border-radius: 1rem; +} +.qr-code { + width: 90%; + border-radius: 1rem; + margin-top: 1rem; +} +.content { + background: hsl(var(--white)); + display: grid; + grid-template-columns: 1fr; + gap:1.5rem; + margin-top: 2rem; +} +.title { + color:hsl(var(--darkkblue)); + font-size: 1.8rem; + background: none; + font-weight: var(--fw-bold); + font-family: var(--ff); + text-align: center; + width: 80%; + margin: auto; +} +.paragraph { + color:hsl(var(--darkblue), 0.6); + font-size: 1.3rem; + background: none; + font-family: var(--ff); + text-align: center; + width: 80%; + margin: 0 auto 3.5rem auto; +} +@media (max-width:600px) { + main { + width: 60%; + } + .content { + margin-top: 0; + margin-top:1rem; + gap: .7rem; + } + .title { + font-size: .9rem; + } + .paragraph { + font-size: .65rem; + margin-bottom: 0; + margin-bottom: 1.5rem; + } + .qr-code { + margin: .6rem auto auto auto; + } +} + + + + + + + diff --git a/5nft-preview-card-component-main/.gitignore b/5nft-preview-card-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/5nft-preview-card-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/5nft-preview-card-component-main/README-template.md b/5nft-preview-card-component-main/README-template.md new file mode 100644 index 0000000..d55857a --- /dev/null +++ b/5nft-preview-card-component-main/README-template.md @@ -0,0 +1,111 @@ +# Frontend Mentor - NFT preview card component solution + +This is a solution to the [NFT preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover states for interactive elements + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/5nft-preview-card-component-main/README.md b/5nft-preview-card-component-main/README.md new file mode 100644 index 0000000..7e5899e --- /dev/null +++ b/5nft-preview-card-component-main/README.md @@ -0,0 +1,92 @@ +# Frontend Mentor - NFT preview card component + +![Design preview for the NFT preview card component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this preview card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover states for interactive elements + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/5nft-preview-card-component-main/design/active-states.jpg b/5nft-preview-card-component-main/design/active-states.jpg new file mode 100644 index 0000000..52360b4 Binary files /dev/null and b/5nft-preview-card-component-main/design/active-states.jpg differ diff --git a/5nft-preview-card-component-main/design/desktop-design.jpg b/5nft-preview-card-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..6ab0586 Binary files /dev/null and b/5nft-preview-card-component-main/design/desktop-design.jpg differ diff --git a/5nft-preview-card-component-main/design/desktop-preview.jpg b/5nft-preview-card-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..89f7fb0 Binary files /dev/null and b/5nft-preview-card-component-main/design/desktop-preview.jpg differ diff --git a/5nft-preview-card-component-main/design/mobile-design.jpg b/5nft-preview-card-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..b658c98 Binary files /dev/null and b/5nft-preview-card-component-main/design/mobile-design.jpg differ diff --git a/5nft-preview-card-component-main/images/favicon-32x32.png b/5nft-preview-card-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/5nft-preview-card-component-main/images/favicon-32x32.png differ diff --git a/5nft-preview-card-component-main/images/icon-clock.svg b/5nft-preview-card-component-main/images/icon-clock.svg new file mode 100644 index 0000000..fa4e2c0 --- /dev/null +++ b/5nft-preview-card-component-main/images/icon-clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/5nft-preview-card-component-main/images/icon-ethereum.svg b/5nft-preview-card-component-main/images/icon-ethereum.svg new file mode 100644 index 0000000..a4348dd --- /dev/null +++ b/5nft-preview-card-component-main/images/icon-ethereum.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/5nft-preview-card-component-main/images/icon-view.svg b/5nft-preview-card-component-main/images/icon-view.svg new file mode 100644 index 0000000..ad1bd95 --- /dev/null +++ b/5nft-preview-card-component-main/images/icon-view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/5nft-preview-card-component-main/images/image-avatar.png b/5nft-preview-card-component-main/images/image-avatar.png new file mode 100644 index 0000000..b167515 Binary files /dev/null and b/5nft-preview-card-component-main/images/image-avatar.png differ diff --git a/5nft-preview-card-component-main/images/image-equilibrium.jpg b/5nft-preview-card-component-main/images/image-equilibrium.jpg new file mode 100644 index 0000000..b75fd34 Binary files /dev/null and b/5nft-preview-card-component-main/images/image-equilibrium.jpg differ diff --git a/5nft-preview-card-component-main/index.html b/5nft-preview-card-component-main/index.html new file mode 100644 index 0000000..fe70187 --- /dev/null +++ b/5nft-preview-card-component-main/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + Frontend Mentor | NFT preview card component + + + + + + +
+ +
+

Equilibrium #3429

+

+ Our Equilibrium collection promotes balance and calm. +

+
+
+
+ +

0.041 ETH

+
+
+ +

3 days left

+
+
+
+ +

Creation of Jules Wyvern

+
+
+ +
+ Challenge by Frontend Mentor. + Coded by Meric Cintosun. +
+ + \ No newline at end of file diff --git a/5nft-preview-card-component-main/style-guide.md b/5nft-preview-card-component-main/style-guide.md new file mode 100644 index 0000000..fd18a66 --- /dev/null +++ b/5nft-preview-card-component-main/style-guide.md @@ -0,0 +1,33 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Soft blue: hsl(215, 51%, 70%) +- Cyan: hsl(178, 100%, 50%) + +### Neutral + +- Very dark blue (main BG): hsl(217, 54%, 11%) +- Very dark blue (card BG): hsl(216, 50%, 16%) +- Very dark blue (line): hsl(215, 32%, 27%) +- White: hsl(0, 0%, 100%) + +## Typography + +### Body Copy + +- Font size (paragraph): 18px + +### Font + +- Family: [Outfit](https://fonts.google.com/specimen/Outfit) +- Weights: 300, 400, 600 diff --git a/5nft-preview-card-component-main/style.css b/5nft-preview-card-component-main/style.css new file mode 100644 index 0000000..390e05e --- /dev/null +++ b/5nft-preview-card-component-main/style.css @@ -0,0 +1,108 @@ +:root { + --primary-softblue: 215, 51%, 70%; + --primary-cyan: 178, 100%, 50%; + --neutral-verydarkblue-main-bg: 217, 54%, 11%; + --neutral-verydarkblue-card-bg: 216, 50%, 16%; + --neutral-verydarkblue-line: 215, 32%, 27%; + --neutral-white: 0, 0%, 100%; + + --primary-one:hsl(var(--primary-softblue)); + --primary-two:hsl(var(--primary-cyan)); + --neutral-one:hsl(var(--neutral-verydarkblue-main-bg)); + --neutral-two:hsl(var(--neutral-verydarkblue-card-bg)); + --neutral-three:hsl(var(--neutral-verydarkblue-line)); + --neutral-four:hsl(var(--neutral-white)); + + --font-family: 'Outfit'; + --fw-tiny: 300; + --fw-regular: 400; + --fw-bold: 600; +} +* { + font-family: var(--font-family); + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: hsl(var(--neutral-verydarkblue-main-bg)); +} +main { + display: grid; + grid-template-columns: 1fr; + place-items:center; + gap:1.5rem; + width: 350px; + margin: auto; + border-radius: 1rem; + background: hsl(var(--neutral-verydarkblue-card-bg)); + margin-top: 2%; +} +.nft { + width: 85%; + margin-top: 6%; + border-radius: 1rem; +} +.content, +.info, +.avatar { + width: 85%; +} +.content { + display: grid; + gap:1rem; +} +.title { + font-weight: var(--fw-bold); + color:hsl(var(--neutral-white)); + font-size: 1.3rem; +} +.paragraph { + font-size: 18px; + font-weight: var(--fw-tiny); + color: hsl(var(--primary-softblue)); +} +.eth, +.day, +.info { + display: flex; + font-size: 1rem; +} +.info { + justify-content: space-between; +} +.eth { + color: hsl(var(--primary-cyan)); +} +.eth svg { + margin-right: .6rem; +} +.info { + color:hsl(var(--primary-softblue)); + border-bottom: 1px solid hsl(var(--neutral-verydarkblue-line)); +} +.day svg { + margin-right: .6rem; +} +.avatar { + display: flex; + align-items: center; + padding-bottom: 2rem; +} +.avatar-img { + width: 35px; + border:1px solid white; + border-radius: 100%; + margin-right: 1rem; +} +.avatar-info { + color:hsl(var(--neutral-white)); + cursor: pointer; +} +@media (max-width:375px) { + main { + margin: 0; + margin: auto; + width: 325px; + } +} \ No newline at end of file diff --git a/6order-summary-component-main/.gitignore b/6order-summary-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/6order-summary-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/6order-summary-component-main/README-template.md b/6order-summary-component-main/README-template.md new file mode 100644 index 0000000..546ec9a --- /dev/null +++ b/6order-summary-component-main/README-template.md @@ -0,0 +1,110 @@ +# Frontend Mentor - Order summary card solution + +This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- See hover states for interactive elements + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/6order-summary-component-main/README.md b/6order-summary-component-main/README.md new file mode 100644 index 0000000..e7fb239 --- /dev/null +++ b/6order-summary-component-main/README.md @@ -0,0 +1,91 @@ +# Frontend Mentor - Order summary card + +![Design preview for the Order summary card coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this order summary card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- See hover states for interactive elements + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/6order-summary-component-main/design/active-states.jpg b/6order-summary-component-main/design/active-states.jpg new file mode 100644 index 0000000..0edc363 Binary files /dev/null and b/6order-summary-component-main/design/active-states.jpg differ diff --git a/6order-summary-component-main/design/desktop-design.jpg b/6order-summary-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..df5326f Binary files /dev/null and b/6order-summary-component-main/design/desktop-design.jpg differ diff --git a/6order-summary-component-main/design/desktop-preview.jpg b/6order-summary-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..4e2b6b2 Binary files /dev/null and b/6order-summary-component-main/design/desktop-preview.jpg differ diff --git a/6order-summary-component-main/design/mobile-design.jpg b/6order-summary-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..3077627 Binary files /dev/null and b/6order-summary-component-main/design/mobile-design.jpg differ diff --git a/6order-summary-component-main/images/favicon-32x32.png b/6order-summary-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/6order-summary-component-main/images/favicon-32x32.png differ diff --git a/6order-summary-component-main/images/icon-music.svg b/6order-summary-component-main/images/icon-music.svg new file mode 100644 index 0000000..1421b03 --- /dev/null +++ b/6order-summary-component-main/images/icon-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/images/illustration-hero.svg b/6order-summary-component-main/images/illustration-hero.svg new file mode 100644 index 0000000..c7f3534 --- /dev/null +++ b/6order-summary-component-main/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/images/pattern-background-desktop.svg b/6order-summary-component-main/images/pattern-background-desktop.svg new file mode 100644 index 0000000..c6e640c --- /dev/null +++ b/6order-summary-component-main/images/pattern-background-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/images/pattern-background-mobile.svg b/6order-summary-component-main/images/pattern-background-mobile.svg new file mode 100644 index 0000000..905cb4b --- /dev/null +++ b/6order-summary-component-main/images/pattern-background-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/index.html b/6order-summary-component-main/index.html new file mode 100644 index 0000000..e14a86d --- /dev/null +++ b/6order-summary-component-main/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + Frontend Mentor | Order summary card + + + + + + +
+
+
+ +
+
+

Order Summary

+

You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!

+
+
+
+ +
+

Annual Plan

+

$59.99/year

+
+
+ +
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/.gitignore b/6order-summary-component-main/order-summary-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/README-template.md b/6order-summary-component-main/order-summary-component-main/README-template.md new file mode 100644 index 0000000..546ec9a --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/README-template.md @@ -0,0 +1,110 @@ +# Frontend Mentor - Order summary card solution + +This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- See hover states for interactive elements + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/6order-summary-component-main/order-summary-component-main/README.md b/6order-summary-component-main/order-summary-component-main/README.md new file mode 100644 index 0000000..e7fb239 --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/README.md @@ -0,0 +1,91 @@ +# Frontend Mentor - Order summary card + +![Design preview for the Order summary card coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this order summary card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- See hover states for interactive elements + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/6order-summary-component-main/order-summary-component-main/design/active-states.jpg b/6order-summary-component-main/order-summary-component-main/design/active-states.jpg new file mode 100644 index 0000000..0edc363 Binary files /dev/null and b/6order-summary-component-main/order-summary-component-main/design/active-states.jpg differ diff --git a/6order-summary-component-main/order-summary-component-main/design/desktop-design.jpg b/6order-summary-component-main/order-summary-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..df5326f Binary files /dev/null and b/6order-summary-component-main/order-summary-component-main/design/desktop-design.jpg differ diff --git a/6order-summary-component-main/order-summary-component-main/design/desktop-preview.jpg b/6order-summary-component-main/order-summary-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..4e2b6b2 Binary files /dev/null and b/6order-summary-component-main/order-summary-component-main/design/desktop-preview.jpg differ diff --git a/6order-summary-component-main/order-summary-component-main/design/mobile-design.jpg b/6order-summary-component-main/order-summary-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..3077627 Binary files /dev/null and b/6order-summary-component-main/order-summary-component-main/design/mobile-design.jpg differ diff --git a/6order-summary-component-main/order-summary-component-main/images/favicon-32x32.png b/6order-summary-component-main/order-summary-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/6order-summary-component-main/order-summary-component-main/images/favicon-32x32.png differ diff --git a/6order-summary-component-main/order-summary-component-main/images/icon-music.svg b/6order-summary-component-main/order-summary-component-main/images/icon-music.svg new file mode 100644 index 0000000..1421b03 --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/images/icon-music.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/images/illustration-hero.svg b/6order-summary-component-main/order-summary-component-main/images/illustration-hero.svg new file mode 100644 index 0000000..c7f3534 --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/images/illustration-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/images/pattern-background-desktop.svg b/6order-summary-component-main/order-summary-component-main/images/pattern-background-desktop.svg new file mode 100644 index 0000000..c6e640c --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/images/pattern-background-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/images/pattern-background-mobile.svg b/6order-summary-component-main/order-summary-component-main/images/pattern-background-mobile.svg new file mode 100644 index 0000000..905cb4b --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/images/pattern-background-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/index.html b/6order-summary-component-main/order-summary-component-main/index.html new file mode 100644 index 0000000..0eca502 --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Frontend Mentor | Order summary card + + + + + + + Order Summary + + You can now listen to millions of songs, audiobooks, and podcasts on any + device anywhere you like! + + Annual Plan + $59.99/year + + Change + + Proceed to Payment + Cancel Order + +
+ Challenge by Frontend Mentor. + Coded by Your Name Here. +
+ + \ No newline at end of file diff --git a/6order-summary-component-main/order-summary-component-main/style-guide.md b/6order-summary-component-main/order-summary-component-main/style-guide.md new file mode 100644 index 0000000..113b542 --- /dev/null +++ b/6order-summary-component-main/order-summary-component-main/style-guide.md @@ -0,0 +1,32 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Pale blue: hsl(225, 100%, 94%) +- Bright blue: hsl(245, 75%, 52%) + +### Neutral + +- Very pale blue: hsl(225, 100%, 98%) +- Desaturated blue: hsl(224, 23%, 55%) +- Dark blue: hsl(223, 47%, 23%) + +## Typography + +### Body Copy + +- Font size (paragraph): 16px + +### Font + +- Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display) +- Weights: 500, 700, 900 diff --git a/6order-summary-component-main/style-guide.md b/6order-summary-component-main/style-guide.md new file mode 100644 index 0000000..113b542 --- /dev/null +++ b/6order-summary-component-main/style-guide.md @@ -0,0 +1,32 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Pale blue: hsl(225, 100%, 94%) +- Bright blue: hsl(245, 75%, 52%) + +### Neutral + +- Very pale blue: hsl(225, 100%, 98%) +- Desaturated blue: hsl(224, 23%, 55%) +- Dark blue: hsl(223, 47%, 23%) + +## Typography + +### Body Copy + +- Font size (paragraph): 16px + +### Font + +- Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display) +- Weights: 500, 700, 900 diff --git a/6order-summary-component-main/style.css b/6order-summary-component-main/style.css new file mode 100644 index 0000000..264227b --- /dev/null +++ b/6order-summary-component-main/style.css @@ -0,0 +1,198 @@ +/* CSS Variables - Start */ +:root { + --clr-primary-100: hsl(225, 100%, 94%); + --clr-primary-900: hsl(245, 75%, 52%); + --bgclr-primary-100-opacity: hsla(225, 75%, 94%, 0.4); + --clr-neutral-100:hsl(225, 100%, 98%); + --clr-neutral-400:hsl(224, 23%, 55%); + --clr-neutral-900: hsl(223, 47%, 23%); + + --ff-body:'Red Hat Display', sans-serif; + + --fs-title: 1.5rem; + --fs-default:1rem; + + --fw-regular: 500; + --fw-semibold: 700; + --fw-bold:900; +} + +/* CSS Variables - End */ + +/* CSS Reset - Start */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + + +body { + background-image: url(images/pattern-background-mobile.svg); + background-repeat: no-repeat; + background-size:contain; + background-color: var(--clr-primary-100); +} +main { + width: 90%; + margin-inline: auto; + font-family: var(--ff-body); + position: fixed; + inset: 0rem; + aspect-ratio: 1 / 1; + margin: auto; +} +.card-img > img { + width: 100%; +} +.card { + max-width: 90%; + margin-inline:auto; + background: white; + border-radius: 1rem; + overflow: hidden; + text-align: center; +} +.card-body { + margin-top: 1rem; +} +.grid { + display: grid; + gap: 1rem; +} +.grid-flow { + width: 80%; + margin-inline:auto; + display: grid; + gap: 1rem; +} +.plan-body { + display: flex; + justify-content: space-between; + background-color: var(--bgclr-primary-100-opacity); + border-radius: 1rem; +} +.btn { + border: none; + background: none; + cursor: pointer; +} +.change-button { + color:var(--clr-primary-900); + text-decoration: underline; + margin-right: .3rem; +} +.change-button:hover { + opacity: 0.7; + text-decoration: none; +} +.plan-details { + display: flex; +} +.plan-title { + margin-left: 1rem; +} +.button-holder { + display: grid; + grid-template-columns: 1fr; +} +.holder-button { + padding: .7rem 1rem; + background-color:var(--clr-primary-900); + border-radius: 1rem; + font-weight: var(--fw-semibold); +} +#payment-button {color:var(--clr-neutral-100); transition:background-color .2s} +#payment-button:hover { + background-color: var(--clr-neutral-400); +} +#cancel-button {background:none;} +#cancel-button:hover {opacity: 1;} +/* Typography */ +.title { + font-weight: var(--fw-bold); + color: var(--clr-neutral-900); + font-size: var(--fs-title); +} +.clamp-text { + color:var(--clr-neutral-900); + font-size: clamp(.5rem 1rem 1.0001rem); +} +.text-opacity { + opacity: 0.7; +} +#price { + font-size:.8rem; + text-align: left; +} +#annual-plan-text {font-weight: var(--fw-semibold);} + +@media (min-width:450px) { + + body { + background-image: url(images/pattern-background-desktop.svg); + } + + main { + max-width: 27.5em; + } +} \ No newline at end of file diff --git a/7stats-preview-card-component-main/.gitignore b/7stats-preview-card-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/7stats-preview-card-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/7stats-preview-card-component-main/README-template.md b/7stats-preview-card-component-main/README-template.md new file mode 100644 index 0000000..5fb979b --- /dev/null +++ b/7stats-preview-card-component-main/README-template.md @@ -0,0 +1,110 @@ +# Frontend Mentor - Stats preview card component solution + +This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout depending on their device's screen size + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/7stats-preview-card-component-main/README.md b/7stats-preview-card-component-main/README.md new file mode 100644 index 0000000..04dae9c --- /dev/null +++ b/7stats-preview-card-component-main/README.md @@ -0,0 +1,91 @@ +# Frontend Mentor - Stats preview card component + +![Design preview for the Stats preview card component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout depending on their device's screen size + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/7stats-preview-card-component-main/design/desktop-design.jpg b/7stats-preview-card-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..ab614ee Binary files /dev/null and b/7stats-preview-card-component-main/design/desktop-design.jpg differ diff --git a/7stats-preview-card-component-main/design/desktop-preview.jpg b/7stats-preview-card-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..f0b19c5 Binary files /dev/null and b/7stats-preview-card-component-main/design/desktop-preview.jpg differ diff --git a/7stats-preview-card-component-main/design/mobile-design.jpg b/7stats-preview-card-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..12e3b85 Binary files /dev/null and b/7stats-preview-card-component-main/design/mobile-design.jpg differ diff --git a/7stats-preview-card-component-main/images/favicon-32x32.png b/7stats-preview-card-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/7stats-preview-card-component-main/images/favicon-32x32.png differ diff --git a/7stats-preview-card-component-main/images/image-header-desktop.jpg b/7stats-preview-card-component-main/images/image-header-desktop.jpg new file mode 100644 index 0000000..1d49067 Binary files /dev/null and b/7stats-preview-card-component-main/images/image-header-desktop.jpg differ diff --git a/7stats-preview-card-component-main/images/image-header-mobile.jpg b/7stats-preview-card-component-main/images/image-header-mobile.jpg new file mode 100644 index 0000000..73dfe51 Binary files /dev/null and b/7stats-preview-card-component-main/images/image-header-mobile.jpg differ diff --git a/7stats-preview-card-component-main/index.html b/7stats-preview-card-component-main/index.html new file mode 100644 index 0000000..5a4d471 --- /dev/null +++ b/7stats-preview-card-component-main/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + Frontend Mentor | Stats preview card component + + + + + + +
+
+ + +
+
+

Get insights that help your business grow.

+

Discover the benefits of data analytics and make better decisions regarding revenue, customer experince, and overall efficiency.

+
+
+

10k+

+

COMPANIES

+
+
+

314

+

TEMPLATES

+
+
+

12M+

+

QUERIES

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/7stats-preview-card-component-main/style-guide.md b/7stats-preview-card-component-main/style-guide.md new file mode 100644 index 0000000..af5d7af --- /dev/null +++ b/7stats-preview-card-component-main/style-guide.md @@ -0,0 +1,36 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Very dark blue (main background): hsl(233, 47%, 7%) +- Dark desaturated blue (card background): hsl(244, 38%, 16%) +- Soft violet (accent): hsl(277, 64%, 61%) + +### Neutral + +- White (main heading, stats): hsl(0, 0%, 100%) +- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75) +- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6) + +## Typography + +### Body Copy + +- Font size: 15px + +### Font + +- Family: [Inter](https://fonts.google.com/specimen/Inter) +- Weights: 400, 700 + +- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca) +- Weights: 400 diff --git a/7stats-preview-card-component-main/style.css b/7stats-preview-card-component-main/style.css new file mode 100644 index 0000000..093fd60 --- /dev/null +++ b/7stats-preview-card-component-main/style.css @@ -0,0 +1,175 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); + +@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap'); + +:root { + --main-bg: hsl(233, 47%, 7%); + --card-bg: hsl(244, 38%, 16%); + --clr-accent-400: hsl(277, 64%, 61%); + + --clr-neutral-100: hsl(0, 0%, 100%); + --clr-neutral-400: hsla(0, 0%, 100%, 0.75); + --clr-neutral-900: hsla(0, 0%, 100%, 0.6); + --clr-neutral-title-900: hsl(0, 0%, 100%); + --ff-one: 'Inter', sans-serif; + --ff-two: 'Lexend Deca', sans-serif; + + --fw-regular: 400; + --fw-bold: 700; +} +/* CSS Reset - Start */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +/* CSS Reset - End */ + +/* General Styles - Start */ +body { + background-color: var(--main-bg); +} +main { + background-color: var(--card-bg); + max-width: 90%; + inset: 0rem; + border-radius: 1rem; + overflow: hidden; + margin-inline:auto; + margin-top: 5%; +} +.image { + width: 100%; +} +.mobile-img { + width: 100%; + height: 100%; + object-fit: cover; +} +.desktop-img { + display: none; +} +.content { + max-width: 80%; + margin-inline:auto; + display: grid; + gap: 1.5rem; + text-align: center; +} +/* General Styles - End */ +.title { + margin-top: 1.5rem; + font-size: min(1.5rem, 2rem, 2.5rem); + color:var(--clr-neutral-100); + font-weight: var(--fw-bold); + font-family: var(--ff-one); +} +.paragraph { + font-size: .9rem; + color:var(--clr-neutral-400); + font-family: var(--ff-one); +} +.stats { + display: grid; + grid-template-columns: 1fr; + gap: 1.5em; + font-family:var(--ff-two); + color:var(--clr-neutral-900); + font-weight: var(--fw-bold); + font-size: .9rem; + margin-bottom: 1.5rem; +} +.number { + color: var(--clr-neutral-title-900); + font-size: 1.8rem; + margin-bottom: .3rem; +} +.title > span { + color:var(--clr-accent-400); +} +@media (min-width:620px) { + main { + display: grid; + grid-template-columns: 1fr 1fr; + overflow: hidden; + } + .content { + max-width: 100%; + padding: 4rem; + text-align: left; + } + .title { + font-size: 2.5rem; + } + .mobile-img { + display: none; + } + .stats { + display: flex; + justify-content: space-between; + } + .desktop-img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } +} \ No newline at end of file diff --git a/8-column-preview-card-component-main/.gitignore b/8-column-preview-card-component-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/8-column-preview-card-component-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/8-column-preview-card-component-main/README-template.md b/8-column-preview-card-component-main/README-template.md new file mode 100644 index 0000000..7b95cff --- /dev/null +++ b/8-column-preview-card-component-main/README-template.md @@ -0,0 +1,111 @@ +# Frontend Mentor - 3-column preview card component solution + +This is a solution to the [3-column preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover states for interactive elements + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/8-column-preview-card-component-main/README.md b/8-column-preview-card-component-main/README.md new file mode 100644 index 0000000..7a9498e --- /dev/null +++ b/8-column-preview-card-component-main/README.md @@ -0,0 +1,93 @@ +# Frontend Mentor - 3-column preview card component + +![Design preview for the 3-column preview card component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your challenge is to build out this 3-column preview card component and get it looking as close to the design as possible. + +You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +Your users should be able to: + +- View the optimal layout depending on their device's screen size +- See hover states for interactive elements + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/8-column-preview-card-component-main/design/active-states.jpg b/8-column-preview-card-component-main/design/active-states.jpg new file mode 100644 index 0000000..2edb663 Binary files /dev/null and b/8-column-preview-card-component-main/design/active-states.jpg differ diff --git a/8-column-preview-card-component-main/design/desktop-design.jpg b/8-column-preview-card-component-main/design/desktop-design.jpg new file mode 100644 index 0000000..f6ec462 Binary files /dev/null and b/8-column-preview-card-component-main/design/desktop-design.jpg differ diff --git a/8-column-preview-card-component-main/design/desktop-preview.jpg b/8-column-preview-card-component-main/design/desktop-preview.jpg new file mode 100644 index 0000000..a1df9da Binary files /dev/null and b/8-column-preview-card-component-main/design/desktop-preview.jpg differ diff --git a/8-column-preview-card-component-main/design/mobile-design.jpg b/8-column-preview-card-component-main/design/mobile-design.jpg new file mode 100644 index 0000000..d8204d7 Binary files /dev/null and b/8-column-preview-card-component-main/design/mobile-design.jpg differ diff --git a/8-column-preview-card-component-main/images/favicon-32x32.png b/8-column-preview-card-component-main/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/8-column-preview-card-component-main/images/favicon-32x32.png differ diff --git a/8-column-preview-card-component-main/images/icon-luxury.svg b/8-column-preview-card-component-main/images/icon-luxury.svg new file mode 100644 index 0000000..ff6bee2 --- /dev/null +++ b/8-column-preview-card-component-main/images/icon-luxury.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/8-column-preview-card-component-main/images/icon-sedans.svg b/8-column-preview-card-component-main/images/icon-sedans.svg new file mode 100644 index 0000000..a5cc5b6 --- /dev/null +++ b/8-column-preview-card-component-main/images/icon-sedans.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/8-column-preview-card-component-main/images/icon-suvs.svg b/8-column-preview-card-component-main/images/icon-suvs.svg new file mode 100644 index 0000000..5b107ab --- /dev/null +++ b/8-column-preview-card-component-main/images/icon-suvs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/8-column-preview-card-component-main/index.html b/8-column-preview-card-component-main/index.html new file mode 100644 index 0000000..581bd98 --- /dev/null +++ b/8-column-preview-card-component-main/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + Frontend Mentor | 3-column preview card component + + + + + +
+
+ +

Sedans

+

+ Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city + or on your next road trip. +

+ +
+
+ +

SUVs

+

+ Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation + and off-road adventures. +

+ +
+
+ +

Luxury

+

+ Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury + rental and arrive in style. +

+ +
+
+ +
+ Challenge by Frontend Mentor. + Coded by Meric Cintosun. +
+ + \ No newline at end of file diff --git a/8-column-preview-card-component-main/style-guide.md b/8-column-preview-card-component-main/style-guide.md new file mode 100644 index 0000000..d0d755d --- /dev/null +++ b/8-column-preview-card-component-main/style-guide.md @@ -0,0 +1,35 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +Bright orange: hsl(31, 77%, 52%) +Dark cyan: hsl(184, 100%, 22%) +Very dark cyan: hsl(179, 100%, 13%) + +### Neutral + +Transparent white (paragraphs): hsla(0, 0%, 100%, 0.75) +Very light gray (background, headings, buttons): hsl(0, 0%, 95%) + +## Typography + +### Body Copy + +- Font size: 15px + +### Font + +- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca) +- Weights: 400 + +- Family: [Big Shoulders Display](https://fonts.google.com/specimen/Big+Shoulders+Display) +- Weights: 700 diff --git a/8-column-preview-card-component-main/style.css b/8-column-preview-card-component-main/style.css new file mode 100644 index 0000000..4d4a31f --- /dev/null +++ b/8-column-preview-card-component-main/style.css @@ -0,0 +1,168 @@ +@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap'); + +@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700&display=swap'); + +/* CSS Variables - Start */ + +:root { + --clr-primary-bright-orange:hsl(31, 77%, 52%); + --clr-primary-dark-cyan:hsl(184, 100%, 22%); + --clr-primary-very-dark-cyan:hsl(179, 100%, 13%); + --clr-neutral-transparent:hsla(0, 0%, 100%, 0.75); + --clr-neutral-light-gray: hsl(0, 0%, 95%); + + --ff-one:'Lexend Deca', sans-serif; + --ff-two: 'Big Shoulders Display', cursive; + + --fw-regular: 400; + --fw-bold: 700; +} +/* CSS Variables - End */ + + +/* CSS Reset - Start */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* CSS Reset - End */ + +/* General Styles - Start */ + +body { + background-color: var(--clr-neutral-light-gray); +} +main { + max-width: 80%; + margin-inline: auto; + display: grid; + grid-template-columns: 1fr; + margin-top: 14%; + border-radius: .5rem; + overflow: hidden; +} +.card-box { + padding: 2rem; + color: var(--clr-neutral-light-gray); + font-family: var(--ff-two); + display: grid; + place-content: start; + gap: 1.2rem; +} +.sedans { + background-color:var(--clr-primary-bright-orange); +} +.suvs { + background-color: var(--clr-primary-dark-cyan); +} +.luxury { + background-color: var(--clr-primary-very-dark-cyan); +} +.btn { + background-color: var(--clr-neutral-light-gray); + border: none; + margin-top: 2.6rem; + max-width: 60%; + border-radius: 1.5rem; + padding: .8rem 1rem; + font-family: var(--ff-one); + font-size: .9rem; + cursor: pointer; + transition: background-color 0.2s; +} +#sedans {color: var(--clr-primary-bright-orange); border:2px solid white;} +#suvs {color: var(--clr-primary-dark-cyan); border:2px solid white;} +#luxury {color: var(--clr-primary-dark-cyan); border:2px solid white;} + +#sedans:hover {background: none; color:white;} +#suvs:hover {background: none; color: white;} +#luxury:hover {background: none; color: white;} +/* General Styles - End */ + +/* Typography - Start */ + +.title { + font-size: clamp(2rem, 2.5rem, 3rem); + text-transform: uppercase; + font-weight: var(--fw-bold); +} +.card-box > p { + color: var(--clr-neutral-transparent); + font-family: var(--ff-one); +} +/* Typography - End */ + +/* Media Query - Start */ +@media (min-width:768px) { + main { + margin-top: 7%; + grid-template-columns: 1fr 1fr 1fr; + width: 90%; + } + p { + font-size: clamp(.4rem, .9rem, .900001rem); + height: 120px; + } +} +/* Media Query - End */ \ No newline at end of file diff --git a/9single-price-grid-component-master/.gitignore b/9single-price-grid-component-master/.gitignore new file mode 100644 index 0000000..c306796 --- /dev/null +++ b/9single-price-grid-component-master/.gitignore @@ -0,0 +1,15 @@ +# Avoid accidental Sketch file upload +############################################### +## Please do not remove line 5 - thanks! 🙂 ## +############################################### +*.sketch + +# Avoid accidental XD or Figma upload if you convert the design file +####################################################### +## Please do not remove lines 11 and 12 - thanks! 🙂 ## +####################################################### +*.xd +*.fig + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store diff --git a/9single-price-grid-component-master/README-template.md b/9single-price-grid-component-master/README-template.md new file mode 100644 index 0000000..3751d1e --- /dev/null +++ b/9single-price-grid-component-master/README-template.md @@ -0,0 +1,111 @@ +# Frontend Mentor - Single price grid component solution + +This is a solution to the [Single price grid component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the component depending on their device's screen size +- See a hover state on desktop for the Sign Up call-to-action + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/9single-price-grid-component-master/README.md b/9single-price-grid-component-master/README.md new file mode 100644 index 0000000..52c7424 --- /dev/null +++ b/9single-price-grid-component-master/README.md @@ -0,0 +1,88 @@ +# Frontend Mentor - Single price grid component + +![Design preview for the Single price grid component coding challenge](./design/desktop-preview.jpg) + +## Welcome! 👋 + +Thanks for checking out this front-end coding challenge. + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. + +**To do this challenge, you need a basic understanding of HTML and CSS.** + +## The challenge + +Your users should be able to: + +- View the optimal layout for the component depending on their device's screen size +- See a hover state on desktop for the Sign Up call-to-action + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. + +The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. + +If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). + +You will find all the required assets in the `/images` folder. The assets are already optimized. + +There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +This challenge is completely free. Please share it with anyone who will find it useful for practice. + +**Have fun building!** 🚀 diff --git a/9single-price-grid-component-master/design/desktop-design.jpg b/9single-price-grid-component-master/design/desktop-design.jpg new file mode 100644 index 0000000..154dc1e Binary files /dev/null and b/9single-price-grid-component-master/design/desktop-design.jpg differ diff --git a/9single-price-grid-component-master/design/desktop-preview.jpg b/9single-price-grid-component-master/design/desktop-preview.jpg new file mode 100644 index 0000000..49313c7 Binary files /dev/null and b/9single-price-grid-component-master/design/desktop-preview.jpg differ diff --git a/9single-price-grid-component-master/design/mobile-design.jpg b/9single-price-grid-component-master/design/mobile-design.jpg new file mode 100644 index 0000000..1ec1ca1 Binary files /dev/null and b/9single-price-grid-component-master/design/mobile-design.jpg differ diff --git a/9single-price-grid-component-master/images/favicon-32x32.png b/9single-price-grid-component-master/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/9single-price-grid-component-master/images/favicon-32x32.png differ diff --git a/9single-price-grid-component-master/index.html b/9single-price-grid-component-master/index.html new file mode 100644 index 0000000..76f7df9 --- /dev/null +++ b/9single-price-grid-component-master/index.html @@ -0,0 +1,59 @@ + + + + + + + + + + Frontend Mentor | Single Price Grid Component + + + + + + +
+
+

Join our community

+

30-day, hassle-free money back guarantee

+

Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.

+
+ +
+

Monthly Subscription

+

$29 per month

+

Full access for less than $1 a day

+ +
+ +
+

Why Us

+
+

Tutorials by industry experts

+

Peer & expert code review

+

Coding exercises

+

Access to our GitHub repos

+

Community forum

+

Flashcard decks

+

New videos every week

+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/9single-price-grid-component-master/style-guide.md b/9single-price-grid-component-master/style-guide.md new file mode 100644 index 0000000..df78689 --- /dev/null +++ b/9single-price-grid-component-master/style-guide.md @@ -0,0 +1,31 @@ +# Front-end Style Guide + +## Layout + +The designs were created to the following widths: + +- Mobile: 375px +- Desktop: 1440px + +## Colors + +### Primary + +- Cyan: hsl(179, 62%, 43%) +- Bright Yellow: hsl(71, 73%, 54%) + +### Neutral + +- Light Gray: hsl(204, 43%, 93%) +- Grayish Blue: hsl(218, 22%, 67%) + +## Typography + +### Body Copy + +- Font size: 16px + +### Font + +- Family: [Karla](https://fonts.google.com/specimen/Karla) +- Weights: 400, 700 \ No newline at end of file diff --git a/9single-price-grid-component-master/style.css b/9single-price-grid-component-master/style.css new file mode 100644 index 0000000..81620ac --- /dev/null +++ b/9single-price-grid-component-master/style.css @@ -0,0 +1,197 @@ +@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); + +:root { + --clr-primary-cyan: hsl(179, 62%, 43%); + --clr-primary-cyan-opacity: hsla(179, 62%, 43%, 0.6); + --clr-primary-yellow: hsl(71, 73%, 54%); + --clr-neutral-gray: hsl(204, 43%, 93%); + --clr-neutral-blue: hsl(218, 22%, 67%); + + --font-family: 'Karla', sans-serif; + --fw-regular: 400; + --fw-bold: 700; + + --fs-regular: 1rem; + +} +/* CSS Reset - Start */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +* { + margin: 0; + padding: 0; + font: inherit; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} +/* Set core body defaults */ +body { + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture, +svg { + max-width: 100%; + display: block; +} + + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +/* CSS Reset - End */ + +/* General Styles - Start */ +body { + background-color: var(--clr-neutral-gray); + font-size: 0.875rem; + font-family: var(--font-family); + color: white; +} +main { + width: 80%; + margin-inline: auto; + inset: 0rem; + aspect-ratio: 1 / 1; + position: fixed; + margin:auto; + box-shadow: 1px 1px 50px 1px hsl(218, 22%, 67%); + border-radius: 1rem; + display: grid; + grid-template-columns: 1fr; +} +section { + + padding: 1rem; + display: grid; + gap: 1rem; +} +#box-1 { + background-color: white; + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} +#box-2 { + background-color:var(--clr-primary-cyan); +} +#box-3 { + background-color: var(--clr-primary-cyan-opacity); + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + +} +/* General Styles - End */ + +/* Typography - Start */ +h1, +h2, +.price-paragraph, +button {font-size: var(--fs-regular);} +.title { + font-weight: var(--fw-bold); +} +.join-title { + color: var(--clr-primary-cyan); +} +#box-1 > h2 { + color: var(--clr-primary-yellow); +} +#box-1 > p { + color: var(--clr-neutral-blue); +} +.paragraph > p, +.price-paragraph { + color: var(--clr-neutral-gray); +} +span { + font-size: 1.5rem; + font-weight: var(--fw-regular); + color: white; + margin-right: .4rem; +} +/* Typography - End */ + +/* Other CSS - Start */ + +.btn { + background-color: var(--clr-primary-yellow); + padding: .8rem 0; + border: none; + cursor: pointer; + color: white; + font-weight: var(--fw-bold); + border-radius: 1rem; +} +.btn:hover { + background-color: var(--clr-neutral-gray); + color:var(--clr-primary-cyan); +} +/* Other CSS - End */ +@media (min-width:375px) { + #box-1 {grid-area:box1;} + #box-2 {grid-area:box2;} + #box-3 {grid-area:box3;} + main { + grid-template-areas: 'box1 box1 box1 box1' + 'box2 box3 box3 box3'; + max-width: 40rem; + gap: 0; + position: static; + aspect-ratio:initial; + margin-top: 5%; + } + #box-3 { + border-radius:initial; + border-bottom-right-radius: 1rem; + } + #box-2 { + border-bottom-left-radius: 1rem; + } + section { + padding: 2.5rem 1.5rem; + } + button { + max-width: 75 + + %; + } +} \ No newline at end of file