Portfolio Design

For this project, I created the html for a portfolio theme that incorporates responsive design. I included some basic javascript functions and will eventually have PHP elements added for WordPress domains; however, I am not that proficient in PHP as of now. I focus mostly on html and css, as well as the basic designs of websites.

Link to website — https://portfoliodesign.netlify.com/

index.php


<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title><?php bloginfo(‘name’); ?></title>
<?php wp_head(); ?>
http://alfredstatedma.com/test1/wp-content/themes/workholyshit/script.js
</head>

<body>

WEB DESIGN AND ANIMATION

</div>

<img id=”banner”></img>

MY WORK

</div>

<?php if(have_posts() ): while(have_posts() ): the_post(); ?>

<br>
<?php the_title(); ?>
</div>
<?php endwhile; endif; ?>
<img id=”banner2″></img>

HTML/CSS

</div>

JAVASCRIPT

</div>

DESIGN

</div>

I am a freelance digital media artist who specializes mostly in web design and animation. I am more experienced in 3D animation utilizing Maya. For web design and graphic design, I primarily use Adobe Photoshop and Adobe Dreamweave.

I am proficient in html, css, and javascript; however, .

<img id=”banner3″></img>
</body>
</html>


CSS Code:


@charset “UTF-8”;
/*Theme Name: work*/

/* TABLET */
html,body{
width:100%;
margin:0;
padding:0;
}

#topbar{
width:100%;
height:80px;
background-color:white;
text-align: center;
}
.topText{
display:inline-block;
font-size:150%;
margin-top: 18px;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
}
#banner{
width:100%;
max-height:400px;
background-repeat: no-repeat;
background-image:image(texture.jpg);
}
#logo{
width:200px;
max-height:200px;
background-repeat:no-repeat;
margin:auto;
}
#whitespace{
width:100%;
height:440px;
background-color:white;
text-align: center;
overflow-y: scroll;
}
#centerText{
width:100%;
height:200px;
background-color:white;
text-align:center;
}
#text1{
width:100%;
height:120px;
font-size:250%;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-top:100px;
}
.imagebox{
width:400px;
height:400px;
background-color:#E5E5E5;
margin-top:40px;
border-radius:7px;
margin-left:auto;
margin-right:auto;
}
#banner2{
width:100%;
height:200px;
margin-top:100px;
background-image:image(texture.jpg);
}

#line1{
width:0%;
height:80px;
background-color:deepskyblue;
opacity:0;
transition:2s;
margin-top:75px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:200%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#linebox2{
width:100%;
height:100px;
margin-top:30px;
}
#line2{
width:0%;
height:80px;
background-color:deepskyblue;
opacity:0;
transition:2s;
margin-top:30px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:200%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#linebox3{
width:100%;
height:100px;
margin-top:30px;
}
#line3{
width:0%;
height:80px;
background-color:deepskyblue;
opacity:0;
transition:2s;
margin-top:30px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:200%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#aboutBox{
margin-top:100px;
width:65%;
height:350px;
background-color:deepskyblue;
margin-left:auto;
margin-right:auto;
border-radius:7px;
text-align:center;

}
#artstation{
width:100px;
max-height:100px;
margin-left:25px;
margin-right:50px;
margin-top:50px;
background-image:url(artstation.png);
}
#instagram{
width:100px;
max-height:100px;
margin-left:25px;
margin-right:50px;
margin-top:50px;
background-image:url(instagram.png);
}
#aboutDiv{
width:75%;
height:300px;
margin-top:60px;
text-align:center;
background-color:deepskyblue;
margin-left:auto;
margin-right:auto;
border-radius:7px;
}
#aboutText{
width:75%;
height:250px;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
font-size:120%;
display: inline-block;
padding-top:0px;

}
#banner3{
width:100%;
height:150px;
margin-top:40px;
background-image:image(texture.jpg);
}

/* Switch to tablet screen size (768 px on average) */
@media only screen and (min-width: 768px) {

/* WEBSITE VERSION */
html,body{
width:100%;
margin:0;
padding:0;
}

#topbar{
width:100%;
height:80px;
background-color:white;
text-align: center;
}
.topText{
display:inline-block;
font-size:200%;
margin-top: 18px;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
}
#banner{
width:100%;
max-height:400px;
background-repeat:no-repeat;
tex-align:center;
background-image:image(texture.jpg);
}
#whitespace{
width:100%;
height:380px;
background-color:white;
text-align: center;
overflow-y: scroll;
}
#centerText{
width:100%;
height:200px;
background-color:white;
text-align:center;
}
#text1{
width:100%;
height:120px;
font-size:250%;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-top:100px;
}
.imagebox{
width:300px;
height:300px;
background-color:#E5E5E5;
display: inline-block;
margin-top:40px;
border-radius:7px;
margin-left:20px;
margin-right:15px;
}
#banner2{
width:100%;
height:200px;
margin-top:100px;
background-image:image(texture.jpg);
}

#line1{
width:0%;
height:80px;
background-color:#E5E5E5;
opacity:0;
transition:2s;
margin-top:75px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:300%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#linebox2{
width:100%;
height:100px;
margin-top:30px;
}
#line2{
width:0%;
height:80px;
background-color:#E5E5E5;
opacity:0;
transition:2s;
margin-top:30px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:300%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#linebox3{
width:100%;
height:100px;
margin-top:30px;
}
#line3{
width:0%;
height:80px;
background-color:#E5E5E5;
opacity:0;
transition:2s;
margin-top:30px;
border-radius:10px;
margin-left:-20px;
color:black;
font-size:300%;
text-align:right;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
padding-right:10%;
padding-top:20px;
}
#aboutBox{
margin-top:100px;
width:65%;
height:200px;
background-color:#E5E5E5;
margin-left:auto;
margin-right:auto;
border-radius:7px;
}
#artstation{
width:100px;
max-height:100px;
margin-left:25px;
margin-right:50px;
margin-top:50px;
background-image:url(artstation.png);
}
#instagram{
width:100px;
max-height:100px;
margin-left:25px;
margin-right:50px;
margin-top:50px;
background-image:url(instagram.png);
}
#aboutDiv{
width:75%;
height:175px;
margin-top:60px;
text-align:center;
background-color:#E5E5E5;
margin-left:auto;
margin-right:auto;
border-radius:7px;
overflow-y:scroll;
}
#aboutText{
width:75%;
height:175px;
font-family:Consolas, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Courier New”, “monospace”;
font-size:120%;
display: inline-block;
padding-top:10px;

}
#banner3{
width:100%;
height:150px;
margin-top:40px;
background-image:image(texture.jpg);
}
}

Advertisements
This entry was posted in Best Work, Interactive and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s