ZC0M
7/26/2018 - 10:03 AM
Project 01 - Page Framework Template
Project 01 - Page Framework Template
<header class="header">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"><img id="img0a01_logo" class="img_logo" src="https://www.mediafire.com/convkey/be6d/oalkyaj6j7p9hfdzg.jpg" width="16px"> ZC0MD3V</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-home"> Home</i> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-newspaper"> Blog</i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-project-diagram">Projects</i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"><i class="fas fa-globe"> Web-Development</i></a>
<a class="dropdown-item" href="#"><i class="fas fa-paint-brush"> Graphic Design</i></a>
<a class="dropdown-item" href="#"><i class="fas fa-gamepad"> Game Modding</i></a>
<a class="dropdown-item" href="#"><i class="fas fa-microchip"> Hardware</i></a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<main role="main" class="container-fluid">
<div class="py-5 text-left section-fade-in">
<div class="container-fluid">
<div class="row" id="row01_top">
<div class="col-12" id="col01_title">
<img id="img0a01_logo" class="img_logo" src="https://www.mediafire.com/convkey/be6d/oalkyaj6j7p9hfdzg.jpg" width="52px" height="52px">
<h1 class="display-3 text-capitalize d-lg-flex" id="h01_title">
<b>ZC0M</b> DEVELOPMENT<b>STUDIOS</b><br>
<small class="d-sm-flex" id="small01_subtitle">Projects|Examples|Tests</small>
</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center">
<h1>Section Heading 1</h1>
</div>
<!-- SECTION 02: MID - TABS/CONTENT START
<div class="py-5 text-center section-fade-in">
<h1>Projects</h1>
<div class="container-fluid">
<div class="row" id="row02_mid">
<div class="col-lg-12" id="col02_tabs">
<ul class="nav nav-pills bg-dark">
<li class="nav-item">
<a href="" class="active nav-link" data-toggle="pill" data-target="#tab1">Web-Development</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="pill" data-target="#tab2">Graphic Design</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" data-toggle="pill" data-target="#tab3">Game Modding</a>
</li>
<li class="nav-item">
<a href="" class="nav-link" data-toggle="pill" data-target="#tab4">Hardware</a>
</li>
</ul>
<div class="tab-content mt-2">
<div class="tab-pane fade show active" id="tab1" role="tabpanel">
<div class="row pi-draggable" draggable="true">
<div class="col-md-3">
<div class="card w-auto" id="card01_proj02">
<div class="card-header">
Project 02
</div>
<img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/146871.JymbbV.small.dc2595e4-5220-4da5-bdbd-c5f7f36a5704.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Background-FX Div</h5>
<p class="card-text">Experiment with a single-div method of creating full-screen background effects using images, filters, etc.</p>
<a href="https://codepen.io/zcom/pen/JymbbV" class="btn btn-dark"> <img src="https://codepen.io/favicon.ico" width="15px"> Codepen</a>
<a href="#" class="btn btn-primary"><img src="https://github.com/favicon.ico" width="15px"> GitHub</a>
<a href="#" class="btn btn-secondary"><img src="https://webmakerapp.com/icon-128.png" width="15px">Web Maker</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card w-auto" id="card02_proj03">
<div class="card-header">
Project 03
</div>
<img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/146871.XMOBRq.small.335afda9-dcfc-4111-8951-d1fd0367758d.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">1337-Speak Translator</h5>
<p class="card-text">Simple CSS/JavaScript page that accepts text-input and outputs the corresponding 1337-Speak 'translation'.</p>
<a href="https://codepen.io/zcom/pen/XMOBRq" class="btn btn-dark">Codepen</a>
<a href="#" class="btn btn-primary">Gist</a>
<a href="#" class="btn btn-warning">Web Maker</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card w-auto" id="card03_prj04">
<div class="card-header">
Project 04
</div>
<img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/146871.MVWBpb.small.53715292-176b-4b86-9d3a-3b2067b0cd30.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Retro-Style Webpage Theme</h5>
<p class="card-text">Quick attempt at creating a simple webpage style/theme that resembels the old-school retro videogames and computer menus/UIs.</p>
<a href="https://codepen.io/zcom/pen/MVWBpb" class="btn btn-dark">Codepen</a>
<a href="#" class="btn btn-primary">Gist</a>
<a href="#" class="btn btn-warning">Web Maker</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card w-auto" id="card04_prj05">
<div class="card-header">
Project 05
</div>
<img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/146871.JrMPjg.small.a3faf214-bd16-4423-a536-41b63b5ab0cf.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Resident Evil 7: Interactive Game Guide</h5>
<p class="card-text">Introductory page to an interactive game guide for the PC game 'Resident Evil 7: Biohazard' released in summer 2017.</p>
<a href="https://codepen.io/zcom/pen/JrMPjg" class="btn btn-dark">Codepen</a>
<a href="#" class="btn btn-primary">Gist</a>
<a href="#" class="btn btn-warning">Web Maker</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel">
<p class="">Tab pane two. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel">
<p class="">Tab pane three. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="tab-pane fade" id="tab4" role="tabpanel">
<p class="">Tab pane four. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
-->
</main>
<footer class="footer bg-dark">
<div class="container-fluid">
<span class="text-muted">© 2018 ZCOM Development Studios & Adrian 'ZCOM' Leuzzi. All Rights Reserved</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
$col_1: rgba(0,200,255,1);
$pad_side: 3vw;
html {
position: relative;
min-height: 100%;
}
body{
background: linear-gradient(2deg, #244e66, #1b72a5, #1599ca, #4fa6d7, #244e66);
background-size: 1000% 1000%;
/* Margin bottom by footer height */
margin-bottom: 60px;
-webkit-animation: anim00_bgfade 60s ease-in-out infinite;
-moz-animation: anim00_bgfade 60s ease-in-out infinite;
animation: anim00_bgfade 60s ease-in-out infinite;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
h1,h2,h3,h4,h5,h6{
text-transform: uppercase;
letter-spacing: 0.33vw;
text-shadow: 2px 2px 2px rgba(0,0,0,0.66);
border-bottom: rgba(200,225,255,0.66) 1px solid;
border-left: rgba(200,225,255,0.66) 15px solid;
background: linear-gradient(to right, rgba(100,200,255,0.33) 0%, rgba(0,150,200,0.15) 50%, rgba(0,0,0,0) 100%);
box-shadow: 3px 6px 16px 0 rgba(0,0,0,0.33);
line-height: 12vh;
}
.img_logo{
position: relative;
display: block;
background-color: rgba(255,255,255,0.66);
padding: 3px;
border-radius: 3px;
float: left;
margin-right: 6px;
}
#row01_top{
}
#col01_title{
}
#h01_title{
letter-spacing: 0.3vw;
font-size: 3vw;
margin-bottom: -6vh; margin-top: -3vh;
padding-left:$pad_side; padding-right:$pad_side; padding-top:2vh; padding-bottom:2vh;
background: linear-gradient(to right, rgba(255,255,255,0.33) 0%, rgba(150,175,200,0.15) 50%, rgba(255,255,255,0) 100%);
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}
#small01_subtitle{
font-size: 2vw;
position: absolute;
display: block;
right: 3vw; top: -1vh;
}
#row02_mid{
min-height: 512px;
padding-left: $pad_side; padding-right: $pad_side;
}
#col02_tabs{
padding: 0;
box-shadow: inset 0 0 32px 2px black;
background: linear-gradient(to right, rgba(255,255,255,0.33) 0%, rgba(150,175,200,0.15) 50%, rgba(255,255,255,0) 100%);
}
#col02_tabs ul li a{
font-size: 2.15em;
}
.card{
background-color: rgba(33,55,75,0.80);
border-radius: 16px;
color: #FFF;
.card-header{
background: linear-gradient(to right, rgba(255,255,255,0.33) 0%, rgba(150,175,200,0.15) 100%);
border-top-left-radius: 16px; border-top-right-radius: 16px;
font-size: 1.66em;
font-weight: 600;
}
.card-img-top{
filter: grayscale(0.66) blur(1px);
transition: all 0.3s ease-in-out;
&:hover{
filter: grayscale(0.05);
}
}
}
@-webkit-keyframes anim00_bgfade {
0%{background-position:52% 0%}
50%{background-position:49% 80%}
100%{background-position:52% 0%}
}
@-moz-keyframes anim00_bgfade {
0%{background-position:52% 0%}
50%{background-position:49% 80%}
100%{background-position:52% 0%}
}
@keyframes anim00_bgfade {
0%{background-position:52% 0%}
50%{background-position:49% 80%}
100%{background-position:52% 0%}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />