Dashboard Temp Share Shortlinks Frames API

HTMLify

Card Flip
Views: 384 | Author: djdj 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<style>
body{
    background-color: black;
}
.card{
    display:flex;
    align-items: center;
    position: relative;
    justify-content: center;
}
.card1{
    width:300px;
    height: 350px;
    margin:5px;
    transform-style: preserve-3d;
    transition: transform .8s ease-in-out;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.2),
            -5px -5px 10px rgba(255, 255, 255, 0.05);
    border-radius:17px;
    border: 2px solid white;
}

.card1:hover{
    transform: rotateY(180deg);
}

.front-page, .back-page{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-info{
    position: absolute;
    padding-bottom:10px;
    width: 100%;
    overflow-y: hidden;
    color:white;
    text-align: center;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


.card-info h4{
    margin-bottom:5px;
    margin-top:10px;
}

.card-btn {
    font-size: 14px;
    color: black;
    background-color: #0fbcf9;
    border: 0px solid black;
    border-radius: 5px;
    box-shadow: none;
    width:100px;
    height:40px;
    cursor:pointer;
    transition: all 0.3s ease;
}

.card-btn:hover{
    background-color: transparent;
    color: #0fbcf9;
    border: 1px solid #0fbcf9;
}

.back-page{
    background-color: #1e272e;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: start;
    transform: rotateY(180deg);
    box-shadow: 0 20px, 40px rgba(0, 0, 0, 0.1);
}

.card-content{
    text-align: center;
    padding: 20px;
    max-width:290px;
}
</style>
<body>
    <div class="card">
        <div class="card1">
            <div class="front-page fp1">
                <div class="card-info">
                    <h2>TalkSta</h2>
                    <span class="small-desc">Gives Solutions...</span>
                </div>
            </div>
            <div class="back-page">
                <div class="card-content">
                    <h2>TalkSta</h2><hr class="upper">
                    <span class="card-desc">
                        In TalkSta users ask problem and answering the question, comment the answer, anybody report the commenter, User set our profile other details, & here many features available like: Email verification, Add new category, Following & Followers option.<br><BR>Using Php, Sql, HTML, Css, Js create this site.
                    </span><br>    <br>    
                    <a href="https://talksta.is-best.net">
                        <button class="card-btn" id="card-btn1">Explore More</button> 
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

Share this file: