my code stock.com

Snippet options

Download: Download snippet as template01.html.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
body {font-family:Andalus;font-size:13px;color: #333333; 
!important;background-color:#d3d3d3;
!important;background-position:center;
!important;background-repeat:repeat;
!important;}.logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text, .nc_profile, #left_container, #profilephoto, #flash_close_butt, #start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .bottombar, .byline, .top-links{visibility: hidden  
!important; display:none; 
!important;margin:2%;
!important;padding-left:20%;
!important;padding-right:20%;
!important;float:center;
!important;max-width;800px;
overflow:scroll;
}




* {
box-sizing: border-box;
}


ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: "chunkfive";
}

li {
float: left;
}

li:last-child {
border-right: none;
border-left: none;
border-top: none;
border-bottom: none;
}

li a {
display: block;
color: black;
text-decoration: none;
}

li a.active {
background-color: #black;
color: white;
}

li a:hover:not(.active) {
position: relative;
}

button {
font-family:"georgia";
background-color: #333;
color: white;
border:none;
padding: 15px;
text-align: center;
border-right:1px solid #bbb;
border-left:1px solid #000;
text-decoration: none;
display: block;
font-size: 16px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}

button:hover {
background-color: #666;
color: white;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0px;
  transition: 0.5s;
}

.button:hover span {
  padding-left: 0px;
}

.button:hover span:after {
  opacity: 1;
  left: -20px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0%   {background-color: #333;}
50% {background-color:#666;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color: #333;}
50% {background-color:#666;}
}

li a.active {
color: white;
position: relative;
background-color: #333;
}

h1 {
font-family: "chunkfive";
text-decoration: strong;
text-align: center;
}

h2 {
font-family: "chunkfive";
font-style:italic;
text-align: center;
}

p {
font-family: "arial";
font-size:12px;
}


.footer {
text-align: center;
background-color:white;
border-radius:0px 0px 25px 25px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
}

.main {
background-color: #ffffff;
height: 70%;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:1px solid #000;
border-radius: 0px 0px 0px 0px;
}

.fixed {
position: fixed;
bottom: 0;
right: 0;
width:100%;
background-color:white;
text-align:left;
}

.menu {
background-color: #333;
border-radius: 0px 25px 0px 0px;
margin-bottom:20px;
margin-right:0px;
border:1px solid #000;
}

.img img {
    width: 100%;
    height: auto;
	border-radius: 25px 25px 25px 25px;
	border:1px solid #000;
	margin-bottom:20px;
}

}
.row:after {
    content: "";
    clear: both;
    display: block;
}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
		float: left;
    }

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


</style>


<body>

<div class="row">
<div class="col-10 img";>
<img src="INSERT PICTURE HERE";/>
</div>


<div class="col-2 menu" >

<ul>
<li><button onclick="document.getElementById('start').innerHTML=document.getElementById('a').innerHTML;" class="button"><span>Page1</span></button></li>
<li><button onclick="document.getElementById('start').innerHTML=document.getElementById('b').innerHTML;" class="button"><span>Page2</span></button></li>
<li><button onclick="document.getElementById('start').innerHTML=document.getElementById('c').innerHTML;" class="button"><span>Page3</span></button></li>
<li><button onclick="document.getElementById('start').innerHTML=document.getElementById('d').innerHTML;" class="button"><span>Page4</span></button></li>
<li><button onclick="document.getElementById('start').innerHTML=document.getElementById('e').innerHTML;" class="button"><span>Page5</span></button></li>
</ul>


</div>



<div class="col-10 main";>

<div id="start" style="padding:20px;" href="#Start"><br>
<h1>Start</h1><br><br>
<p>
TextStart
</p>
</div>

<div id="a" style="display:none;padding:20px;"><br>
<h1>Page1</h1><br><br>
<p>
Text1
</p>

</div>

<div id="b" style="display:none;padding:5px;text-align:justify;">
<div id="content" style="background-image:url();height:90%;width:100%;align:left; overflow:scroll;text-align:left;"><br>
<h1>Page2</h1><br><br>

<p>
Text2
</p>

</div>
</div>

<div id="c" style="display:none;padding:20px;"><br>
<h1>Page3</h1><br><br>
<p>
Text3
</p>

</div>

<div id="d" style="display:none;padding:20px;"><br>
<h1>Page4</h1><br><br>
<p>
Text4
</p>

</div>

<div id="e" style="display:none;padding:20px;">
<div id="content" style="background-image:url();height:90%;width:100%;align:left; overflow:scroll;text-align:center;"><br>
<h1>Page5</h1>
<p>
Text5
</p>

</div>
</div>
</div>

<div class="col-10 footer">
© Copyright 2016 - Made by <a href="http://rai.chatango.com/fpix">Rai</a>
</div>
</div>
</body>
</html>
</script>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.