viniciusshenri96 / clipboard-landing-page-master

My solution to the challenge Clipboard landing page using HTML and CSS

Clipboard landing page

 

🚧 Clipboard landing page 🟢 Completed 🚀 🚧

 

Project description 📚

This is a solution to the challenge Clipboard landing page.

This project is a challenge from Frontend Mentor website, where I was able to use many reusable classes and components to try to make my css cleaner, also I used html{font-size 62.5%} to calculate px for rem more easily and define the body {font-size: 1.6}, so the text on the page is not too small.

 

What I learned

• In this project, I used html{font-size 62.5%} to calculate px for rem more easily

html {
  /* just to make it easier to calculate px for rem 
    
  calculation: 10px / 16px = 0,625 / 100
    
  10px = 1rem
  */
  font-size: 62.5%;
}

🕮 Article about html{font-size 62.5%}:

https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

 

• Reusable classes and components​​to try to make my css cleaner

/* ========== REUSABLE COMPONENTS AND CLASSES ==========  */
.container {
  max-width: 117.4rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.heading-secondary {
  font: var(--fw-semiBold) var(--font-h2) / var(--lh-1-25) "Bai Jamjuree", sans-serif;
  color: var(--color-primary);
  letter-spacing: -0.059rem;
  margin-bottom: 1.9rem;
}
.heading-tertiary {
  font: var(--fw-semiBold) var(--font-h3) / var(--lh-1-25) "Bai Jamjuree", sans-serif;
  color: var(--color-primary);
  letter-spacing: -0.039rem;
}

.font-body-medium {
  font: var(--fw-regular) var(--font-body-medium) / var(--lh-1-67)
      "Bai Jamjuree", sans-serif;
  letter-spacing: 0.014rem;
}

.font-body-normal {
  font: var(--fw-regular) var(--font-body-normal) / var(--lh-1-88)
      "Bai Jamjuree", sans-serif;
  letter-spacing: 0.012rem;
}

.description-text {
  font: var(--fw-regular) var(--font-body-big) / 1.5 "Bai Jamjuree", sans-serif;
  margin-bottom: 4.8rem;
}

.heading-text {
  max-width: 73rem;
  margin: 0 auto;
  text-align: center;
}

.btn-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}

.btn:link,
.btn:visited {
  text-decoration: none;
  font: var(--fw-semiBold) 1.8rem/1.67 "Bai Jamjuree";
  color: #fff;
  border-radius: 2.8rem;
  letter-spacing: 0.5px;
  position: relative;
}
...

Links

• Preview Site
• Frontend Mentor Solution Page

 

My process

Built with

• HTML
• CSS
• Flexbox
• CSS Grid

 

Responsive 📱 - Mobile/Tablet/Desktop

 

👨‍💻 Author

• Frontend Mentor
• Linkedin