Coding About Section - Phần 1

<element class=”row”>
       <element_con class=”col  span-a-of-b”> </element_con>

        <!--a và b là số 1 đến 12  -->
</element>
1
2
3
4
5

<div=”row”>
       <div class=”col span-1-of-3”> column 1</div>
       <div class=”col span-1-of-3”> column 2</div>
       <div class=”col span-1-of-3”> column 3</div>
</div>
1
2
3
4
5

<div=”row”>

       <div class=”col span-2-of-3”> column 1</div>

       <div class=”col span-1-of-3”> column 2</div>
</div>
1
2
3
4
5
6

<section class="about-section">
    <div class="row">
        <h2>About Us</h2>
        <p class="p-long">
        We are people that are studying English by ourselves, we believe that you don’t need to pay so much money for being good at English, we’re here to help you 
        </p>
    </div>
    <div class="row">
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities1.jpeg" alt="activities1">
              <p class="picture-title">
                  Team Working
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities2.jpeg" alt="activities2">
              <p class="picture-title">
                  Funny class
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities3.jpeg" alt="activities3">
              <p class="picture-title">
                 Be confident
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities4.jpeg" alt="activities4">
              <p class="picture-title">
                All our friends
              </p>
          </div>
    </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

h1, h2{
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1{
  font-size: 300%;
  font-weight: 400;
  word-spacing: 5px;
  color: white;
  line-height: 135%;
  margin-bottom: 50px;
}

h2{
  color: #e67e22;
  font-size: 180%;
  font-weight: 700;
  text-align: center;
}

h2:after{
  content: " ";
  display: block;
  width: 150px;
  height: 3px;
  background-color: rgba(230, 126, 34,0.5);
  margin: 0 auto;
  margin-top: 5px;
}

.p-long{
  text-align: center;
  color: #265077;
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70%;
  margin-left: 15%;
  line-height: 140%;
}

section{
  padding: 50px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* ---------------------------- */
/* ---------ABOUT SECTION--------- */
/* ------------------------------------- */
.about-picture img{
  width: 90%;
}
1
2
3
4
5
6