<Title>Portfolio Website Home</Title>

HTML:

<!DOCTYPE html>

<html>

<head>

<title>Portfolio Website Home</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<a href="illustration.html">Illustration</a>

<a href="design.html">Design</a>

<a href="photography.html">Photography</a>

<a href="sculpture.html">Sculpture</a>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>KaitlenBoe Art</h1>

</div>

varmyIndex = 0;

carousel();

function carousel() {

vari;

var x = document.getElementsByClassName("mySlides");

for (i = 0; ix.length; i++) {

x[i].style.display = "none";

}

myIndex++;

if (myIndexx.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 2000); // Change image every 8 seconds

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>About</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<strong>About</strong>

<a href="illustration.html">Illustration</a>

<a href="design.html">Design</a>

<a href="photography.html">Photography</a>

<a href="sculpture.html">Sculpture</a>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>About</h1>

img class="Bio-Image" src="Assets/Images/About/IMG_0317.JPG" width="400px">

<h2>Artist Statement</h2>

<p2>As an artist I am interested in illustration, design, web development, and photography. I also have experience with analog mediums such as drawing, painting, and sculpture. If I am feeling ambitious, I find ways combine as many of the above mediums together into overly frustrating, extremely fun projects.

Why do I create? I've always felt the need to output something into the world. The act of creating is in itself cathartic and the feeling of seeing other people enjoy my art is unparalleled. (#fakedeep) I hope to use my own love of creating to enhance lives around me.</p2>

<p2>My name is KaitlenBoe. I am 21 years old and have spent the entirety of my life growing up in Escondido, California and trying to art. I don't remember a time when I was not interested in some sort of artistic expression and I've always liked creating work with my hands. My inspirations range from animation to tattoo art to street art to film. I am thankful to have had parents and close friends who have only ever encouraged me in my artistic pursuits over the years. I am currently finishing my bachelor's degree in Arts and Technology at California State University, San Marcos. I hope to use my degree as a coffee table coaster but more so to find work in the visual art or design field.</p2>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Illustration</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<strong>Illustration</strong>

<a href="design.html">Design</a>

<a href="photography.html">Photography</a>

<a href="sculpture.html">Sculpture</a>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>Illustration</h1>

<imgsrc="Assets/Images/Illustration/DSC02386thumb.jpg" width="80%" onclick="openModal();currentSlide(1)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/DSC04818thumb.jpg" width="80%" onclick="openModal();currentSlide(2)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/DSC04862thumb.jpg" width="80%" onclick="openModal();currentSlide(3)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/DSC04941thumb.jpg" width="80%" onclick="openModal();currentSlide(4)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/DSC05652thumb.jpg" width="80%" onclick="openModal();currentSlide(4)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/Scan-2-copythumb.jpg" width="80%" onclick="openModal();currentSlide(4)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/Scan01022017thumb.jpg" width="80%" onclick="openModal();currentSlide(4)" class="hover-shadow">

</div>

<imgsrc="Assets/Images/Illustration/DSC02386.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/DSC04818.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/DSC04862.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/DSC04941.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/DSC05652.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/Scan-2%20copy.jpg" style="width:100%">

</div>

<imgsrc="Assets/Images/Illustration/Scan01022017.jpg" style="width:100%">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

// Open the Modal

function openModal() {

document.getElementById('myModal').style.display = "block";

}

// Close the Modal

function closeModal() {

document.getElementById('myModal').style.display = "none";

}

varslideIndex = 1;

showSlides(slideIndex);

// Next/previous controls

function plusSlides(n) {

showSlides(slideIndex += n);

}

// Thumbnail image controls

function currentSlide(n) {

showSlides(slideIndex = n);

}

function showSlides(n) {

vari;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

varcaptionText = document.getElementById("caption");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; islides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; idots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

captionText.innerHTML = dots[slideIndex-1].alt;

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Design</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<a href="illustration.html">Illustration</a>

<strong>Design</strong>

<a href="photography.html">Photography</a>

<a href="sculpture.html">Sculpture</a>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>Design</h1>

<imgsrc="Assets/Images/Design/Boe_IFP_Large.jpg" alt="Fjords" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/Boe_LongLists.jpg" alt="Mountains" style="width:78%">

</div>

<imgsrc="Assets/Images/Design/Boe_SDLFFposter.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/Boe_TypefacePoster.jpg" alt="Forest" style="width:93%">

</div>

<imgsrc="Assets/Images/Design/Unrestrained_Flyer_withoutBleed.jpg" alt="Mountains" style="width:91%">

</div>

<imgsrc="Assets/Images/Design/Boe_Quote-Interpretation.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/floral-moon.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/jungle-cat-color-v1.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/jungle-cat-color-v3.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Design/tree%20heart%20album%20art.jpg" alt="Mountains" style="width:100%">

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Photography</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<a href="illustration.html">Illustration</a>

<a href="design.html">Design</a>

<strong>Photography</strong>

<a href="sculpture.html">Sculpture</a>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>Photography</h1>

</div>

<imgsrc="Assets/Images/Photography/BOE_13SEP17_0115.jpg" alt="Forest" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_16OCT17_0002.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_18APR18_0017.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_18APR18_0045.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_23NOV17_0028.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_23NOV17_0021.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_22NOV17_0036-2.jpg" alt="Mountains" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_11SEP17_0015-2.JPG" alt="Fjords" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_22NOV17_0003-2.jpg" alt="Fjords" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_18APR18_0036.jpg" alt="Mountains" style="width:100%">

</id>

</div>

<imgsrc="Assets/Images/Photography/BOE_21MAR18_0035.jpg" alt="Fjords" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_21MAR18_0020.jpg" alt="Fjords" style="width:100%">

</div>

<imgsrc="Assets/Images/Photography/BOE_23NOV17_0033.jpg" alt="Fjords" style="width:100%">

</div>

varmyIndex = 0;

carousel();

function carousel() {

vari;

var x = document.getElementsByClassName("mySlides");

for (i = 0; ix.length; i++) {

x[i].style.display = "none";

}

myIndex++;

if (myIndexx.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 2000); // Change image every 8 seconds

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Sculpture</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<a href="illustration.html">Illustration</a>

<a href="design.html">Design</a>

<a href="photography.html">Photography</a>

<strong>Sculpture</strong>

<a href="

<a href="contact.html">Contact</a>

</div>

<h1>Sculpture</h1>

<h3>***Oops, I'm sorry, this page is currently empty as it is a work in progress. For now, please pretend that there are photos of sculptures here.***</h3>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Contact</title>

</head>

<body>

img class="Header Image" src="Assets/Images/website-header.jpg" style="width:100%">

<a href="about.html">About</a>

<a href="illustration.html">Illustration</a>

<a href="design.html">Design</a>

<a href="photography.html">Photography</a>

<a href="sculpture.html">Sculpture</a>

<a href="

<strong>Contact</strong>

</div>

<h5>Contact</h5>

<h4>Hire me, please</h4>

<label for="fname">First Name</label>

<label for="country">Country</label>

<option value="australia">Australia</option>

<option value="canada">Canada</option>

</select>

<label for="subject">Subject</label>

<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"</textarea

</form>

</div>

</body>

</html>

CSS:

.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

.gallery:hover {

border: 1px solid #777;

}

.galleryimg {

width: 100%;

height: auto;

}

.desc {

padding: 15px;

text-align: center;

}

.bar {

}

a {

text-decoration: none;

font-family: futura;

font-size: 20px;

margin: auto;

padding: 25px;

color: purple;

font-weight: 700;

}

strong {

text-decoration: none;

font-family: futura;

font-size: 20px;

margin: auto;

padding: 25px;

color: dimgray;

}

.nav {

display: block;

text-align: center;

margin: 50px;

}

h1 {

font-family: futura;

font-size: 48px;

color: dimgrey;

display: block;

text-align: center;

margin: 0px 60px 0px;

margin-bottom: 60px

}

.Header {

display: block;

margin: 40px;

}

h2 {

font-family: futura;

color: purple;

display: block;

margin-top: 40px;

margin-bottom: 40px;

}

p1 {

font-family:sans-serif;

font-size: 24px;

color: dimgray;

padding:

}

p2 {

font-family:sans-serif;

font-size: 16px;

color: dimgray;

}

.artist {

display: block

}

.statement {

}

.artist-statement {

display: inline;

width: 400px;

margin-left: 275px;

line-height: 20px;

margin-top: 0px;

float: left;

}

.w3-content {

display: block;

margin: auto;

padding: 0px;

}

h3 {

font-family: futura;

color: grey;

font-size: 24px;

display: block;

width: 50%;

margin: auto;

padding: 30px;

}

#photos {

opacity: .88;

}

#photos img {

width: 30%;

float: left;

display: block;

margin: 2px;

}

ul {

list-style: none;

margin: 0px auto;

padding: 10px;

display: block;

max-width: 780px;

text-align: center;

}

#overlay {

background: rgba(0,0,0, .8);

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

display: none;

text-align: center;

}

#overlay img {

margin: 10% auto 0;

width: 550px;

border-radius: 5px;

}

#photos {

width: 100%;

}

#photo-gallery {

width: 100%;

}

.column {

}

.row::after {

content: "";

clear: both;

display: block;

margin: auto;

}

.last {

}

.last-photo {

display: block;

align-content: center;

}

.row {

display: block;

margin-top: 60px;

padding: 10px;

margin-left: 65px;

}

input[type=text], select, textarea {

width: 100%; /* Full width */

padding: 12px; /* Some padding */

border: 1px solid #ccc; /* Gray border */

border-radius: 4px; /* Rounded borders */

box-sizing: border-box; /* Make sure that padding and width stays in place */

margin-top: 6px; /* Add a top margin */

margin-bottom: 16px; /* Bottom margin */

resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */

}

input[type=submit] {

background-color: purple;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: plum;

}

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

width: 1000px;

margin: auto;

}

label {

font-family: futura;

font-size: 20px;

color: dimgrey;

}

.hire {

display: block;

margin-left: 155px;

}

.Image {

}

.Bio-Image {

padding: 50px;

}

h4 {

font-family: futura;

font-size: 22px;

color: dimgrey;

display: block;

text-align: center;

margin: 5px 60px;

margin-bottom: 60px;

}

.row > .column {

}

.row:after {

content: "";

display: table;

clear: both;

}

/* Create four equal columns that floats next to eachother */

.column {

float: left;

width: 25%;

}

/* The Modal (background) */

.modal {

display: none;

position: fixed;

z-index: 1;

padding-top: 100px;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: black;

}

/* Modal Content */

.modal-content {

position: relative;

background-color: #fefefe;

margin: auto;

padding: 0;

width: 90%;

max-width: 1200px;

}

/* The Close Button */

.close {

color: white;

position: absolute;

top: 10px;

right: 25px;

font-size: 35px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #999;

&lt;Title&gt;Portfolio Website Home&lt;/Title&gt;

<Title>Portfolio Website Home</Title>