==HTML==

 <section>

        <div class="about">

            <h2>ABOUT</h2>

            <div class="box"></div>

            <p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

        </div>

        <div class="about-content">

            <div class="ab-title">

                <h2>A WORD</h2>

                <h2>ABOUT US</h2>

            </div>

            <img src="sucai/bb3.jpg" alt="">

            <div class="right">

                <div class="right-top">

                    <h2>7000</h2>

                    <div class="box1 common"></div>

                    <p class=" para2 para">Students</p>

                </div>

                <div class="right-bot">

                    <h2>600</h2>

                    <div class="box2 common"></div>

                    <p class="para3 para">Faculty</p>

                </div>

            </div>

            <div class="left-words">

                <p>Praesent dignissim viverra est,sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</p>             

                <button>EXPLORE</button>

            </div>

        </div>

    </section>

==CSS==

section {

    width: 100%;

}

section .about {

    width: 1200px;

    margin: 0 auto;

}

section .about h2 {

    padding-top: 30px;

    font-size: 30px;

    text-align: center;

}

section .about .box {

    width: 60px;

    height: 3px;

    background: #07cbc9;

    margin: 10px auto;

}

section .about .para1 {

    text-align: center;

    color: gray;

    font-size: 14px;

    width: 500px;

    margin: 0 auto;

}

section .about-content {

    width: 1200px;

    height: 434px;

    margin: 0 auto;

    padding-top: 30px;

    position: relative;

}

section .about-content .ab-title {

    float: left;

    width: 250px;

}

section .about-content img {

    float: left;

    width: 650px;

    height: 434px;

}

section .about-content .left-words {

    position: absolute;

    top: 50%;

    margin-top: -100px;

    left: 0;

    width: 300px;

    padding: 20px;

    font-size: 18px;

    border: 1px solid gray;

    background: rgba(255,255,255,.5);

}

section .about-content .left-words button {

    width: 140px;

    height: 40px;

    background: #000;

    color: #fff;

    margin-top: 20px;

}

section .about-content .right {

    float: right;

    width: 258px;

    text-align: center;    

}

section .about-content .right h2 {

    font-size: 28px;

    font-weight: bold;    

    padding-top: 40px;

}

section .about-content .right .common {

    width: 60px;

    height: 3px;

    background: #07cbc9;

    margin: 10px auto;

}

section .about-content .right .para {

    font-size: 20px;

    padding-bottom: 40px;

}

section .about-content .right .right-top {

    margin-bottom: 30px;

    border: 1px solid #07cbc9;

}

section .about-content .right .right-bot {

    border: 1px solid #07cbc9;

}

​