homepage

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <title>Kate Kinkade</title>
        <link href="ver2.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet">

</head>
<body>

<div class="main">
    <div class="header">
    <div class="title">Kate Kinkade</div>

        <div class="navbar"><ul>
            <li><a href="http://katekinkade.com/">Home</a></li>
            <li>
                <a href="javascript:showhide('contact')">
    		Contact
    	   </a></li>

                <li>
                <a href="javascript:showhide('socials')">
    		Socials
                    </a></li></ul>

        <div id="contact">

                <a href="mailto:katekinkade@gmail.com">
                     Email me: </a> katekinkade@gmail.com


                <button id="copy-button">Copy</button>
            <div class="hide">
                <textarea id="copy-area">
        katekinkade@gmail.com</textarea></div>
    <p id="debug-text"></p>
    <script src="./index.js"></script>


    	</div>

          <div id="socials">
             <p><a href="http://www.instagram.com/katekinko">
                Instagram</a><a href="https://uk.linkedin.com/in/katekinkade">Linkedin</a></p>

    	</div>

        </div></div>

    <!--end header-->

    <div class="boxcontainer">

    <div class="row1">
        <div class="textbox1">
           <p><u>About</u></p>
            <p>Based in Minneapolis, presently living in London.</p>
            <p>Communications: Media Studies major at Richmond, the American International University in London.</p>
       <p>lorem ipsum, etc... put something here</p>
        </div>


         <div class="textbox2">
             <a href="http://katekinkade.com/cv"><p><u>Résumé</u></p></a>
        <div class="textimg"><a href="http://katekinkade.com/cv"><img src="https://i.imgur.com/Q17X5gr.png"></a></div>
            </div>

            </div>

    <div class="row2">
        <div class="design">
            <a href="http://katekinkade.com/design"><img src="https://i.imgur.com/dsomJ33.jpg" alt="design"></a></div>
        <div class="shirts">
            <a href="http://katekinkade.com/shirts"><img src="https://i.imgur.com/STtTitF.jpg" alt="shirts"></a>
            </div>
            </div>


    <div class="row3">
        <div class="art"><a href="http://katekinkade.com/art"><img src="https://i.imgur.com/gR1gYA0.jpg"></a></div>
        <div class="video"><a href="http://katekinkade.com/video"><img src="https://i.imgur.com/jQELnfr.jpg"></a></div>
        <div class="photo"><a href="http://photo.katekinkade.com/"><img src="https://i.imgur.com/IuUv5YN.jpg"></a></div>
        </div>


    </div></div>

    <div class="footer">
    <div class="copyright">coded by kate</div></div>

         <!--is this copyright tacky? decide later-->
      <!--show/hide navigation script-->

<script>     function showhide(id) {
       	var e = document.getElementById(id);
       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }</script>


<script>const copyButton = document.querySelector("#copy-button");
const copyArea = document.querySelector("#copy-area");
const debugText = document.querySelector("#debug-text");
let copiedText = "";

copyButton.addEventListener("click", (e) => {
    copyArea.select();

    try {
        copiedText = document.execCommand("copy");
        debugText.textContent = "Copied!";
    }catch(err) {
        debugText.textContent = "The text was not able to be succesfully copied!";
    }
});</script>


     <!--show/hide navigation script-->

</body>


</html>