Diliev.com & pLOVEdiv.com

 DIliev.com

Home Bio Gallery Childhood  Frames are not supported by your browser.

NB: The lab does not allow audio output. Sorry 

.menu_wrap{ position:fixed; top:0px; left:0px; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); /* for webkit browsers */ background: -moz-linear-gradient(top, #000, #333); /* for firefox 3.6+ */ opacity:0.9; z-index:1; width:100%; height:40px; }.menu { margin:0; padding:0; position:fixed; top:2px; left:290px; }.menu ul { margin:0; padding:0; line-height:30px; }

.menu li { margin:0; padding:0; list-style:none; float:left; position:relative; background:#999; }.menu ul li a { text-align:center; font-family:"Times New Roman", Times, serif; text-decoration:none; height:30px; width:150px; display:block; color:#FFF; border:1px; border:solid #000; text-shadow: 1px 1px 1px #000; }.menu li:hover { background:#09F; }.menu a:hover { color:#000; }

.footer { position:fixed; bottom:-4px; left:500px; height:40px; width:400px; border-top-left-radius:10px; border-top-right-radius:10px; opacity:0.5; background-color:#999; text-align:center; border:2px; border:solid #FFF; z-index:1002; }

 pLOVEdiv.com

<!-- var answer = confirm ("Are you 18+ years old?") if (answer) alert ("Welcome") else alert ("We strongly suggest you browse the website with an adult") // --> Took Extreme planning and advanced OOP to complete this task.

#container { margin: 0px auto; border: 5px solid; width:873px; height:800px; border-radius:25px; background-color:#000; outline: none; box-shadow: px #9ecaed; }

#m01 {left:160px;} #m02 {left:305px;} #m03 {left:450px;} #m04 {left:590px;} #m05 {left:730px;} #menu a{ font-family: verdana, arial, sans-serif; font-size: 12px; font-weight:bolder; color:#FFFFFF; text-decoration:none; text-transform: uppercase; } #menu a:hover {color: #01a9c0;}

It is a fairly simple website for a new club in Plovdiv called pLOVEdiv. The layout of all pages is kept in tone by using a header that is used throughout the whole website. For navigation I created a menu on top of all pages and got it going with CSS hover, so as to show when the cursor is on top. To complete it took a lot of CSS coding. And the footer gives information about copyright and owner of the website. The website has all basic pages such as index, gallery, contacts etc. Banner/header on top appears on every page. Home/default page has some introductory text and images. It also contains some links to other pages in the content div. Contact page gives an address and contact numbers. Gallery page contains a 3 cells per row table, which is filled with images of the club resized to match the size of the cells. Parties webpage contains information about upcoming parties in our club + also information about the date and number of guests. Interesting feature is the div containers and wrappers with black background and glowing round edged borders. Creator webpage has a photo and title of the creator of the website. I have used javascript to ask for age verification as popup when you enter. The website is created for computers with any size screens, but has been tested only on a 1366x768 screen.