My Qrcode

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

-(#overview) (#screenshot) (#links) (#my-process) (#built-with) (#what-i-learned) (#continued-development) (#useful-resources) -(#author) (#acknowledgments)

3ee710e441

• Solution URL: (https://FrontendMentor-QR code component-url.com)

• Live Site URL: (https://kadi-rot-ravel-agency-url.com)

I had not before tooka picture of QR did not work had to screenshot QR code which got a screenshot. Now going to see how to built with the below titles and what I can't built.

• Semantic HTML5 markup: Elements such as <header>,<footer>,and <article> are all considered sematic because they accurately describe the purpose of the element and the type of content that is inside them. Elements of HTML5: This element can contain many other elements as well including below: <input> <output> <label> <select> <button> <option> <textarea> <optgroup> <fieldset>
• CSS custom properties: Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.They are set using custom property notation(e.q.--main-color:)
• Flex vs grid: To put a point on it! 1. Grid can do things flexbox can't do. 2.Flexbox can do things Grid can't do. 3. They can work together a grid item can be a flexbox container. A flex item can be a grid container. CSS Grid: Offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. A grid layout consists of a parent element, with one or more child elements. Flexbox: Use percentages to add a fixed width to the flex items(e.g. width:50%) Use media queries to override this width. When to use flexbox and when to use CSS grid? The main concepts here are this: Use display: grid on a div or section to specify that all content in that container must abide by CSS grid rules. you can then add grid-gap(think padding/margin berween individual grid elements). you can specify the dimensions (in relation to the overall grid) with grid-column-start and grid-column-end. Some goes for rows.

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. Learnt there is and difference between flexbox is percentages, padding for the header...Css Grid is the layout system for rows and column design of the webpage.. Semantic HTML5 has a short name HTML5 which include element for instance,<footer>,<input>,<output>....

To see how you can add code snippets, see below:

<h1>Contact Information</h1>
``<input type = "button" value="Submit"/>
  <footer-content>
  About KADIRO TRAVEL AGENCY LLC  Privacy Policies Affilitates
  <footer-content/>`
```css
.header {
  width:100%;
  height:80px;
  display:block;
   background color: papayawhip;
}

const Event = (Function Contact Information) => {
  console.log(The event is the contact information)
}

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn mo

Still need to work on<label>,<select>,<textarea>,<output>,<optgtroup>. With CSS the container of the grid and flexbox non-container.

• [Example resource 1](https://www.wiki.com/Learn HTML) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

• Website - Karen Barnes
• Frontend Mentor - @comangea
• Twitter - @mangeli

acho que o link do repositório está fora do ar e tá atrapalhando na visibilidade do conteúdo.

Hi @brunafelix79, nice work but you can use semantic elements to improve your SEO.

Olá, adorei sua resolução para o desafio, uma sugestão seria você utilizar um margin-bottom, em vez de um '<br />' para fazer a separação do título para o texto.