Science

<style>

    body {
        font-family: Gegorgia, Times New Roman ,serif;

    }
    h1
    {
    color: blue; text-transform:uppercase; text-shadow: 2px 2px 2px pink;
font-size:60px;
    }

    h2,a
    {
        color:white;
           font-size:40px; text-decoration:none;text-shadow:2px 2px 2px black;
    }
    .flip-card {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
        margin : 20px;

    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 3s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    }

    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .flip-card-front {
        background-color: white;
        color: black;

    }

    .flip-card-back {
        background-color: #190E86;
        color: #FFFFFF;
        transform: rotateY(180deg);


    }

    .title
    {
        padding-top : 35%;


    }
    .wrappers {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap : wrap;

    }



     .data {
        position: absolute;
        min-width: 80%;
        min-height: 600px;
        left: 10%;


    }

    .block1 {
        position: absolute;
         min-width: 80%;
        min-height: 400px;

        display: block;
    }

    .block2 {
        position: absolute;

        min-width: 80%;
        min-height: 400px;

        display: none;
    }

    .block3 {
        position: absolute;

        min-width: 80%;
        min-height: 400px;

        display: none;
    }



.space
{
  display : inline;
  height : 500px;
  width : 100%;
  margin : 20px;



}

</style>


      <center><h1 class="heading">Faculty of Science</h1></center>
<br>
<Br>



<div class="wrappers">

    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img src="https://sophia.college/images/uploads/botany2.jpg" 

alt=”Avatar” class=”image” style=”width:300px;height:300px;”>

<a

href=”https://sophia.college/site/faculty/botany”>Botany


    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img src="https://sophia.college/images/uploads/chemistry.jpg" 

class=”image” alt=”Avatar” style=”width:300px;height:300px;”>

<a

href=”https://sophia.college/site/faculty/Chemistry”>Chemistry

   <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img src="https://sophia.college/images/uploads/maths_1.jpg" 

class=”image” alt=”Avatar” style=”width:300px;height:300px;”>

<a

href=”https://sophia.college/site/faculty/maths”>Mathematics

Avatar
Avatar
</div>  

<div class="space">
</div>