Hey guys, i’m new in html/css coding and now i want to make a small “portfolio” website tryout. I only want a web with 3 squares on the middle of the website, a h1 header with “leo Design” and nice popups when clicking the boxes.
I copied the boxes scripts from http://css-tricks.com/fold-out-popups/
I want each box to have the popup on the bottom of the box
So far i have this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Leo Design</title>
<style>
body {
font-family:"Courier New", Courier, monospace;
background-color:#333;
color:white;
}
p{
font-weight:300;
font-weight: bolder;
font-size:20px;
}
#tablaprincipal {
position: absolute;
left: 50%;
top: 50%;
z-index: 100;
margin-top: -200px;
margin-left: -270px;
}
<!-- Comienza el estilo PopUp -->
label {
position: relative;
}
.box {
position:absolute;
left: 0 ;
top: 100%;
z-index: 500;
/* previene errores en safari 5.1 */
-webkit-backface-visibility: hidden;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background-image: -webkit-linear-gradient(top, #eeeeee, #999999);
background-image: -moz-linear-gradient(top, #eeeeee, #999999);
background-image: -ms-linear-gradient(top, #eeeeee, #999999);
background-image: -o-linear-gradient(top, #eeeeee, #999999);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 260px;
padding: 20px;
margin: 24px 0;
opacity: 0;
-webkit-transform: scale(0) skew(50deg);
-moz-transform: scale(0) skew(50deg);
-ms-transform: scale(0) skew(50deg);
-o-transform: scale(0) skew(50deg);
-webkit-transform-origin: 0px -30px;
-moz-transform-origin: 0px -30px;
-ms-transform-origin: 0px -30px;
-o-transform-origin: 0px -30px;
-webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
-moz-transition: -moz-transform ease-out .35s, opacity ease-out .4s;
-ms-transition: -ms-transform ease-out .35s, opacity ease-out .4s;
-o-transition: -o-transform ease-out .35s, opacity ease-out .4s;
}
.box:after {
content: "";
position: absolute;
bottom: 100%;
left: 30px;
border-bottom: 20px solid #eee;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
width: 0;
height: 0;
}
.popUpControl:checked ~ label > .box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
.popUpControl {
display: none;
}
.button {
/*--
background: blue;
color: white;
padding: 5px;
border-radius: 5px;
--*/
}
/* For dog example */
.box img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#doggiezzz:checked ~ label > span:first-child {
display: none;
}
#doggiezzz:checked ~ label:before {
content: "Less Dog!";
}
/* For link example */
.link { color: white; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
.copy { color: black; text-decoration: none; }
<!-- termina el popup -->
</style>
</head>
<body>
<h1 align="center">
Leo Design
</h1>
<table id="tablaprincipal" align="center" border="0px" bordercolor="" height="150px" width="540" cellspacing="6px" cellpadding="6" >
<tr>
<td bgcolor="#FF6666" width="135">
<div id="page-wrap">
<input type="checkbox" id="linkie" class="popUpControl">
<label for="linkie" class="link">
<span class="box">
<span class="title">About me</span>
<span class="copy">bios</span>
</span>
<p align="center">About</p></span>
<!--<input type="checkbox" id="doggiezzz" class="popUpControl">
<label for="doggiezzz" class="button">
<span>
<span class="box">
<img src="http://placedog.com/260/260">
</span>
</label>
-->
</td>
<td bgcolor="#33CC66" width="135"><p align="center">
Portfolio</p>
</td>
<td bgcolor="#3366FF" width="135">
<input type="checkbox" id="linkie" class="popUpControl">
<label for="linkie" class="link">
<span class="box">
<span class="title">About me</span>
<span class="copy">bios</span>
</span>
<p align="center">Contact</p></span>
</td>
</tr>
</table>
<div id="page-wrap">
<!--
<input type="checkbox" id="doggiezzz" class="popUpControl">
<label for="doggiezzz" class="button">
<span></span>
<span class="box">
<img src="http://placedog.com/260/260">
</span>
</label>
-->
<p>
<input type="checkbox" id="linkie" class="popUpControl">
<label for="linkie" class="link">
<span class="box">
<span class="title">About me</span>
<span class="copy">bios</span>
</span>
</label>
</p>
</div>
</body>
</html>
0 comments