CODEWITHSUNDEEP
htmlcss
Ayatsu
Ayatsu

Reputation: 39

How to put text higher in div

I made div where were text and icons and all of them looked how they suppose to, and when I copy & pasted same div and removed some text, but it doesnt look how it suppose to look. All want is to put text higher so it would look better Here is the code: HTML: <

section class="Second">
    <div class="courses">
        <div class="plates">
            <div class="full_course">
               <h2>Full Course</h2></div>
                                
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                 <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
                
                
                
        </div>

        <div class="courses">
            <div class="plates1">
                 <div class="MathPhys">
                          <h2>Math + Physics</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                             <h3>Mathematics</h3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                                <h3>Physics</h3>
                            </div>
                    
                
          </div>          
        </div>
        <div class="courses">
            <div class="plates2">
                 <div class="MathPhys">
                          <h2>Biology + Chemistry</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/bio.png" alt="">
                             <h3>Biology</hh3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/chemis.png" alt="">
                                <h3>Chemistry</h3>
                            </div>
                    
                
          </div>          
        </div>
        <div class="courses">
            <div class="plates3">
                 <div class="MathPhys">
                          <h2>Biology + Chemistry</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/bio.png" alt="">
                             <h3>Biology</hh3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/chemis.png" alt="">
                                <h3>Chemistry</h3>
                            </div>
                    
                
          </div>          
        </div>
        
    </div>
</section>

CSS:

    .plates {
  margin-left: 140px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.plates1 {
  margin-left: 20px;
  margin-top:-281px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.plates2 {
  margin-left: 140px;
  margin-top: -250px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.plates3 {
  margin-left: 20px;
  margin-top: -250px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.courses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  margin-top:280px;
}
.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
}

.MathPhys{
  display: grid;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
 
}
.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

This is how it suppose to look

This is how it looks

Upvotes: 0

Views: 123

Answers (3)

srinithi R
srinithi R

Reputation: 216

Here I have made a simple changes in your css code.

.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap:3rem;
    }


.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
}

.plates {
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 20px;
  width: 450px;
  height: 290px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses {
  margin-top: 100px;
}

.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.MathPhys {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="container">
        <div class="courses">
            <div class="plates">
                <div class="full_course">
                    <h2>Full Course</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
        <div class="courses">
            <div class="plates">
                <div class="MathPhys">
                    <h2>Math + Physics</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 1

Laaouatni Anas
Laaouatni Anas

Reputation: 3895

you forgot a point for class selector

plates { -> .plates {

and put this css in the end:

this will create a grid for two columns (equal width for the class="courses")

and a gap of 1rem

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

then you have some missing closing divs :)

final risult

.plates {
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 20px;
    width: 512px;
    height: 300px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.course_icon {
    width: 36px;
    height: 36px;
}

.full_course {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / -1;
}

.MathPhys {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / -1;
}

.course {
    font-family: 'Noto Sans', sans-serif;
    font-weight: normal;
    margin: 0rem 0rem;
    display: flex;
    align-items: center;
    padding: 2px 40px;
}

.course h3 {
    padding: 0rem 1rem;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="container">
        <div class="courses">
            <div class="plates">
                <div class="full_course">
                    <h2>Full Course</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
        <div class="courses">
            <div class="plates">
                <div class="MathPhys">
                    <h2>Math + Physics</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

You could use a grid for the .container as well.

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  min-width: 1024px;
}

.plates {
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses {
  margin-top: 280px;
}

.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.MathPhys {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}
<div class="container">
  <div class="courses">
    <div class="plates">
      <div class="full_course">
        <h2>Full Course</h2>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
        <h3>Mathematics</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/his.png" alt="hi">
        <h3>History</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
        <h3>Chemistry</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
        <h3>Biology</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/en.png" alt="en">
        <h3>English</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
        <h3>Physics</h3>
      </div>
    </div>
  </div>
  <div class="courses">
    <div class="plates">
      <div class="MathPhys">
        <h2>Math + Physics</h2>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
        <h3>Mathematics</h3>
      </div>
      <div class="course">
        <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
        <h3>Physics</h3>
      </div>
    </div>
  </div>
</div>

You were also missing a closing </div>

Upvotes: 1

Related Questions