Frontend Mentor - Contact form solution

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

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

I learned CSS Grid, Rem, Media Queries, HTML Structuring, Image Manipulation. To see how you can add code snippets, see below:

    <div class="container">
      <img src="images/image-qr-code.png" class="image-qr-code" alt="Image">
      <h1 class="title">Improve your front-end skills by building projects</h1>
      <h2 class="subtitle">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</h2>
    </div>

.container {
  background-color: var(--bg-2);
  display: block;
  border-radius: 0.8rem;
  margin: auto;
  margin-top: 12rem;
  width: max-content;
  height: 33.333rem;
  box-shadow: 0rem 1rem 1rem 2px rgba(0, 0, 0, 0.15);
}

Author

• Frontend Mentor - @TwinkleByte
• Github - @TwinkleByte