CODEWITHSUNDEEP
htmlcss
Ope Afolabi
Ope Afolabi

Reputation: 5

How do I position two elements on each side correctly?

I have just finished a course on HTML & CSS and I have started a challenge on frontendmentor.com which is to complete a four card section shown in image below.

https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK

However, I am having trouble positioning the two elements on each side.

Here is my code so far..

@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,800&display=swap');

:root {
    /* primary colors */
    --red-color: hsl(0, 78%, 62%);
    --cyan-color: hsl(180, 62%, 55%);
    --orange-color: hsl(34, 97%, 64%);
    --blue-color: hsl(212, 86%, 64%);
    /* neutral */
    --dark-blue: hsl(234, 12%, 34%);
    --grey-blue: hsl(229, 6%, 66%);
}

body {
    background: rgb(240, 240, 240);
}

.header {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    margin-top: 4rem;
}

h1 span {
    display: block;
    color: var(--dark-blue);
    font-weight: 600;
    font-size: 2.5rem;

}

.lead {
    color: var(--grey-blue);
}

p span {
    display: block;
}

.top {
    color: var(--dark-blue);
    font-weight: 200;
    font-size: 2.5rem;
}

.card h2 {
    color: var(--dark-blue);
}

.cards {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card {
    border-radius: 5px;
    background: #fff;
    padding: 2rem;
    margin: 0.5rem;
}

#content {
     position: relative;
}

.green {
    border-top: 5px solid var(--cyan-color);
  } 

.blue {
    border-top: 5px solid var(--blue-color);
}

.yellow {
    border-top: 5px solid var(--orange-color);
}

.red {
    border-top: 5px solid var(--red-color);
}

.icon {
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="header">
            <h1 class="top">Reliable, efficient delivery<span>Powered by Technology</span></h1>
            <p class="lead">Our Artificial Intelligence powered tools use millions of project data <span>points to ensure that your project is successful</span></p>
    </div>

    <section id="content">
        <div class="cards">
            <div class="card green">
                <h2>Supervisor</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-supervisor.svg" alt="icon-team-builder">
            </div>
            <div class="card red">
                <h2>Team Builder</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-team-builder.svg" alt="icon-team-builder">
            </div>
            <div class="card yellow">
                    <h2>Karma</h2>
                    <p class="lead">Scans our talent network to create the optimal team for your project</p>
                    <img class="icon" src="./images/icon-karma.svg" alt="icon-team-builder">
                </div>
            <div class="card blue">
                <h2>Calculator</h2>
                <p class="lead">Scans our talent network to create the optimal team for your project</p>
                <img class="icon" src="./images/icon-calculator.svg" alt="icon-team-builder">
            </div>
        </div>
    </section>

</body>
</html>

And here's my results so far..

webpage

Upvotes: 0

Views: 156

Answers (1)

alexwc_
alexwc_

Reputation: 1603

I did this up in grid with the following CSS. You can edit the spacing as you see fit ( grid-column-gap and grid-row-gap). You'll also have to check on vendor prefixing.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600,800&display=swap');
:root {
  /* primary colors */
  --red-color: hsl(0, 78%, 62%);
  --cyan-color: hsl(180, 62%, 55%);
  --orange-color: hsl(34, 97%, 64%);
  --blue-color: hsl(212, 86%, 64%);
  /* neutral */
  --dark-blue: hsl(234, 12%, 34%);
  --grey-blue: hsl(229, 6%, 66%);
}

body {
  background: rgb(240, 240, 240);
}

.header {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin-top: 4rem;
}

h1 span {
  display: block;
  color: var(--dark-blue);
  font-weight: 600;
  font-size: 2.5rem;
}

.lead {
  color: var(--grey-blue);
}

p span {
  display: block;
}

.top {
  color: var(--dark-blue);
  font-weight: 200;
  font-size: 2.5rem;
}

.card h2 {
  color: var(--dark-blue);
}

.cards {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.card {
  border-radius: 5px;
  background: #fff;
  padding: 2rem;
  margin: 0.5rem;
}

#content {
  position: relative;
}

.green {
  border-top: 5px solid var(--cyan-color);
  grid-area: 2 / 1 / 4 / 2;
}

.blue {
  border-top: 5px solid var(--blue-color);
  grid-area: 2 / 3 / 4 / 4;
}

.yellow {
  border-top: 5px solid var(--orange-color);
  grid-area: 3 / 2 / 5 / 3;
}

.red {
  border-top: 5px solid var(--red-color);
  grid-area: 1 / 2 / 3 / 3;
}

.icon {
  float: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <h1 class="top">Reliable, efficient delivery<span>Powered by Technology</span></h1>
    <p class="lead">Our Artificial Intelligence powered tools use millions of project data <span>points to ensure that your project is successful</span></p>
  </div>

  <section id="content">
    <div class="cards">
      <div class="card green">
        <h2>Supervisor</h2>
        <p class="lead">Scans our talent network to create the optimal team for your project</p>
        <img class="icon" src="./images/icon-supervisor.svg" alt="icon-team-builder">
      </div>
      <div class="card red">
        <h2>Team Builder</h2>
        <p class="lead">Scans our talent network to create the optimal team for your project</p>
        <img class="icon" src="./images/icon-team-builder.svg" alt="icon-team-builder">
      </div>
      <div class="card yellow">
        <h2>Karma</h2>
        <p class="lead">Scans our talent network to create the optimal team for your project</p>
        <img class="icon" src="./images/icon-karma.svg" alt="icon-team-builder">
      </div>
      <div class="card blue">
        <h2>Calculator</h2>
        <p class="lead">Scans our talent network to create the optimal team for your project</p>
        <img class="icon" src="./images/icon-calculator.svg" alt="icon-team-builder">
      </div>
    </div>
  </section>

</body>

</html>

Upvotes: 1

Related Questions