Web Coding

Designed, developed, and uploaded a simple web site using HTML and basic CSS. Instructor: JR Griffith

2019
Web Design, Web Development, Information Architecture
Sketches and preview
Research
Research
Research
Research
Research
Research
Research
Research
Throw-Up Sheet
Throw-Up Sheet
Throw-Up Sheet
Throw-Up Sheet
Thumbnail
Thumbnail
HTML Structure
HTML | CSS | Script Language

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Jan Jusino" content="Art Studio">
<meta name="art" content="portfolio">
<meta name="graphic designer" content="graphic, design, paint, art, creative, thinker">
<title>home</title>
<style type="text/css">
    
/* basic setup */
    
    html, body {
    background: gold;
    color: black;
    font-family: helvetica, sans-serif;
    font-size: 14px;
    height: 100%;
    line-height: 1.2;
    width: 100%;
    }
 
    .header {
        margin: 0 auto 0 auto;
        padding: 0 auto 0 auto;
        position: relative;
        width: 0 auto 0 auto;
        z-index: 11;
    }
    
    .footer {
        margin: 0 auto 0 auto;
        padding-top: 10em;
        position: relative;
        width: 100%;
        z-index: 11;
        float:left;
    }
    
    .footer a {
        color:white;
        text-decoration:none;
    }
    
    .footer a:hover {
        text-decoration: none;
            color: darkslategray;
        
    }
    
    @media screen and (max-width: 100%) {
        .header {
            width: 100%;
            margin: 0;
        }
        
        .gallery {
            width: 100%;
            margin: 0;
        }
        
        .preview {
            width: 100%;
            margin: 0;
        }
        
        .nav {
            width: 100%;
            margin: 0;
        }
        
        .article {
            width: 100%;
            margin: 0;
        }
        
        
    }
    
/* Navigation */
    .nav {
        
        text-decoration: none;
        list-style:none;
        -moz-box-shadow: darkslategray;
        -webkit-box-shadow: darkslategray;
        box-shadow: darkslategray;
        margin: 0 auto 0 auto;
        padding: 0 0 5em 77px;
        position: relative;
        width: 309px;
        z-index: 11;
        }
        
    .nav li {
            margin: 25px;
            float: left;
            position: relative;
            line-height: 0;    
        }
        
    .nav a {
            margin: 0;
            padding: 0;
            text-decoration: none;
            float: left;
            height: 30px;
            color: black;
        }
        
    .nav li:hover > a {
            text-decoration: none;
            color: darkslategray;
        }
        
    .nav li:hover > ul {
            display: block;
        }
        
    
    
/*Sub-menu */
        
    .nav ul {
            list-style:none;
            margin: 0;
            padding: 0;
            display: none;
            position: absolute;
            top: 35px;
            left: 0;
            z-index: 99999;
            -moz-box-shadow: darkgreen;
            -webkit-box-shadow: white;
            box-shadow: white;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        
    .nav ul ul {
            margin: 0;
            padding: 0;
            top: 0;
            left:150px;
        }
        
    .nav ul li {
            float:none;
            margin: 0;
            padding: 0;
            display: block;
            -moz-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;
            -webkit-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;
            box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;        
        }
    
        
        
/* Clear floated elements */
    
    .nav:after {
            visibility: hidden;
            display: block;
            clear: both;
            height: 0;
        }
        
    
    .nav ul li:first-child > a
        {
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
        }
        
    .nav ul li:first-child > a:after
        {
            position: absolute;
            left: 30px;
            top: -8px;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 8px solid #fff;
            }
        
    .nav ul ul li:first-child a:after
        {
            left: -8px;
            top: 12px;
            width: 0;
            height: 0;
            border-left: 0;
            border-bottom: 5px solid transparent;
            border-top: 5px solid transparent;
            border-right: 8px solid #fff;    
        }
        
    .nav ul li:first-child a:hover:after
        {
            border-bottom-color: #fff;
        }
        
    .nav ul ul li:first-child a:hover:after
        {
            border-right-coor: #04acec;
            border-bottom-color: transparent;
        }
    
    .nav ul li:first-child > a
        {
            -moz-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
        }
        
    .article {
        
    clear: both;
    margin: 0 auto 0 auto;
    padding: 10em 0 0 auto;
    position: relative;
    width: 940px;
    z-index: 10;
    display: block;
    
    }
    /* Image Grid */
.gallery {
    clear: both;
    margin: 0 auto 0 auto;
    padding: 5em 0 0 35px;
    position: relative;
    width: 940px;
    z-index: 10;
    flex: 50%;
    }
    
.column img {
    margin-top: 5px;
    vertical-align:top;
    width: 200px;
    height: 203px;
    padding:inherit;
    
}
    .column video {
    margin-top: 5px;
    vertical-align:top;
    width: 200px;
    height: 203px;
    padding:inherit;
    
}
    
    .box {
           float: left;
    margin: 0 35px -15px 0;
    position: relative;
    text-align: center;
        padding: 1em;
        text-decoration: none;
        list-style:none;
    }
    
    .box a {
            text-decoration: none;
    }
    
    .box h {
        color: black;
    }
    .preview {
        padding-top: 7em;
    }
</style>    
    
</head>
<body>
    <!-- Header -->
    <audio controls autoplay hidden>
  <source src="_audio/background.mp3" type="audio/ogg">
  <source src="_audio/background.mp3" type="audio/mpeg">
</audio>
    <div data-class-network="header">
        <a href="home.html"><img src="_images/JANJUSINOLOGO.jpg" height="200" width="200" alt="logo"></a>
    </div>
    
    
<!-- Nav--> 
        <div data-class-network="nav">
                <li><a href="store.html">Store</a>
            <ul>
                  <li><a href="apparel.html">Apparel</a></li>
            </ul>
                  </li>
                <li><a href="gallery.html">Gallery</a>
            <ul>    
                <li><a href="cinema.html">cinema</a></li>
                <li><a href="photography.html">photography</a></li>        
                <li><a href="canvas.html">canvas</a></li>
            </ul>
                </li>
                <li><a href="about.html">About Me</a>
            <ul>
                <li><a href="mission.html">Mission </a></li>        
                <li><a href="contact.html">Contact</a></li>
            </ul>
                </li>
            </div>    
    
    <br>
    <br>
    <br>
    <br>
    
    <div data-class-network="article">
        <br>
        <br>
        <p>
            <strong>About Me</strong>
            Drawing off the margin got him to discover what truly defines art. 
Jan Christian Jusino enjoys studying and bending the fundamentals of arts. 
Exposed to different cultures allows him to explore different artistic worlds and styles.
        <br>
        <br>
        <br>
        <strong>Education</strong>
            Jan currently studies graphic design in Fine Arts at The Art Institute of Houston. His work loves to create rhythm and deliberate compositions of shapes.
        <br>
        <br>
        <strong>Volunteer</strong>
        <br>
        Bayou Art Festival;
        <br>
        Black Swan Yoga Studio;
        <br>
        <br>
        <strong>Mediums</strong>
            <br>
            Acrylic
            <br>
            Oil
            <br>
            Clay
            <br>
            Wood
            <br>
        <br>
        CopyRight &copy; Jan Jusino, 2018 
        </p>
        
    </div>
    <br>
    <br>
    <br>
    <br>
    
    <hr>
    <hr>
    
    <br>
    <br>
    <br>
    <br>
    <!-- Gallery -->
    <div data-class-network="gallery">
        <div data-class-network="column">
            
            <div data-class-network="box">
            <a target="_self" href="apparel.html"><img src="_images/w.jpg" alt="apparel">
                <br>
                <h>Brains<br><i>Apparel</i></h>
            </a>
            </div>
            
            <div data-class-network="box">
            <a target="_self" href="_images/x.jpg">
    <img src="_images/x.jpg" alt="canvas">
                    <br>
                <h>Star<br><i>Apparel</i></h>
            </a>
            </div>
            
            <div data-class-network="box">
            <a target="_self" href="_images/y.jpg">
    <img src="_images/y.jpg" alt="cinema">
                    <br>
                <h>Collage <br><i>Apparel</i></h>
                </a>
            </div>
            
            <div data-class-network="box">
            <a target="_self" href="_images/x.jpg">
    <img src="_images/z.jpg" alt="photography">
                    <br>
                <h>Interface<br><i>Apparel</i></h>
                
    </a>
            </div>
    
            <div data-class-network="box">
               <a target="_self" href="_images/s4.jpg">
       <img src="_images/s4.jpg" alt="brain">
                       <br>
                <h>Heart<br><i>Canvas</i></h>
            </a>
            </div>
            <div data-class-network="box">
    <a target="_self" href="_images/s1.jpg">
    <img src="_images/s1.jpg" alt="interface">
            <br>
                <h>Warm<br><i>Canvas</i></h>
            </a>
        </div>
            
            <div data-class-network="box">
    <a target="_self" href="_images/s2.jpg">
    <img src="_images/s2.jpg" alt="brain">
            <br>
                <h>Swirl<br><i>Canvas</i></h>
        </a>
        </div>
            <div data-class-network="box">
            
    <a target="_self" href="_images/s3.jpg">
    <img src="_images/s3.jpg" alt="interface">
            <br>
                <h>Mardi<br><i>Canvas</i></h>
        
    </a>
            </div>
            
            <div data-class-network="box">
    <a target="_blank" href="_images/av.jpg">
       <img src="_images/av.jpg" alt="brain">
            <br>
                <h>Face<br><i>Canvas</i></h>
</a>
            </div>
            
            <div data-class-network="box">            
    <a target="_self" href="_images/ax.jpg">
    <img src="_images/ax.jpg" alt="star">
            <br>
                <h>Satellite<br><i>Canvas</i></h>
    </a>
    </div>
            <div data-class-network="box">
    <a target="_self" href="_images/au.jpg">
    <img src="_images/au.jpg" alt="code">
            <br>
                <h>Electric<br><i>Canvas</i></h>
        </a>
            </div>
            
            <div data-class-network="box">
    <a target="_self" href="_images/ap.jpg">
    <img src="_images/ap.jpg" alt="interface">
            <br>
                <h>Complet.<br><i>Canvas</i></h>
            </a>
            </div>
            
    <div data-class-network="box">
    <a target="_self" href="_video/c1.mp4">
       <video width="500" height="auto" controls>
  <source src="_video/c1.mp4" type="video/mp4">
  <source src="_video/c1.mp4" type="video/ogg">
        </video>
            <br>
                <h>Flight Lights<br><i>Cinema</i></h>
        </a>
    </div>
    
            <div data-class-network="box">
    <a target="_self" href="_video/c2.mp4">
        <video width="500" height="auto" controls>
  <source src="_video/c2.mp4" type="video/mp4">
  <source src="_video/c2.mp4" type="video/ogg">
        </video>
            <br>
                <h>Don't eat too much tuna<br><i>Cinema</i></h>
                </a>
            </div>
            
            <div data-class-network="box">
                <a target="_self" href="_images/ujh.jpg" media="(max-width: 300px)">
       <img src="_images/ujh.jpg" alt="brain">
                    <br>
                <h>Building<br><i>Photography</i></h>
                </a>
            </div>
            
            <div data-class-network="box">
    <a target="_self" href="_images/asz.jpg" media="(max-width: 300px)">
    <img src="_images/asz.jpg" alt="interface">
            <br>
                <h>Live Play<br><i>Photography</i></h>
    </a>
            </div>
        <div data-class-network="box">
    <a target="_self" href="_images/dbv.jpg" media="(max-width: 300px)">
    <img src="_images/dbv.jpg" alt="brain">
                <br>
                <h>Motion<br><i>Photography</i></h>
            </a>
            </div>
            <div data-class-network="box">
    <a target="_self" href="_images/ert.jpg" media="(max-width: 300px)">
    <img src="_images/ert.jpg" alt="interface">
            <br>
                <h>Pigeons<br><i>Photography</i></h>
    </a>
            </div>
        
    </div>
    </div>
        
    
<!-- FOOTER -->
    <br>
    <br>
        <div data-class-network="footer">    
            <h><strong>Follow me on Social Media!</strong></h>
            <a href="https://www.linkedin.com/in/jan-jusino-837469b1/">LinkedIn</a>
            <a href="https://www.youtube.com/channel/UCq9mdhsFv3ZKDDmUC76fjeg?view_as=subscriber">Youtube</a>
            <a href="https://www.instagram.com/janjusino/">Instagram</a>
        </div>    
</body>
</html>

You may also like

Flower
2022
3D #7
2020
Figure Indication
2015
Magic Swift
2020
Stagger
2024
Digital Illustration
2020
Dubi Dubi
2019
Engravings
2019
Personality Logo
2019
Magazine Cover
2020
↑Back to Top