Skip to content

Instantly share code, notes, and snippets.

@calvincoxiii

calvincoxiii/hp-porkfolio-home.markdown

Created May 26, 2017 17:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save calvincoxiii/803ddcd99e39c78aef16190df3ea2e24 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save calvincoxiii/803ddcd99e39c78aef16190df3ea2e24 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. calvincoxiii created this gist May 26, 2017.
    7 changes: 7 additions & 0 deletions hp-porkfolio-home.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    HP Porkfolio Home
    -----------------


    A [Pen](https://codepen.io/aolyf/pen/mRGagx) by [aolyf](http://codepen.io/aolyf) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/aolyf/pen/mRGagx/license).
    27 changes: 27 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <body>
    <div class="container">
    <div id="page-wrap">
    <nav>
    <a href="#"><img src=" https://f4.bcbits.com/img/0010119116_21.jpg"></a>

    <hr>
    <main id="me">Who<p></p>Calvinです。</p>
    </main><hr>
    <main id="me">What <p>Satyr - Bassist</p>
    <p>Aolyf - Composer</p>
    <p></p>
    </main><hr>
    <main id="me">Where<p>Atlanta, GA</p>
    </main><hr>
    <main>Contact
    <a href = "mailto:[email protected]">[email protected]</a></main>

    <p id="#edu"> </p>



    <!--<iframe width="30%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/4710818&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>-->

    </div>
    </body>
    </html>
    30 changes: 30 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    $(document).ready(function(){
    $('img').addClass('animated flipInX');
    });
    $(document).ready(function(){
    $("a").hover(function(){
    $(this).css("background-color", "white");
    });
    });





    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');

    function setUserName() {
    var myName = prompt('Please enter your name.');
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Welcome, ' + myName + ".";
    if (!localStorage.getItem('name')) {
    setUserName();
    } else {
    var storedName = localStorage.getItem('name');
    myHeading.textContent = 'Welcome, ' + storedName;
    }
    }
    myButton.onclick = function() {
    setUserName();
    }
    2 changes: 2 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    53 changes: 53 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    @import url('https://fonts.googleapis.com/css?family=VT323');
    body {
    background: url("http://hdwallpaperdaily.com/wp-content/uploads/2015/03/flower-design-abstract-wallpaper.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'VT323', monospace;
    font-size: 3em;
    }

    #page-wrap {
    width: 50%;
    margin: 50px auto;
    padding: 20px;
    background: black;
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    box-shadow: 0 0 20px black;
    }

    nav {
    display: block;
    text-align: center;
    }

    img {
    border-radius: 50%;
    display: block;
    text-align: center;
    width: 30%;
    margin: auto;
    }

    html {
    font-family: 'VT323', monospace;
    }

    a:hover {
    text-decoration: none;
    }

    a {
    color: rgb(255, 34, 89);
    }

    main,
    p {
    color: pink;
    }
    #me{
    text-align:center;
    }
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />