CODEWITHSUNDEEP
htmlcss
Kiruaaa
Kiruaaa

Reputation: 301

using html and css only flexbox

How to align like this because the text with progress bar are hard to align using flex box.

enter image description here

should i make 3 seperate div or 2 div? because text with progressbar content are hard to align

enter image description here

https://jsfiddle.net/ypsmkLrb/1/ MY CODE

*{
    padding:0;
    margin:0;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.container{
    width:1200px;
    margin:auto;
    background-color:teal;
}
.about-header{
    padding-bottom:25px;
    text-align: center;
}
.about-img img{
    height:200px;
    width:auto;
}
.about-img{
    height:200px;
    width:auto;
}
.about-row{
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;       
}
.about-content{
    line-height:1.6;
    padding-left: 20px;
    border:solid
}
.about-content img{
    height:15px;
    width:auto;
 }
.bar-row-one{
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
}
 .bar-row-two{
    display:flex;
    justify-content:space-around;
}

Upvotes: 0

Views: 47

Answers (3)

Majonez.exe
Majonez.exe

Reputation: 432

That's the solution:

Live demo: https://jsfiddle.net/6qwkmtfx/1/

Or the CSS code.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* ohhh. a lot of fonts */
}

.container {
  width: 100%; /* orginally "width: 1200px" */
  margin: auto;
  background-color: teal; /* or "white" // "#fff" */
}

.about-header {
  padding-bottom: 25px;
  /* padding-top: 25px; */
  text-align: center;
}

.about-img img {
  height: 200px;
}

.about-img {
  height: 200px;
}

.about-row {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  justify-content: center; /* to grid */
  align-items: flex-start; /* to grid */
}

.about-content {
  line-height: 1.6; /* Missing value? */
  padding-left: 20px;
  border: solid;
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}

Upvotes: 1

IvanS95
IvanS95

Reputation: 5742

If you need to just align the progressbars, I'd suggest setting an explicit width to the labels before so the progress bar starts at the same point for all of them

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  width: 1200px;
  margin: auto;
  background-color: teal;
}

.about-header {
  padding-bottom: 25px;
  text-align: center;
}

.about-img img {
  height: 200px;
  width: auto;
}

.about-img {
  height: 200px;
  width: auto;
}

.about-row {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
}

.about-content {
  line-height: 1.6;
  padding-left: 20px;
  border: solid
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}

label {
  width: 50px;
  display: inline-block;
}

.bar {
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mockup Template</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section id="about">
    <div class="container">
      <div class="about-header">
        <h1>About</h1>
      </div>
      <div class="about-row">
        <div class="about-img">
          <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
        </div>
        <div class="about-content">
          <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/> Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
          </p>
          </br>
          <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/> Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/> In vidisse volucptatibus vix. Ectram dissentiunt
            an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/> Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
          </p>
          <div class="bar-row-one">
            <div class="bar bar1">
              <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar2">
              <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
          <div class="bar-row-two">
            <div class="bar bar3">
              <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar4">
              <label class="bar-label-ui">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
        </div>
      </div>
  </section>
</body>

</html>

Upvotes: 2

Himanshu Joshi
Himanshu Joshi

Reputation: 292

What I understand from your comment that you looking for center alignment of the content area. If this is right, I think you missed few attributes for flex properties in ".about-row" class, please try below snippet : 

*{
              padding:0;
              margin:0;
          }
          body{
              font-family:Verdana, Geneva, Tahoma, sans-serif;
          }
          .container{
              width:1200px;
              margin:auto;
              background-color:teal;
          }
          .about-header{
              padding-bottom:25px;
              text-align: center;
          }
          .about-img img{
              height:200px;
              width:auto;
          }
          .about-img{
              height:200px;
              width:auto;
          }
          .about-row{
              display: flex;
              flex-direction: row;
              font-size: 11px;
              justify-content: center;
              align-items: flex-start;     
          }
          .about-content{
              line-height:1.6;
              padding-left: 20px;
              border:solid
          }
          .about-content img{
              height:15px;
              width:auto;
           }
          .bar-row-one{
              display:flex;
              align-items:flex-start;
              justify-content:space-around;
          }
           .bar-row-two{
              display:flex;
              justify-content:space-around;
          }
 <section id="about">
        <div class="container">
            <div class="about-header">
                <h1>About</h1>
            </div>
            <div class="about-row">
                <div class="about-img">
                    <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
                </div>
                <div class="about-content">
                    <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/>
                        Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
                     </p></br>
                     <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/>
                        Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/>
                        In vidisse volucptatibus vix. Ectram dissentiunt an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/>
                        Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
                     </p>
                    <div class="bar-row-one">
                        <div class="bar1">
                            <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar2">
                            <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                    <div class="bar-row-two">
                        <div class="bar3">
                            <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar4">
                            <label class="bar-label-ui/ux">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Upvotes: 1

Related Questions