DEV Community

Cover image for Build 10 CSS Projects in 10 Days: Project 4
Amrin
Amrin

Posted on • Updated on • Originally published at coderamrin.hashnode.dev

Build 10 CSS Projects in 10 Days: Project 4

Welcome to my "Build 10 CSS Projects in 10 Days" Series

This is day 4 and project 4.
If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

Today I will build Single Price Grid Component from frontendmentor

desktop-preview.jpg

** Download The Starter Files **

Frontendmentor provides a starter file for every project. so, before starting download the project starter file from here from frontendmentor

Open the starter file in your favourite code editor and let's start coding.

Part 1: HTML

  <body>
    <main class="container">
      <section class="top">
        <h1>Join our community</h1>
        <h2>30-day, hassle-free money back guarantee</h2>
        <p>
          Gain access to our full library of tutorials along with expert code
          reviews. Perfect for any developers who are serious about honing their
          skills.
        </p>
      </section>
      <section class="bottom">
        <div class="left"> 
          <h2>Monthly Subscription</h2>
          <div><span class="big">&dollar;29</span> <span>per month</span> </div>  
          <p>Full access for less than &dollar;1 a day</p>
          <button>Sign Up</button>
        </div>
        <div class="right"> 
          <h2>Why Us</h2>
          <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer &amp; expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
          </ul>
        </div>
      </section>
    </main>
  </body> 
Enter fullscreen mode Exit fullscreen mode

This is the whole markup.

Part 2: CSS

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); 

/* global styles */
* {
    box-sizing: border-box; 
    font-family: 'Karla', sans-serif; 
}

body {
    margin: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background: hsl(204, 43%, 93%);
} 
Enter fullscreen mode Exit fullscreen mode

Here we imported the font from google font. And added box-sizing border-box for every element.
And used flexbox on the body to center everything horizontally and vertically on the web page.

/* main design */
.container {
    width: 680px; 
    max-width: 100%;
    box-shadow: 0 14px 28px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.10);   
}

h2 {
    font-size: 21px;   
} 
Enter fullscreen mode Exit fullscreen mode

We gave the container a fixed width of 680px and added a box-shadow.

This is how it looks
1.png

/* top styles */
.top {
    background: #fff; 
    padding: 40px 30px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
}

h1 {
    color: hsl(179, 62%, 43%); 
}

.top h2 { 
    color: hsl(71, 73%, 54%);
}

.top p {
    color: hsl(218, 22%, 67%);
    line-height: 1.6; 
    font-size: 18px; 
}
Enter fullscreen mode Exit fullscreen mode

Here we gave the top background color white, and some padding.
After that style the header and paragraph.

2.png


/* bottom styles */
.bottom {
    color: #fff; 
    display: flex; 
}

p, ul {
    opacity: .7;    
}

/* left */ 

.left {
    background: hsl(179, 62%, 43%);
    flex: 1; 
    padding: 40px 30px; 
    border-bottom-left-radius: 5px; 
}

.left span.big {
    font-size: 50px;
    font-weight: 700; 
    color: #fff;  
    opacity: 1; 
    margin-right: 10px;  
}

button {
    width: 100%; 
    border: 0; 
    background: hsl(71, 73%, 54%);
    padding: 15px 0; 
    font-size: 20px; 
    color: #fff; 
    font-weight: 700; 
    border-radius: 5px;  
    margin-top: 20px;    
}
Enter fullscreen mode Exit fullscreen mode

We added display flex to the bottom section so the left and right stack next to each other.
After that, we styled the left section.

3.png

/* right */

.right {
    background: hsl(179, 62%, 46%); 
    flex: 1; 
    padding: 40px 30px; 
    border-bottom-right-radius: 5px; 
}

ul {
    list-style-type: none; 
    padding: 0; 
}

li {
    line-height: 1.7;   
} 
Enter fullscreen mode Exit fullscreen mode

In this snippet, we styled the bottom right section and styled the list.

This is the desktop design.

4.png

Now we are going to design the mobile version.


@media screen and (max-width:800px) {
    body {
        height: auto; 
    }

    .top,
    .left,
    .right {
        border-radius: 0;  
    } 

    .bottom {
        display: block; 
    }
}

Enter fullscreen mode Exit fullscreen mode

in the mobile version, we just removed the display flex of the bottom section to the display block so the left and right say top of one another.

screencapture-127-0-0-1-5500-single-price-grid-component-master-index-html-2021-09-28-20_39_16.png

Previous Posts:

Build 10 CSS projects: project 3

Conclusion

Thanks for reading.
If you like this post and want more like this one consider following.
And if you want to know what I post follow me on Twitter at @coderamring

Top comments (0)