<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Government Technical College Ado Soba/Who We Are</title>
    <link rel="icon" type="image/x-icon" href="images/l.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Import Bootstrap 5-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <style>
*{
    padding: 0;
    margin: 0;
}
.about-1{
    margin: 30px;
    padding: 5px;
}
.about-1 h1{
text-align: center;
color: black;
font-weight: bold;
}
.about-1-p{
    text-align: center;
    padding: 3px;
    color: white;
}
.about-item{
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: white;
    padding: 80px,30px;
    border: 1px solid;height: 20rem;
}
.about-item i{
    font-size: 43;
    margin-top: 1rem;

}
.about-item h3{
    font-size: 25px;
    margin-bottom: 10px;
}
.about-item hr{
    width: 46px;
    height: 3px;
    background-color: rgb(0, 0, 107);
    margin: 0 auto;
    border: none;
}
.about-item p{
    margin-top: 20px;
}
.about-item:hover{
    background-color:rgb(0, 0, 107);
}
.about-item:hover i,
.about-item:hover h3,
.about-item:hover p{
    color: white;
}
.about-item:hover hr{
    background-color: white;
}
.about-item:hover i{
    transform: translateY(-20px);
}
.about-item:hover i,
.about-item:hover h3,
.about-item:hover hr{
    transform:  all 400ms ease-in-out;transform: translateY(10px);
}
    </style>
</head>

<body>
    <section id="about">
        <div class="about-1">
            <h1>About Us</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus cumque assumenda eius aperiam iste
                necessitatibus ab fugiat, explicabo minima pariatur quam dicta beatae, culpa omnis, deserunt doloribus
                provident nesciunt. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim modi labore ipsa
                deleniti. Ad, eos, blanditiis, modi tenetur ea dolorem quos praesentium doloremque veritatis repellat
                debitis quisquam quasi sint odio!</p>
        </div>
        <div id="about-2">
            <div class="content-box-lg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="about-item text-center">
                                <i class="fa fa-book"></i>
                                <h3>Mission</h3>
                                <hr>
                                <p>"To be the best Technical College that will produce students who can apply
                                    scientific
                                    knowledge to the improvement and solution of environmental problems for the use and convenience of
                                    man"</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="about-item text-center">
                                <i class="fa fa-earth"></i>
                                <h3>Vission</h3>
                                <hr>
                                <p>"To produce quality and excellent students that will reach their full
                                    potential,
                                    through a
                                    structed skilled training, which will not only make them enterprising and self-reliant, but a highly
                                    motivated
                                    products for our end-users-the industries and tertiary institutions.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="about-item text-center">
                                <i class="fa fa-pen"></i>
                                <h3>Aim</h3>
                                <hr>
                                <p>To provide courses of instructions and trtaining which will hitherto produce trained manpower in
                                    Engeeninering, Manufacturing
                                    Building, Business and Distribuitve Fields of study and to ensure that all subjects taught are
                                    oriented towards immediate employment and are
                                    relevant to the need of the economy.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>