Submitted over 2 years ago

Four card feature section

Mehdi Adham• 140

@mehdi-adham

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone, any feedback is appreciated

Community feedback

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

CSS Code

/* In main-Container design Flex Container CSS Code */ .flex-container{ display: flex; padding: 15px; flex-direction: column; justify-content: center; align-items: center; }

/* Flex-container h1 tag css Code */ .flex-container>h1{ text-align: center; font-size: 2.1rem; font-weight:lighter; margin-bottom: 8px; opacity: 0.9; }

/* Flex-Container h2 tag CSS Code */ .flex-container>h2{ text-align: center; font-weight: 900; font-size: 2.1rem; opacity: 0.9; margin-top: -12px; margin-bottom: 10px; }

/* Flex-Container p tag CSS Code */ .flex-container>p{ width: 35%; text-align: center; font-size: 14px; opacity: 0.9; color: hsl(229, 6%, 66%); }

Marked as helpful

optimusprime202• 1,200

@optimusprime202

Posted over 2 years ago

Hey @mehdi-adham, Keep it up!

Mehdi Adham• 140

@mehdi-adham

Posted over 2 years ago

@optimusprime202 Thanks

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

Used this code bro your output look very osm👌😊 I hope you find this helpful.

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

html

<div class="flex-container"> <h1>Reliable, efficient delivery</h1> <h2>Powered by Technology</h2> <p> Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful </p> </div>

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

yes bro this code suggestion helpful for you , then click on marked as helpful.😊👌

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

Top Heading wrap in the h1 tag . 😊👍 and give the font-size on your according.

Good Work 😊

Mehdi Adham• 140

@mehdi-adham

Posted over 2 years ago

@GitHub-dev12345 Thanks Rathore, I think this ideal way for h1 on this solution 😊.

Mehdi Adham• 140

@mehdi-adham

Posted over 2 years ago

@GitHub-dev12345 This is my code for Top heading :

html:

  <header class="container text-center">
    <h1> <span class="no-bold">Reliable, efficient delivery</span>  <br> Powered by Technology</h1>
    <p>Our Artificial Intelligence powered tools use millions of project data points 
      to ensure that your project is successful</p>
  </header>

css:

h1{
    font-size: 1.7em;
}

do you meant!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord