<div class="page-wrap">
<header class="header">
<div class="header-left logo"><img src="sega.png" width="450" height="125" alt="Allen Trey Productions"></div>
<nav class="navbaritems"><a href="#">Home</a> <a href="inspiration.html">Inspiration</a> <a href="blog.html">Blog</a> <a href="contact.html">Contact</a> </nav>
<div class="breadcrumbs"><b>Home</b></div>
</header>
<main class="content">
<div class="content-wrap clearfix">
<div class="transbox"><img class="biopic" src="sudionew.png" width="500" height="306" alt="biopic">
<h1 class="biotext"> Names Allen Trey 23 year old Producer, rapper, singer, and songwriter from Jersey. Check out what <strong><em>The Wave</em></strong> brings to the shore </h1>
</div>
<div class="iframe-wrap">
<iframe class="iframe" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/191950793&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"> </iframe>
</div>
</div>
</main>
<footer class="footer">
<hr class="hr">
<!-- hitwebcounter Code START
<div class="sitecounter"> <a href="http://www.hitwebcounter.com" target="_blank"> <img src="http://hitwebcounter.com/counter/counter.php?page=6521120&style=0038&nbdigits=5&type=ip&initCount=0" title="Must See Places In Paris" Alt="Must See Places In Paris"> </a> </div>-->
<p class="footer-txt">Allen Trey Productions © 2016</p>
</footer>
</div>
img,
a img {
border: none
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.hr {
height: 3px;
background: black;
clear: both;
color: #000;
border: none;
margin: 20px 0;
}
html,
body,
.page-wrap {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url('cyber.jpg') no-repeat fixed 50% 50%;
background-size: cover;
padding: 0 50px;
font-family: Helvetica, arial, sans-serif;
}
.page-wrap {
display: table;
width: 100%;
max-width: 1480px;
margin: 0 auto;
}
.header,
.footer,
main {
display: table-row
}
/* height 1px on the header and footer is the sticky footer technique */
.header,
.footer {
height: 1px
}
.footer {
font-size: 18px;
text-align: center;
}
.logo {
float: left;
}
.logo img {
max-width: 100%;
height: auto;
}
.breadcrumbs {
border-bottom: 2px solid #000;
font-size: 30px;
font-weight: bold;
position: relative;
z-index: 2;
margin: 0;
clear: both;
}
/* navigation*/
.navbaritems {
float: right;
margin: 70px 0 10px
}
.navbaritems > a {
display: inline-block;
font-size: 13px;
line-height: 40px;
padding: 0 2em;
transition: all .3s ease;
background-color: grey;
background: rgba(0, 0, 0, .6);
color: white;
margin: 0;
}
.navbaritems > a:hover {
background: white;
color: black;
}
/* end navigation */
/* main content */
.content-wrap {
padding: 40px 0;
display: flex;
}
.content-wrap > div {
flex: 1 0 0;
}
.iframe-wrap {
float: right;
width: 52%;
padding: 39% 0 0;
margin: 0 0 20px 2%;
position: relative;
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.iframe-wrap .iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 5px;
border: none;
background: #fff;
}
.transbox {
float: left;
width: 39%;
padding: 20px;
margin: 0 2% 20px 0;
background-color: #181B1B;
border: 1px solid black;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.transbox p {
font-size: 30px;
color: #fff;
margin: 10px 5px;
}
.transbox img {
margin: 0 0 10px;
width: 100%;
height: auto;
display: block;
}
h1.biotext {
font-family: florence, cursive;
text-align: left;
font-size: 30px;
color: white;
font-weight: normal;
margin: 0;
padding: 5px 0 0;
}
@media screen and (max-width:1280px) {
h1.biotext {
font-size: 26px;
}
}
@media screen and (max-width:950px) {
.header {
text-align: center
}
.logo {
float: none;
display: inline-block;
width: 100%;
max-width: 450px;
}
.logo img {
width: 100%;
height: auto
}
.navbaritems {
float: none;
display: inline-block;
margin: 10px 0
}
.breadcrumbs {
text-align: left
}
.content-wrap,
.transbox,
.iframe-wrap {
display: block;
width: auto;
float: none;
}
.content-wrap > .transbox,
.content-wrap > .iframe-wrap {
margin: 0 0 40px
}
.iframe-wrap {
padding-top: 60%;
min-height: 250px
}
}
@media screen and (max-width:690px) {
body {
padding: 0 10px
}
.navbaritems a {
margin: 0 0 10px
}
.breadcrumbs {
text-align: center
}
}
@media screen and (max-width:420px) {
.navbaritems a,
.navbaritems {
display: block;
width: auto;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.