Personal Projects Page

Readme.md

Flipping css taken from http://davidwalsh.name/demo/css-flip.php

flip.css

ul.tags {
    position: absolute;
    margin: 0;
    left: 10px;
    right: 0;
    bottom: 0;
    display: inline;
    list-style: none;
    overflow: hidden;
    padding: 0;
}

ul.tags li {
    float: left;
}

.tag {
  background: #999;
  border-radius: 3px 0 0 3px;
  color: #fff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 10px 0 10px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

/*.tag:hover {
  background-color: crimson;
  color: white;
}

.tag:hover::after {
   border-left-color: crimson;
}
*/
/* Horizontal Flip */
.flip-container {
    display: inline-block;
    margin-right: 5px;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    border: 1px solid #ccc;
}

/* START: Accommodating for IE */
.flip-container:hover .back,
.flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front,
.flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
/* END: Accommodating for IE */

.flip-container,
.front,
.back {
    width: 200px;
    height: 300px;
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front,
.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: absolute;
    top: 0;
    left: 0;
}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background: #f8f8f8;
    z-index: 2;
}

.back {
    background: #f8f8f8;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.front .name {
    font-size: 2em;
    display: inline-block;
    background: rgba(33, 33, 33, 0.9);
    color: #f8f8f8;
    font-family: Courier;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: 60px;
    left: 25%;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.05em #333;
    display: none;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.title {
    font-weight: bold;
    color: #00304a;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    text-align: center;
    text-shadow: 0.1em 0.1em 0.05em #acd7e5;
    font-family: Courier;
    font-size: 22px;
}

.back p {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 20px;
    font-size: 18px;
}
/* vertical */

.vertical.flip-container {
    position: relative;
}

.vertical .back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.vertical.flip-container .flipper {
    -webkit-transform-origin: 100% 213.5px;
    -moz-transform-origin: 100% 213.5px;
    -ms-transform-origin: 100% 213.5px;
    transform-origin: 100% 213.5px;
}
/* START: Accommodating for IE */

.vertical.flip-container:hover .back,
.vertical.flip-container.hover .back {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.vertical.flip-container:hover .front,
.vertical.flip-container.hover .front {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
/* END: Accommodating for IE */

index.html

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

<head>
    <link rel="stylesheet" href="flip.css">
</head>

<body>
    <div class="container">
        <h2>Projects</h2>
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                    <ul class="tags">
                        <li><a href="#" class="tag">Node</a></li>
                        <li><a href="#" class="tag">CSS</a></li>
                        <li><a href="#" class="tag">Python</a></li>
                        <li><a href="#" class="tag">JS</a></li>
                  </ul>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
        <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                    <ul class="tags">
                        <li><a href="#" class="tag">Python</a></li>
                        <li><a href="#" class="tag">Flask</a></li>
                    </ul>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                    <ul class="tags">
                        <li><a href="#" class="tag">Angular</a></li>
                        <li><a href="#" class="tag">JS</a></li>
                    </ul>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
        <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
        <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper">
                <div class="front">
                    <div class="title">Cryptanalysis Toolkit</div>
                </div>
                <div class="back">
                    <p>
                        A tool to analyse ciphertext and perform trivial cryptanalysis operations.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>