Skip to content
Submitted 4 months ago

Responsive four card feature section css html flexbox grid

🔅 Yuliya 🐈•240
@O-Julia-O
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of learning how to work with CSS Grid. I managed to create four cards close similar to providing design. Also I found some interesting links about it here.

What challenges did you encounter, and how did you overcome them?

I can't say that I faced with challenges for now.. but maybe with borders, i can't understand how to do the colorful borders like in design.

What specific areas of your project would you like help with?

I need help with colorful borders, if you know how to solve it, please, message me :)

Community feedback

  • Lauris•200
    @EdanriellPosted 4 months ago

    Hello there, found some issues here.

    1. Firsty i can't see any free space bellow your cards, that's because u used paddings instead of margins.

    2. Fonts sizes are different when screen size is >= 375px (Check out the design, h1 and p should be 24px).

    3. Structure of your html is not quite right. Here is your code for reference.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <link rel="stylesheet" href="style.css">
    <title>Four card feature section</title>
  </head>
  <body>
    <header>
      <p class="header__text">Reliable, efficient delivery</p>
      <h1 class="header__h1">Powered by Technology</h1>

      <p class="header__description">
        Our Artificial Intelligence powered tools use millions of project data
        points to ensure that your project is successful
      </p>
    </header>
    <main>
      <section class="cards">
        <div class="card supervisor">
          <h2>Supervisor</h2>
          <p>Monitors activity to identify project roadblocks</p>
          <div class="image"><img src="./images/icon-supervisor.svg" alt="card"></div>
        </div>
        <div class="card builder">
          <h2>Team Builder</h2>
          <p>
            Scans our talent network to create the optimal team for your project
          </p>
          <div class="image"><img src="./images/icon-team-builder.svg" alt="card"></div>
        </div>
        <div class="card karma">
          <h2>Karma</h2>
          <p>Regularly evaluates our talent to ensure quality</p>
          <div class="image"><img src="./images/icon-karma.svg" alt="card"></div>
        </div>
        <div class="card calculator">
          <h2>Calculator</h2>
          <p>
            Uses data from past projects to provide better delivery estimates
          </p>
          <div class="image"><img src="./images/icon-calculator.svg" alt="card"></div>
        </div>
      </section>
    </main>
    <footer></footer>
  </body>
</html>

    First of all not every landing page or web app has an actuall footer or / and header. In our case we did the "Four card feature section", the name of the chalange gives u a huge hint that you are working on section. Meaning usage of tags header and footer in our <main> is redundant. If you don't have an header or footer just cut them out. But u instead let them be present in your html, which is wrong.

    <footer></footer>

    Keep in mind that tags <header> and <footer> can be located inside of <section>,<article> and <aside>. When we use our <header> and <footer> tags inside mentioned container tags we use them for intro and outro information. Ideal example is post, when in our post header we have an author, author related data, post name etc. And in footer we have post date, likes, reposts, tags and other stuff.

    Let's take a look at your cards.

            <div class="card supervisor">
          <h2>Supervisor</h2>
          <p>Monitors activity to identify project roadblocks</p>
          <div class="image"><img src="./images/icon-supervisor.svg" alt="card"></div>
        </div>
        <div class="card builder">
          <h2>Team Builder</h2>
          <p>
            Scans our talent network to create the optimal team for your project
          </p>
          <div class="image"><img src="./images/icon-team-builder.svg" alt="card"></div>
        </div>
        <div class="card karma">
          <h2>Karma</h2>
          <p>Regularly evaluates our talent to ensure quality</p>
          <div class="image"><img src="./images/icon-karma.svg" alt="card"></div>
        </div>
        <div class="card calculator">
          <h2>Calculator</h2>
          <p>
            Uses data from past projects to provide better delivery estimates
          </p>
          <div class="image"><img src="./images/icon-calculator.svg" alt="card"></div>
        </div>

    U used divs for your cards which is ok if you don't know semantic html, but in real life semantic html is a huge thing, for web crawlers, accessability and other stuff.

    So you should use and <ul> an <li> tags for your cards. Meaning cards should be put in <li>. Why ? Because it is a list of cards. For example

    <ul>
    <li>
        // Your card goes here
    </li>
</ul>

    Also cards are <article>, because they are independent and they will not loose their meaning if they will be put on onther website.

    Here is semantically correct example

    <section class="mt-[8.5rem] mb-[7.8rem] mx-[3.2rem] desktop:mx-[16.5rem] desktop:mt-[8rem] desktop:mb-[8rem] flex flex-col items-center">
	<header class="mb-[7.6rem] max-w-[48rem] desktop:max-w-[54rem] desktop:mb-[6.4rem]">
		<h1 class="min-w-[31.1rem] font-poppins font-extralight text-[2.4rem] tracking-[0.01em] text-[var(--voyager)] text-center leading-[140%] mb-[1.6rem] desktop:text-[3.6rem]">Reliable, efficient delivery<strong class="font-poppins font-semibold text-[2.4rem] tracking-[0.01em] text-[var(--voyager)] block text-center leading-[140%] desktop:text-[3.6rem]">Powered by Technology</strong></h1>
		<p class="font-poppins font-normal text-[1.5rem] leading-[167%] tracking-[0.01em] text-center text-[var(--voyager)] opacity-50">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>
	</header> 
	<ul class="grid grid-cols-1 grid-rows-4 gap-y-[2.5rem] desktop:gap-[3rem] desktop:grid-cols-3-custom desktop:grid-rows-4-custom">
		<li class="row-start-2 row-end-3 col-start-1 col-end-2">
			<article class="overflow-hidden relative rounded-[0.8rem] bg-[var(--wihte)] shadow-featureCard px-[2.8rem] pt-[2.7rem] pb-[11.8rem] desktop:px-[3.2rem] desktop:pt-[3.2rem] desktop:pb-[13.6rem] desktop:max-w-[35rem]">
				<div class="absolute top-0 left-0 w-full h-[0.3rem] shadow-featureCard desktop:h-[0.4rem] bg-[var(--medium-turquoise)]"></div>
				<h2 class="font-poppins font-semibold text-[2rem] text-[var(--voyager)] text-left mb-[0.1rem] desktop:mb-[0.6rem]">Supervisor</h2>
				<p class="font-poppins font-normal text-[1.3rem] leading-[177%] tracking-[0.01em] text-[var(--voyager)] opacity-50 text-left">Monitors activity to identify project roadblocks</p>
				<svg class="w-[5.7rem] h-[5.7rem] absolute bottom-[2.8rem] right-[2.8rem] desktop:w-[6.4rem] desktop:h-[6.4rem] desktop:bottom-[3.2rem] desktop:right-[3.2rem]" fill="none" height="64" shape-rendering="geometricPrecision" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg">
					<path d="M56.8418 7.15821C47.3159 -2.40478 31.9399 -2.36718 22.4141 7.15821C14.3887 15.1841 12.9634 27.5972 18.8887 37.1607L16.376 39.7105L15.02 45.855L19.2344 50.0693L24.3267 47.6611L26.8394 45.1108C36.4028 51.0366 48.8164 49.6489 56.8418 41.5859C66.4048 32.0601 66.3672 16.6841 56.8418 7.15821Z" fill="#676E74"></path>
					<path d="M24.3267 47.6611L26.8394 45.1108C36.4028 51.0366 48.8159 49.6489 56.8418 41.5859C66.4048 32.0601 66.3672 16.6841 56.8418 7.1582L16.5825 47.4175L19.2339 50.0693L24.3267 47.6611Z" fill="#474F54"></path>
					<path d="M54.2129 9.78711C50.4805 6.0542 45.3237 3.74561 39.6279 3.74561C28.2363 3.74561 19.0015 12.9805 19.0015 24.3721C19.0015 30.0679 21.3101 35.2246 25.0425 38.9575C28.7754 42.6899 33.9321 44.9985 39.6279 44.9985C51.0195 44.9985 60.2544 35.7637 60.2544 24.3721C60.2544 18.6763 57.9458 13.5195 54.2129 9.78711Z" fill="#64E1DC"></path>
					<path d="M60.2544 24.3721C60.2544 18.6763 57.9458 13.5195 54.2129 9.78711L25.0425 38.9575C28.7754 42.6899 33.9321 44.9985 39.6279 44.9985C51.0195 44.9985 60.2544 35.7637 60.2544 24.3721Z" fill="#00C8C8"></path>
					<path d="M56.2388 23.4106C56.0547 23.103 53.2588 18.4961 48.958 15.042C46.3276 12.9287 43.1357 11.2461 39.6279 11.2461C30.3857 11.2461 23.314 22.9146 23.0171 23.4106L22.4419 24.3721L23.0171 25.3335C23.2012 25.6416 25.9966 30.2485 30.2974 33.7026C32.9282 35.8154 36.1201 37.498 39.6279 37.498C48.8701 37.498 55.9419 25.8296 56.2388 25.3335L56.8135 24.3721L56.2388 23.4106Z" fill="#EFEFF4"></path>
					<path d="M56.2388 25.3335L56.8135 24.3721L56.2388 23.4106C56.0547 23.103 53.2588 18.4961 48.958 15.042L30.2974 33.7026C32.9282 35.8154 36.1201 37.498 39.6279 37.498C48.8701 37.498 55.9419 25.8296 56.2388 25.3335Z" fill="#DADAE5"></path>
					<path d="M43.604 20.3965C42.5854 19.3774 41.1787 18.7466 39.6279 18.7466C36.5259 18.7466 34.0024 21.27 34.0024 24.3721C34.0024 25.9233 34.6333 27.3296 35.6519 28.3481C36.6709 29.3667 38.0767 29.9976 39.6279 29.9976C42.73 29.9976 45.2534 27.4741 45.2534 24.3721C45.2534 22.8213 44.6226 21.415 43.604 20.3965Z" fill="#64E1DC"></path>
					<path d="M45.2534 24.3721C45.2534 22.8213 44.6226 21.415 43.604 20.3965L35.6519 28.3481C36.6704 29.3667 38.0767 29.9976 39.6279 29.9976C42.73 29.9976 45.2534 27.4741 45.2534 24.3721Z" fill="#00C8C8"></path>
					<path d="M40.9536 23.0464C40.6143 22.707 40.1455 22.4971 39.6279 22.4971C38.5933 22.4971 37.7529 23.3374 37.7529 24.3721C37.7529 24.8896 37.9629 25.3584 38.3022 25.6978C38.6416 26.0371 39.1104 26.2471 39.6279 26.2471C40.6626 26.2471 41.5029 25.4067 41.5029 24.3721C41.5029 23.855 41.293 23.3862 40.9536 23.0464Z" fill="#676E74"></path>
					<path d="M41.5029 24.3721C41.5029 23.855 41.293 23.3862 40.9536 23.0464L38.3022 25.6978C38.6416 26.0371 39.1104 26.2471 39.6279 26.2471C40.6626 26.2471 41.5029 25.4067 41.5029 24.3721Z" fill="#474F54"></path>
					<path d="M20.333 43.667L16.376 39.7104L0 56.0493L3.9751 60.0249L7.95068 64L24.3267 47.6611L20.333 43.667Z" fill="#575C60"></path>
					<path d="M24.3267 47.6611L20.333 43.667L3.9751 60.0249L7.95068 64L24.3267 47.6611Z" fill="#333637"></path>
				</svg>
			</article>
		</li>
		<li class="row-start-1 row-end-2 col-start-2 col-end-3">
			<article class="overflow-hidden relative rounded-[0.8rem] bg-[var(--wihte)] shadow-featureCard px-[2.8rem] pt-[2.7rem] pb-[11.8rem] desktop:px-[3.2rem] desktop:pt-[3.2rem] desktop:pb-[13.6rem] desktop:max-w-[35rem]">
				<div class="absolute top-0 left-0 w-full h-[0.3rem] shadow-featureCard desktop:h-[0.4rem] bg-[var(--khmer-curry)]"></div>
				<h2 class="font-poppins font-semibold text-[2rem] text-[var(--voyager)] text-left mb-[0.1rem] desktop:mb-[0.6rem]">Team Builder</h2>
				<p class="font-poppins font-normal text-[1.3rem] leading-[177%] tracking-[0.01em] text-[var(--voyager)] opacity-50 text-left">Scans our talent network to create the optimal team for your project</p>
				<svg class="w-[5.7rem] h-[5.7rem] absolute bottom-[2.8rem] right-[2.8rem] desktop:w-[6.4rem] desktop:h-[6.4rem] desktop:bottom-[3.2rem] desktop:right-[3.2rem]" fill="none" height="64" shape-rendering="geometricPrecision" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg">
					<path d="M64 14.4541V56.2424H0V14.4541L3.75 10.6667H60.25L64 14.4541Z" fill="#EFEFF4"></path>
					<path d="M64 14.4541V56.2424H32V10.6667H60.25L64 14.4541Z" fill="#DADAE5"></path>
					<path d="M0 0H64V15.5152H0V0Z" fill="#474F54"></path>
					<path d="M32 0H64V15.5152H32V0Z" fill="#32393F"></path>
					<path d="M7.75757 5.81818H11.4424V9.69696H7.75757V5.81818Z" fill="#FF637B"></path>
					<path d="M15.1273 5.81818H18.8121V9.69696H15.1273V5.81818Z" fill="#FF637B"></path>
					<path d="M22.4969 5.81818H26.1818V9.69696H22.4969V5.81818Z" fill="#FF637B"></path>
					<path d="M45.5757 42.2453V64H34.355V60.2898H30.6147V64H19.3939V42.2453L30.7642 32.9697H33.8689L45.5757 42.2453Z" fill="#FF637B"></path>
					<path d="M11.6364 22.303H53.3333V26.1818H11.6364V22.303Z" fill="#DADAE5"></path>
					<path d="M32 22.303H52.3636V26.1818H32V22.303Z" fill="#C9C9D3"></path>
					<path d="M45.5758 42.2453V64H33.9394V60.2898H32V32.9697H33.4354L45.5758 42.2453Z" fill="#E63950"></path>
					<path d="M30.0606 45.5757H33.9394V49.4545H30.0606V45.5757Z" fill="#EFEFF4"></path>
					<path d="M32 45.5757H33.9394V49.4545H32V45.5757Z" fill="#DADAE5"></path>
					<path d="M50.4243 45.7793L47.9724 48.4848L32.4849 34.9586L16.9974 48.4848L14.5455 45.7793L32.4849 30.0606L50.4243 45.7793Z" fill="#676E74"></path>
					<path d="M32 30.0606L50.4242 45.7793L47.9061 48.4848L32 34.9586L32 30.0606Z" fill="#474F54"></path>
				</svg>
			</article>
		</li>
		<li class="row-start-3 row-end-4 col-start-2 col-end-3">
			<article class="overflow-hidden relative rounded-[0.8rem] bg-[var(--wihte)] shadow-featureCard px-[2.8rem] pt-[2.7rem] pb-[11.8rem] desktop:px-[3.2rem] desktop:pt-[3.2rem] desktop:pb-[13.6rem] desktop:max-w-[35rem]">
				<div class="absolute top-0 left-0 w-full h-[0.3rem] shadow-featureCard desktop:h-[0.4rem] bg-[var(--butterscotch)]"></div>
				<h2 class="font-poppins font-semibold text-[2rem] text-[var(--voyager)] text-left mb-[0.1rem] desktop:mb-[0.6rem]">Karma</h2>
				<p class="font-poppins font-normal text-[1.3rem] leading-[177%] tracking-[0.01em] text-[var(--voyager)] opacity-50 text-left">Regularly evaluates our talent to ensure quality</p>
				<svg class="w-[5.7rem] h-[5.7rem] absolute bottom-[2.8rem] right-[2.8rem] desktop:w-[6.4rem] desktop:h-[6.4rem] desktop:bottom-[3.2rem] desktop:right-[3.2rem]" fill="none" height="64" shape-rendering="geometricPrecision" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg">
					<path d="M26.375 52.625H37.625V64H26.375V52.625Z" fill="#676E74"></path>
					<path d="M32 52.625H37.625V64H32V52.625Z" fill="#333637"></path>
					<path d="M22.625 47H41.375V56.375H22.625V47Z" fill="#4C545A"></path>
					<path d="M32 47H41.375V56.375H32V47Z" fill="#52585C"></path>
					<path d="M45.0122 36.7251C42.6875 38.6377 41.375 41.3374 41.375 44.1499V47H22.625V44.1499C22.625 41.2998 21.3872 38.6377 19.3252 37.0249C14.2627 33.0874 11.375 27.1626 11.375 20.75C11.375 14.5249 14.1499 8.67529 18.9878 4.7373C22.7002 1.7373 27.2373 0 32 0C33.4624 0 34.9624 0.149902 36.4248 0.450195C44.5249 2.1377 50.8999 8.8999 52.3252 17.1128C53.6001 24.6128 50.8999 31.9624 45.0122 36.7251Z" fill="#FFDA2D"></path>
					<path d="M45.0122 36.7251C42.6875 38.6377 41.375 41.3374 41.375 44.1499V47H32V0C33.4624 0 34.9624 0.149902 36.4248 0.450195C44.5249 2.1377 50.8999 8.8999 52.3252 17.1128C53.6001 24.6128 50.8999 31.9624 45.0122 36.7251Z" fill="#FDBF00"></path>
					<path d="M18.875 45.125H45.125V48.875H18.875V45.125Z" fill="#676E74"></path>
					<path d="M39.9556 10.1426L42.6069 12.7939L38.6284 16.7725L35.9771 14.1211L39.9556 10.1426Z" fill="#FF9100"></path>
					<path d="M25.3716 24.7266L28.0229 27.3779L24.0439 31.3569L21.3926 28.7056L25.3716 24.7266Z" fill="#FDBF00"></path>
					<path d="M30.125 28.25H33.875V33.875H30.125V28.25Z" fill="#FDBF00"></path>
					<path d="M38.6284 24.7266L42.6069 28.7056L39.9556 31.3569L35.9771 27.3779L38.6284 24.7266Z" fill="#FF9100"></path>
					<path d="M39.5 18.875H45.125V22.625H39.5V18.875Z" fill="#FF9100"></path>
					<path d="M24.0439 10.1426L28.0229 14.1216L25.3716 16.7725L21.3926 12.7939L24.0439 10.1426Z" fill="#FDBF00"></path>
					<path d="M18.875 18.875H24.5V22.625H18.875V18.875Z" fill="#FDBF00"></path>
					<path d="M30.125 7.625H33.875V13.25H30.125V7.625Z" fill="#FDBF00"></path>
					<path d="M0 18.875H7.625V22.625H0V18.875Z" fill="#FFDA2D"></path>
					<path d="M6.58496 14.8101L0.834961 11.0601L2.91504 7.93994L8.66504 11.6899L6.58496 14.8101Z" fill="#FFDA2D"></path>
					<path d="M2.91504 33.5601L0.834961 30.4399L6.58496 26.6899L8.66504 29.8101L2.91504 33.5601Z" fill="#FFDA2D"></path>
					<path d="M56.375 18.875H64V22.625H56.375V18.875Z" fill="#FDBF00"></path>
					<path d="M61.085 33.5601L55.335 29.8101L57.415 26.6899L63.165 30.4399L61.085 33.5601Z" fill="#FDBF00"></path>
					<path d="M57.415 14.8101L55.335 11.6899L61.085 7.93994L63.165 11.0601L57.415 14.8101Z" fill="#FDBF00"></path>
					<path d="M32 7.625H33.875V13.25H32V7.625Z" fill="#FF9100"></path>
					<path d="M32 28.25H33.875V33.875H32V28.25Z" fill="#FF9100"></path>
					<path d="M32 45.125H45.125V48.875H32V45.125Z" fill="#333637"></path>
					<path d="M32 11.375C26.8252 11.375 22.625 15.5752 22.625 20.75C22.625 25.9248 26.8252 30.125 32 30.125C37.1748 30.125 41.375 25.9248 41.375 20.75C41.375 15.5752 37.1748 11.375 32 11.375Z" fill="#FDBF00"></path>
					<path d="M32 30.125V11.375C37.1748 11.375 41.375 15.5752 41.375 20.75C41.375 25.9248 37.1748 30.125 32 30.125Z" fill="#FF9100"></path>
					<path d="M30.125 18.875H33.875V22.625H30.125V18.875Z" fill="#FFDA2D"></path>
					<path d="M32 18.875H33.875V22.625H32V18.875Z" fill="#FDBF00"></path>
				</svg>
			</article>
		</li>
		<li class="row-start-2 row-end-3 col-start-3 col-end-4">
			<article class="overflow-hidden relative rounded-[0.8rem] bg-[var(--wihte)] shadow-featureCard px-[2.8rem] pt-[2.7rem] pb-[11.8rem] desktop:px-[3.2rem] desktop:pt-[3.2rem] desktop:pb-[13.6rem] desktop:max-w-[35rem]">
				<div class="absolute top-0 left-0 w-full h-[0.3rem] shadow-featureCard desktop:h-[0.4rem] bg-[var(--feather-star)]"></div>
				<h2 class="font-poppins font-semibold text-[2rem] text-[var(--voyager)] text-left mb-[0.1rem] desktop:mb-[0.6rem]">Calculator</h2>
				<p class="font-poppins font-normal text-[1.3rem] leading-[177%] tracking-[0.01em] text-[var(--voyager)] opacity-50 text-left">Uses data from past projects to provide better delivery estimates</p>
				<svg class="w-[5.7rem] h-[5.7rem] absolute bottom-[2.8rem] right-[2.8rem] desktop:w-[6.4rem] desktop:h-[6.4rem] desktop:bottom-[3.2rem] desktop:right-[3.2rem]" fill="none" height="64" shape-rendering="geometricPrecision" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg">
					<g id="045-software">
						<path d="M64 0V41.25L60.25 45.125H3.75L0 41.25V0H64Z" fill="#474F54" id="Path"></path>
						<path d="M64 0V41.25L60.25 45.125H32V0H64Z" fill="#32393F" id="Path_2"></path>
						<path d="M22.625 50.875H41.375V62.125H22.625V50.875Z" fill="#DADAE5" id="Path_3"></path>
						<path d="M32 50.875H41.375V62.125H32V50.875Z" fill="#C9C9D3" id="Path_4"></path>
						<path d="M0 41.25H64V52.75H0V41.25Z" fill="#EFEFF4" id="Path_5"></path>
						<path d="M32 41.25H64V52.75H32V41.25Z" fill="#DADAE5" id="Path_6"></path>
						<path d="M15.125 60.25H48.875V64H15.125V60.25Z" fill="#EFEFF4" id="Path_7"></path>
						<path d="M32 60.25H48.875V64H32V60.25Z" fill="#DADAE5" id="Path_8"></path>
						<path clip-rule="evenodd" d="M7.625 20.625C7.625 13.3887 13.5137 7.5 20.75 7.5C27.9863 7.5 33.875 13.3887 33.875 20.625C33.875 27.8613 27.9863 33.75 20.75 33.75C13.5137 33.75 7.625 27.8613 7.625 20.625ZM15.125 20.625C15.125 23.7266 17.6484 26.25 20.75 26.25C23.8516 26.25 26.375 23.7266 26.375 20.625C26.375 17.5234 23.8516 15 20.75 15C17.6484 15 15.125 17.5234 15.125 20.625Z" fill="#549EF2" fill-rule="evenodd" id="Shape"></path>
						<g id="Group">
							<path d="M45.125 7.5H56.5V11.25H45.125V7.5Z" fill="#377FD2" id="Path_9"></path>
							<path d="M37.625 7.5H41.375V11.25H37.625V7.5Z" fill="#377FD2" id="Path_10"></path>
							<path d="M45.125 22.5H56.5V26.25H45.125V22.5Z" fill="#377FD2" id="Path_11"></path>
							<path d="M37.625 22.5H41.375V26.25H37.625V22.5Z" fill="#377FD2" id="Path_12"></path>
							<path d="M37.625 15H56.5V18.75H37.625V15Z" fill="#377FD2" id="Path_13"></path>
							<path d="M37.625 30H56.5V33.75H37.625V30Z" fill="#377FD2" id="Path_14"></path>
						</g>
					</g>
				</svg>
			</article>
		</li>
	</ul>
</section>

    I used tailwind for styling so don't be surprised at lengthy class names. Also i used svg icons as is in my html, due to factory pattern that i implemented exceptionally for different sort of icons. U can hovever use your svgs like u did.

    <img src="./images/icon-supervisor.svg" alt="card">

    But keep in mind that if we need to add some animations to our svgs we are forced to use them in our html fully as is. However i must mention that there is a way how we can organize them, elegantly. This stuff is a little bit advanced. But the idea is that we create in our <body> a container for icons like.

    <div style="display: none">
    <symbol id="your-svg" viewBox="0 0 8 11">
        <path d="M6.36805 0.830078L1.69824 5.49989L6.36805 10.1697" 
        stroke="currentColor" stroke-width="2" />
    </symbol>
</div>

    And in this container we put our svgs. Later in our html we can use them like this

    <svg class="svg-class">
    <use xlink:href="#your-svg" x="0" y="0"></use>
</svg>

    Here is my code for reference Link to my GitHub Repo FourCardFeatureSection

    Good Luck !

    Marked as helpful
    1
    🔅 Yuliya 🐈•240
    @O-Julia-OPosted 4 months ago

    Hello, @Edanriell ! Thanks for reviewing my code! I have taken all your comments into account.

    What I've done:

    • I changed the non-semantic HTML elements to semantic as you described, i placed the content into lists and than into "article".
    • Now the font-size is changing. I used clamp() function in CSS.
    • Added margins and paddings.
    • Deleted footer and moved header into main block.
    • And also I tried your solution with svgs. I replaced all img blocks to svgs. Moved svgs in block div in body, inserted there all svgs, and after I used such code <svg class="icon"> <use xlink:href="#home" x="0" y="0" /> </svg>

    Again, thanks a lot 😊

    1
    Lauris•200
    @EdanriellPosted 4 months ago

    @O-Julia-O Header in this case must be in a section.

    <section>
    <header></header>
</section>

    Be cautious when using fancy css functions, like min(), max(), minmax(), clamp() and calc(). Because older browsers do not suppor these functions. Also it is more preferable that u change your font size in media queries, in this way you are more predictable.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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