KATE KINKADE

HTML [index page]


<!doctype html>
<html>

<head>
        <meta charset="utf-8">
        <title>Kate Kinkade</title>
    <link rel="shortcut icon" type="image/jpg" href="favicon.ico">
        <link href="style.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">

     <!--wipe your feet really good on the rhythm rug-->
    
     <!-- header-->
    
    <div class="header">
    <div class="title">K A T E      K I N K A D E</div>
        <div class="navbar"><ul>
            <li><a href="index.html">Home
                </a></li>
            <li><a href="https://drive.google.com/file/d/1ih_rF3JhjpspKroSI6xqjyiUmM1ZZjND/view?usp=sharing">Resume
                </a></li>
           <li> <a href="javascript:showhide('contact')">Contact
                </a></li>
            <li><a href="javascript:showhide('socials')">
    		   </a></li></ul>
        
        <div id="contact">
    	   <a href="mailto:hello@katekinkade.com">
                    ⇢   Email me </a> 
                <button id="copy-button">copy email</button>
            <div class="hide">
                <textarea id="copy-area">
                    hello@katekinkade.com</textarea></div>
                <p id="debug-text"></p>
                <script src="./index.js"></script>
            
              <p><a href="https://www.linkedin.com/in/katekinkade/">
               ⇢   LinkedIn</a><a 
            </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></div>
    
    <!--end header-->
    
<div class="boxcontainer">
    
     <!--row 1-->
    
    <div class="row1">
        
        <div class="bio">
           <p>Hi, friend!</p><p>
                I'm a communications grad from Richmond, the American International University in London.</p>
            <p>I love the North Shore, airport terminals, and Bob Dylan's "Highway 61 Revisited."<p>
            I'm a creative worker currently based in Minneapolis.</p>
        </div>
        
        <div class="face">
        <div class="imageInn">
            <img src="img/face.png">
            </div>
      <div class="hoverImg center">
          <img src="img/me.png" >
            </div>
        </div>
        </div>
        
     <!--row 2-->
    
    <div class="row2">
        
       <div class="blog">
        <div class="imageInn">
            <a href="https://blog.katekinkade.com/"><img src="img/blogpic.jpg"></a>
           </div>
           <div class="hoverImg center1">
          <a href="https://blog.katekinkade.com/"><img src="img/blog.png" >
              </div></div>
                        
            
         <div class="indexvideo">
             <div class="imageInn">
                 <a href="video.html">
                     <img src="img/videopic.jpg"></a>
             </div>
             <div class="hoverImg center1">
            <a href="video.html">
              <img src="img/videos.png"></a>
             </div>
           </div>
        </div>
        
           <!--row 3-->
        
    <div class="row3">
        
        <div class="indexart">
            <div class="imageInn">
            <a href="art.html">
                <img src="img/artpic.jpg"></a>
            </div>
            <div class="hoverImg center1">
          <a href="art.html">
              <img src="img/art.png" > </div>
          </div>
     
        <div class="resume">
            <div class="imageInn">
                <a href="https://drive.google.com/file/d/1ih_rF3JhjpspKroSI6xqjyiUmM1ZZjND/view?usp=sharing"><img src="img/resume.png"></a>
            </div>
            <div class="hoverImg center1">
                <a href="https://drive.google.com/file/d/1ih_rF3JhjpspKroSI6xqjyiUmM1ZZjND/view?usp=sharing"><img src="img/myresume.png" >
            </div>
        </div>
    
    <div class="photojournal">
        <div class="imageBox1">
            <div class="imageInn">
                <a href="http://photo.katekinkade.com/"><img src="img/photojournalpic.jpg"></a>
            </div>
            <div class="hoverImg center1">
            <a href="http://photo.katekinkade.com/"><img src="img/photojournal.png" >
            </div>
        </div>
        </div>
     </div>
</div>
</div>
        
        <!--footer-->
 <div class="footer">
    <div class="codeby">
       <a href="mycode.html">code by kate</a>
        </div>
      <div class=" arrow ">
              <img src="img/arrowside . png"</div>
     </div>
    </div>

        <!--SCRIPTS-->
        <!--"show/hide" navigation script-->
        
<script>     function showhide(id) {
       	var e = document.getElementById(id);
       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }</script>
    
     <!--copy email 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>

        <!--END SCRIPTS-->
</body>
</html>

CSS [all pages]



body {background-color:#FAFAFA;}
.main {
    font-family: 'Varela Round', sans-serif;
    font-size:11px;
    }

/* begin: header css ----  */

.header {padding-top:20px;
    padding-left:80px;
    padding-bottom:20px;}

.title {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    width: auto;
    }

.navbar {padding-top:10px;
    font-size:11px;}
.navbar a {text-decoration: none;
        color:black;
        margin-left:none;
        margin-right:20px;}
.navbar a:hover {color:lightcoral;}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;}
.navbar li {
    display: inline;}

#contact {display:none; 
        padding-top:15px;
        padding-bottom:2px;
        border-bottom: thin solid #ECECEC;
        width: 800px;}
#contact img {width:22px; height:16px;}

#socials {display:none; 
         padding-top:5px;
        padding-bottom:0px;
        border-bottom: thin solid #ECECEC;
        width: 800px;}

.hide {
  position:absolute;
  left:-9999px
}

/* ---- end: header css */

 /* begin: index css ---- */

.boxcontainer  {
    width:580px;
    margin-left: 90px;
    margin-top: 15px;
    -webkit-transform: rotate(0);}
.boxcontainer img {height:186px;
    opacity: 0.5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    -webkit-backface-visibility: hidden;}
.boxcontainer img:hover {opacity: 1.0;}


/* index ROW 1 ---- */

.row1  {
    display:grid;
    grid-template-columns:41% 38%; 
     justify-content: end;}

.bio  {background-color:#ECECEC;
    width:180px;
    height:160px;
    padding-right:25px;
    padding-top: 10px;
    padding-bottom:20px;
    padding-left:25px;}

.face {
    position: relative;
    float: left;}
.face img {opacity:.7;
    width: 220px;
    height: 190px}
.face .hoverImg img 
    {width: 70px;
    height: 54px;}
.face .hoverImg {
    position: absolute;
    left: 113px;
    top: 30px;
    display: none;}
.face:hover .hoverImg {
    display: block;}

/* index ROW 2 ---- */
/* note: "indexvideo" is used on the index page (not "video") ---- */

.row2  {
     padding-top:5px;
     display:grid;
    grid-template-columns:26% 20% 40%;
   }

.blog {
    position: relative;
    float: left;}
.blog .hoverImg img {width: 100px;
    height: 53px;}
.blog .hoverImg {
    position: absolute;
    left: -90px;
    top: 10px;
    display: none;}
.blog:hover .hoverImg {
    display: block;}

.indexvideo {
    position: relative;
    float: left;}
.indexvideo .hoverImg img {width: 110px;
    height: 35px;}
.indexvideo .hoverImg {
  position: absolute;
  left: 270px;
  top: 105px;
  display: none;}
.indexvideo:hover .hoverImg {
  display: block;}

/* index ROW 3 ---- */
/* note: ".indexart" is used on the index page (not ".art") ---- */

 .row3 {
     padding-top:5px;
    display:grid;
    grid-template-columns:6.5% 20% 28.5% 20% 20%;}

.indexart {
  position: relative;
  float: left;}
.indexart .hoverImg img {width: 80px;
    height: 40px;}
.indexart .hoverImg {
  position: absolute;
  left: -70px;
  top: 90px;
  display: none;}
.indexart:hover .hoverImg {
  display: block;}

.resume {
  position: relative;
  float: left;}
.resume .hoverImg img {width: 140px;
    height: 43px;}
.resume .hoverImg {
  position: absolute;
  left: 20px;
  top: 185px;
  display: none;}
.resume:hover .hoverImg {
  display: block;}

 .photojournal {
    position: relative;
    float: left;}
.photojournal .hoverImg img 
    {width: 120px;
    height: 60px;}
.photojournal .hoverImg {
    position: absolute;
    left: 138px;
    top: 100px;
    display: none;}
.photojournal:hover .hoverImg {
    display: block;}

    /* begin: footer css ----  */

.codeby  {font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    float:right;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    padding:5px;
    font-size: 10px;
    margin-bottom:40px;
   }
.codeby a {text-decoration: none;
    color: black;}
.codeby a:hover {color:lightcoral;}

.footer {padding-right:33px;
        margin-top:10px;
    position: relative; 
    bottom: 0;
    right: 0;
    }

.indexart {
  position: relative;
  float: left;}
.indexart .hoverImg img {width: 80px;
    height: 40px;}
.indexart .hoverImg {
  position: absolute;
  left: -70px;
  top: 90px;
  display: none;}
.indexart:hover .hoverImg {
  display: block;}

    /* ----  end: footer css */
    /* ----  end: index css */


 /* begin: under construction css ---- */

.underconstruction {font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    width:50%;
    margin: 0 auto;
padding-top:50px;}

    /* end: under construction css */


    /* begin: video page css */
.video img {
    opacity: 0.5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    -webkit-backface-visibility: hidden;
}
.video img:hover {opacity: 1.0;}
.video {
    display:grid;
    grid-template-columns:62% 50%;
    margin-left:30px;
    width:650px;}
.video h1 {font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    }
.video h2 {font-size:12px;}

.videocolumnleft {
    width:400;}
.videocolumnright {
    padding-left:30px;
    width:300;}

.videotext1 {}
.videotext2 {margin-top:160px;}
.videotext3 {margin-top:370px;}
.videotext4 {margin-top:370px;}

    /* ----  end: video page css */


    /* begin: art page css ----  */

.art {
    display:grid;
    grid-template-columns:59% 50%;
margin-left:30px;
width:650px;
margin-top:30px;}
.art h2 {font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    }
.art h3 {font-size:12px;}

.artcolumnleft {
    width:400;}
.artcolumnright {
    padding-left:30px;
    width:300;}

.artcolumnleft img {width:375px;
    padding-bottom:5px;}

.arttext2 {}
.arttext2 {margin-top:275px;}
.arttext3 {margin-top:410px;}
.arttext4 {}
.arttext5 {} 

    /* ---- end: art page css */


   /* ---- code box*/
.htmlbox {height:200px;
           width:800px;
            border:1px solid #ccc;
            overflow:auto;}
.htmlbox code { font:monospace;
                font-size:3;
             }

.cssbox {height:200px;
           width:800px;
            border:1px solid #ccc;
            overflow:auto;}
.cssbox code { font:monospace;
                font-size:3;
             }


Hello, world!

Updated 02/25/2021.