Skip to content

Instantly share code, notes, and snippets.

@hpanago

hpanago/index.html

Created October 28, 2015 21:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hpanago/c310a1bbb52261123f12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hpanago/c310a1bbb52261123f12 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hpanago created this gist Oct 28, 2015.
    169 changes: 169 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,169 @@

    <!DOCTYPE html>

    <html>

    <head>

    <link rel="icon" type="image/png" href="favicon.png">


    <script>

    function twitter() {

    window.open('https://twitter.com/hpanago');

    }


    function facebook() {

    window.open('https://facebook.com/hpanago11');

    }


    function github() {

    window.open('https://github.com/hpanago');

    }

    </script>

    <meta charset="utf-8">

    <title>Iliana Panagopoulou</title>


    <style>

    .icon {
    width:110px;
    height:110px;
    background-size: 100%;
    border-radius: 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s linear;
    }
    .icon:hover {
    background-color: #2CC0B3;
    }

    #square {
    margin-left: auto;
    margin-right: auto;
    background-image: url('github.svg');
    background-size:80%;
    background-position:50%;
    }

    #square2 {
    float: left;
    margin-top: 70px;
    background-image: url(facebook.svg);
    background-size:80%;
    background-position:50%;
    }

    #triangle {
    text-align: center;
    font-size: 2em;
    width: 60%;
    margin-left: auto;
    margin-right: auto;

    margin-top: 80px;
    margin-bottom: 0px;
    }

    #square3 {
    float: right;
    margin-top: 70px;
    margin-left:auto;
    margin-right:0;
    background-image: url(twitter.svg);
    background-size:80%;
    background-position:50%;
    }

    .quote {
    width: 60%;
    quotes: "“" "”";
    min-width: 600px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    }

    body {
    color: #2CC0B3;
    background-color:#E3E4E5;
    }
    .center {

    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 460px;
    height: 460px;
    border: 90px solid #F6F7F8;
    border-radius: 50%;
    background-color: #F6F7F8;
    transition: all 0.3s linear;

    }
    .center:hover {
    box-shadow: 0 0 0 5px #F6F7F8;
    }

    .stitched {
    padding: 10px;
    margin: 10px;
    background: #38595E;
    color: #9EC9D9;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.3em;
    border: 2px dashed black;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #38595E, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
    text-shadow: -1px -1px rgba(58, 54, 54, 0.28);
    font-weight: normal;
    }

    </style>

    </head>

    <body>

    <div class="stitched">

    <h1>Iliana Panagopoulou</h1>
    <h2>IT student</h2>

    </div>


    <div class="center">
    <div id="square" class="icon" onclick="github();"></div>

    <div id="triangle"> <p> Connect with me. </p></div>

    <div id="square2" class="icon" onclick="facebook();"></div>

    <div id="square3" class="icon" onclick="twitter();"></div>

    </div>
    <div class="quote" >
    <p><q>A computer would deserve to be called intelligent if it could deceive a human into believing that it was human</q></p>
    <i>Alan Turing</i>
    </div>

    </body>

    </html>