🔒 Closed Css po

[Hdiahs682h]

paano po e code para gawin pong column yung naka row na mission and vision, yung background na red gawin pong column

 

[🤖]

Para gawing column ang naka-row na mission and vision at gawing background na red, kailangan nating gamitin ang CSS Grid o Flexbox para mas madaling maayos ang layout ng ating website. Narito ang mga hakbang upang maisagawa ito:

1. Magdagdag ng parent container para sa mission at vision. Sa halimbawang ito, ating ituturing na "container" ang parent container.

<div class="container">
  <div class="mission">Mission Statement</div>
  <div class="vision">Vision Statement</div>
</div>

2. Sa CSS, gagamitin natin ang CSS Grid para maglagay ng dalawang column. Dapat naka-set ang display property sa "grid" at maaaring magdagdag ng "grid-template-columns" property para i-set ang laki ng bawat column.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: red;
}

.mission {
  background-color: white;
}

.vision {
  background-color: white;
}

Sa kodigo sa itaas, ang ".container" ay naka-display na "grid" at may dalawang column na may parehong laki. Ang ".mission" at ".vision" ay parehong may background-color na puti, habang ang background-color ng container ay red.

3. I-adjust ang laki ng bawat column kung kinakailangan. Sa halimbawang ito, naka-set sa "1fr" ang laki ng bawat column pero maaaring magdagdag ng ibang value (tulad ng pixels) kung gusto natin ng mas malaki o mas maliit na laki.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
}

Sa kodigo sa itaas, ginamit natin ang "1fr" bilang laki ng bawat column.

4. I-adjust ang margin, padding, at iba pang detalye sa pagsasaayos ng layout.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
  padding: 20px;
  gap: 20px;
  text-align: center;
}

.mission {
  background-color: white;
  padding: 20px;
}

.vision {
  background-color: white;
  padding: 20px;
}

Sa kodigo sa itaas, ginamit natin ang "padding" upang magdagdag ng espasyo sa bawat element. Sa container, ginamit natin ang "gap" upang magdagdag ng espasyo sa pagitan ng bawat elemento. Ginamit din natin ang "text-align: center" upang i-center ang text sa loob ng bawat elemento.

Ito ang magiging resulta ng mga hakbang na ito:

<div class="container">
  <div class="mission">Our Mission Statement</div>
  <div class="vision">Our Vision Statement</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
  padding: 20px;
  gap: 20px;
  text-align: center;
}

.mission {
  background-color: white;
  padding: 20px;
}

.vision {
  background-color: white;
  padding: 20px;
}

Nawa'y nakatulong ito sa inyo!

 

[Hdiahs682h]

ito po pala code sa nilagay ko pa edit po

.missvis-col{
    flex-basis: 500px;
    background: #ffecec;
    border-radius: 10px;
    height: 60px 30px;
    margin-bottom: 5%;
    padding: 13px 20px;
    box-sizing: border-box;
    word-wrap: break-word;
    transition: 0.5s;
}

Para gawing column ang naka-row na mission and vision at gawing background na red, kailangan nating gamitin ang CSS Grid o Flexbox para mas madaling maayos ang layout ng ating website. Narito ang mga hakbang upang maisagawa ito:

1. Magdagdag ng parent container para sa mission at vision. Sa halimbawang ito, ating ituturing na "container" ang parent container.

<div class="container">
  <div class="mission">Mission Statement</div>
  <div class="vision">Vision Statement</div>
</div>

2. Sa CSS, gagamitin natin ang CSS Grid para maglagay ng dalawang column. Dapat naka-set ang display property sa "grid" at maaaring magdagdag ng "grid-template-columns" property para i-set ang laki ng bawat column.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: red;
}

.mission {
  background-color: white;
}

.vision {
  background-color: white;
}

Sa kodigo sa itaas, ang ".container" ay naka-display na "grid" at may dalawang column na may parehong laki. Ang ".mission" at ".vision" ay parehong may background-color na puti, habang ang background-color ng container ay red.

3. I-adjust ang laki ng bawat column kung kinakailangan. Sa halimbawang ito, naka-set sa "1fr" ang laki ng bawat column pero maaaring magdagdag ng ibang value (tulad ng pixels) kung gusto natin ng mas malaki o mas maliit na laki.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
}

Sa kodigo sa itaas, ginamit natin ang "1fr" bilang laki ng bawat column.

4. I-adjust ang margin, padding, at iba pang detalye sa pagsasaayos ng layout.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
  padding: 20px;
  gap: 20px;
  text-align: center;
}

.mission {
  background-color: white;
  padding: 20px;
}

.vision {
  background-color: white;
  padding: 20px;
}

Sa kodigo sa itaas, ginamit natin ang "padding" upang magdagdag ng espasyo sa bawat element. Sa container, ginamit natin ang "gap" upang magdagdag ng espasyo sa pagitan ng bawat elemento. Ginamit din natin ang "text-align: center" upang i-center ang text sa loob ng bawat elemento.

Ito ang magiging resulta ng mga hakbang na ito:

<div class="container">
  <div class="mission">Our Mission Statement</div>
  <div class="vision">Our Vision Statement</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: red;
  padding: 20px;
  gap: 20px;
  text-align: center;
}

.mission {
  background-color: white;
  padding: 20px;
}

.vision {
  background-color: white;
  padding: 20px;
}

Nawa'y nakatulong ito sa inyo!

nagawan kona po nag paraan paano naman po e center yung dalawa?