Commit 1ab140f1 authored by Ryan Wade's avatar Ryan Wade

Website Skeleton with php, css, and default images.

parent 5027cbcc
/*Body*/
#body
{
min-height: 500px;
}
#bodyBox
{
padding: 20px 20px;
}
.bodyText
{
text-align: justify;
color:white;
font:20px Georgia,serif;
/*padding:0px;*/
}
.bodyText2
{
color:white;
font:15px Georgia,serif;
/*padding:0px;*/
}
.paragraph
{
text-align:justify;
text-indent: 50px;
}
.Title
{
margin:0px 0px 30px 0px;
padding:0px;
text-align:center;
color:white;
font:40px Georgia,serif;
}
.bodyPhoto
{
border-radius:30px 30px 0px 0px;
-webkit-border-radius:30px 30px 0px 0px;
border:3px solid black; /*rgba(70, 59, 55, 1)*/
}
.bodyPhoto2
{
border:3px solid black; /*rgba(70, 59, 55, 1)*/
}
\ No newline at end of file
<div id="body">
<div id="bodyBox" class="bodyText">
This is text. It is the wonderful text that makes up the body. The body, that is, the content of a page. All of its eloquence laid out to bear. Dirty laundry drifting in the wind. Exposed to all the snooping robots and spambots scouring the web for tasty prey.
</div>
</div>
\ No newline at end of file
#breadcrumb
{
}
#breadcrumbBox
{
position: relative;
padding: 7px 15px;
width: 100%;
}
#breadcrumbText
{
text-align: left;
margin: 0px;
padding: 5px;
color:white;
font:15px Georgia,serif;
}
.breadcrumbLink
{
color:gold;
font:15px Georgia,serif;
font-style: italic;
}
\ No newline at end of file
<?php
$id = $_GLOBAL["pageId"];
$title = $_GLOBAL["pageTitle"];
$link = "<a class='breadcrumbLink' href='viewpage.php?id=".$id."'>".$title."</a>";
$id = 3;//SQL get parent id
while($id != 0)
{
$title = "Parent Page Title";//SQL get Title
$link = "<a class='breadcrumbLink' href='viewpage.php?id=".$id."'>".$title."</a>"." > ".$link;
$id = 0;//SQL get parent id
}
?>
<div id="breadcrumb">
<div id="breadcrumbBox">
<div id="breadcrumbText">
<?php echo $link;?>
</div>
</div>
</div>
\ No newline at end of file
footer
{
background:rgba(86, 170, 204, 0.75);
border:1px solid black;
border-radius: 5px;
-webkit-border-radius: 5px;
height: 200px;
}
.footerLink
{
text-align: center;
color:gold;
font:15px Georgia,serif;
/*padding:0px;*/
}
\ No newline at end of file
<footer id="footer">
<div class="footerText">
<a class="footerLink" href="viewpage.php?id=-1">Site Map</a>
</div>
</footer>
\ No newline at end of file
/*Notes
Optimized for the most recent version of Chrome and IE-11 - Check for compatibility with other Browsers(Opera -o; IE9 -ms; Firefox -moz;)*/
/*Main Page*/
body
{
background:rgba(37, 31, 31, 1);
min-height:500px
}
body.embeded
{
background:rgba(54, 44, 43, 1);
}
body.table
{
background:rgba(70, 59, 55, 1);
}
body.padding
{
padding: 0px 15px 0px 5px;
}
#webpage
{
box-shadow: -10px 10px 50px #0F0F0F;
/*border:1px solid black;*/
width:1050px;
background:rgba(54, 44, 43, 1);
border-radius: 5px;
-webkit-border-radius: 5px; /*Chrome & Safari*/
//animation: AnimIframe 3s 1;
//-webkit-animation: AnimIframe 3s 1;
}
/*Default Page Styling*/
a
{
text-decoration:none;
color:black;
}
div
{
display:block;
margin:0px;
padding:0px;
}
.center
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.break
{
height:1px;
width:100%;
margin:0px;
padding:0px;
float:none;
}
li
{
display:inline;
}
/*HomePage*/
#mainIframe.iframeInit
{
opacity:0;
}
#innerIframe.iframeInit,#ProjectContent.iframeInit
{
opacity:1;
}
#mainIframe.iframeInitLoaded
{
animation:AnimIframe 4s normal;
-webkit-animation:AnimIframe 4s normal;
opacity:1;
}
#innerIframe.iframeInitLoaded, #ProjectContent.iframeInitLoaded
{
opacity: 1;
}
.iframeEmpty
{
animation:AnimIframeR 0.5s;
-webkit-animation:AnimIframe 0.5s reverse;
opacity:0;
}
.iframeLoaded
{
animation:AnimIframe .5s normal;
-webkit-animation:AnimIframe .5s normal;
opacity:1;
}
@keyframes AnimIframe
{
0% {opacity:0.0;}
100% {opacity:1.0;}
}
@keyframes AnimIframeR
{
0% {opacity:1.0;}
100% {opacity:0.0;}
}
@-webkit-keyframes AnimIframe/* Safari and Chrome */
{
0% {opacity:0;}
100% {opacity:1;}
}
\ No newline at end of file
/*Header*/
/*Dividers*/
#header
{
padding-top: 20px;
padding-left: 20px;
height:100px;
/*box-shadow: -2px 2px 20px #0F0F0F;*/
}
#headerLogo
{
width:250px;
float:left;
vertical-align: bottom;
}
#headerTitle
{
padding-left:50px;
font: 80px Georgia, serif;
color: black;
position:relative;
float:left;
}
/*Images*/
img.headerImg
{
height:250px;
width:100%;
float:left;
position:relative;
z-index:1;
border-radius: 0px 25px 25px 0px;
-webkit-border-radius: 0px 25px 25px 0px;
}
img#photo1
{
opacity:0;
animation: fadeinphoto 15s infinite;
-webkit-animation: fadeinphoto 15s infinite;
top:0px;
}
img#photo2
{
opacity:0;
animation: fadeinphoto 15s 7.5s infinite;
-webkit-animation: fadeinphoto 15s 7.5s infinite;
top: -250px;
}
/*Animation*/
@keyframes fadeinphoto
{
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:0;}
100%{opacity:0;}
}
@-webkit-keyframes fadeinphoto
{
0% {opacity:0;}
25% {opacity:1;}
50% {opacity:1;}
75% {opacity:0;}
100%{opacity:0;}
}
@keyframes AnimHeader
{
0% { opacity:0;}
14% {opacity:0;}
15% {transform:perspective(700px) rotateX(90deg); opacity:1;}
40% {transform:perspective(700px) rotateX(-35deg);}
70% {transform:perspective(700px) rotateX(15deg);}
100% {transform:perspective(700px) rotateX(0deg);}
}
@-webkit-keyframes AnimHeader
{
0% {opacity:0;}
14% {opacity:0;}
15% {-webkit-transform:perspective(700px) rotateX(90deg); opacity:1;}
40% {-webkit-transform:perspective(700px) rotateX(-35deg);}
70% {-webkit-transform:perspective(700px) rotateX(15deg);}
100% {-webkit-transform:perspective(700px) rotateX(0deg);}
/*0% {-webkit-transform:perspective(700px) rotateX(90deg);}
100% {-webkit-transform:perspective(700px) rotateX(0deg);}*/
}
/*Text*/
p.name
{
margin-top:10px;
margin-left:40px;
font:100px Georgia,serif;
color:white;
text-align:left;
}
\ No newline at end of file
<?php
//TODO
//Get Title, and image location from SQL Database
$Title = "Website Title";
$Logo = "./logo.png";
?>
<div id="header" class="center">
<img id="headerLogo" src="<?php echo $Logo;?>">
<div id="headerTitle"><?php echo $Title;?></div>
</div>
\ No newline at end of file
#homepage
{
min-height: 500px;
}
#homepageBox
{
padding: 20px 20px;
}
\ No newline at end of file
<div id="homepage">
<div id="homepageBox" class="bodyText">
This is the homepage :)
</div>
</div>
\ No newline at end of file
logo.png

5.61 KB

/*NavBar*/
nav
{
background:rgba(86, 170, 204, 0.75);
border:1px solid black;
border-radius: 5px;
-webkit-border-radius: 5px;
}
#NavBar
{
width:1050px;
margin:10px 0px;
height:40px;
}
#NavBar ul
{
text-align:right;
margin:0px;
padding:0px 50px;
}
#NavBar ul li
{
font:30px Georgia,serif;
}
.NavLink
{
margin:0px -6px 0px 0px;
padding:0px 10px 6px 10px;
border-left:2px solid black;
border-right:2px solid black;
background:rgba(86, 170, 204, 0);
}
.NavLink:hover
{
margin:0px -6px 0px 0px;
padding:0px 8px 6px 8px;
border-left:4px solid black;
border-right:4px solid black;
background:rgba(86, 170, 204, 1);
animation: AnimLink .1s 1;
-webkit-animation: AnimLink .1s 1;
}
.NavSelected
{
margin:0px -6px 0px 0px;
padding:0px 8px 6px 8px;
border-left:4px solid black;
border-right:4px solid black;
background:rgba(86, 170, 204, 1);
animation: AnimLink .1s 1;
-webkit-animation: AnimLink .1s 1;
}
@keyframes AnimLink
{
0%
{
background:rgba(86, 170, 204, 0);
border-left:2px solid black;
border-right:2px solid black;
padding:0px 10px 6px 10px;
}
100%
{
background:rgba(86, 170, 204, 1);
border-left:4px solid black;
border-right:4px solid black;
padding:0px 8px 6px 8px;
}
}
@-webkit-keyframes AnimLink /* Safari and Chrome */
{
0%
{
background:rgba(86, 170, 204, 0);
border-left:2px solid black;
border-right:2px solid black;
padding:0px 10px 6px 10px;
}
100%
{
background:rgba(86, 170, 204, 1);
border-left:4px solid black;
border-right:4px solid black;
padding:0px 8px 6px 8px;
}
}
/*Sidebar*/
#SideBar
{
display:inline-block;
width:50px;
margin:0px 10px 0px 0px;
padding:0px 0px 0px 0px;
vertical-align:top;
min-height:400px;
}
.verticalText
{
white-space:nowrap;
transform-origin:Right Center;
-webkit-transform-origin:Right Center;/*Chrome & Safari*/
-ms-transform-origin:Right Center; /*IE9*/
font:30px Georgia,serif;
}
.vNavLink
{
padding:2px 0px 2px 0px;
border-top:2px solid black;
border-bottom:2px solid black;
background:rgba(86, 170, 204, 0);
}
.vNavLink:hover
{
padding:0px;
border-top:4px solid black;
border-bottom:4px solid black;
background:rgba(86, 170, 204, 1);
animation: vAnimLink .1s 1;
-webkit-animation: vAnimLink .1s 1;
}
.vNavSelected
{
padding:0px;
border-top:4px solid black;
border-bottom:4px solid black;
background:rgba(86, 170, 204, 1);
animation: vAnimLink .1s 1;
-webkit-animation: vAnimLink .1s 1;
}
\ No newline at end of file
<nav id="navBar">
<?php
if(isset($_GLOBAL["pageId"]))
$postId=$_GLOBAL["pageId"];
else
$postId=0;
$pages = [[1,"Page1"],[2,"Page2"],[3,"Page3"],[4,"Page4"]];
$navbar = " <ul>\r\n";
foreach($pages as $page)
{
$id=$page[0];
if($id==$postId)
$linkType="NavSelected";
else
$linkType="NavLink";
$title=$page[1];
$navbar .= " <li id='NavId".$id."' class='".$linkType."'><a href='viewpage.php?id=".$id."'>".$title."</a></li>\r\n";
}
$navbar .= " </ul>\r\n";
echo $navbar;
?>
<!--
<ul>
<li id="NavId1" class="NavLink"><a href="viewpage.php?id=1">Home</a></li>
<li id="NavId2" class="NavLink"><a href="viewpage.php?id=2">About</a></li>
<li id="NavId3" class="NavLink"><a href="viewpage.php?id=3">Music</a></li>
<li id="NavId4" class="NavLink"><a href="viewpage.php?id=4">Technology</a></li>
</ul>
-->
</nav>
\ No newline at end of file
#sitemap
{
min-height: 500px;
}
#sitemapBox
{
padding: 20px 20px;
width: 100%;
}
.sitemapText
{
text-align: center;
margin: 0px;
padding: 5px;
color:white;
font:15px Georgia,serif;
}
.sitemapLink
{
color:gold;
font:15px Georgia,serif;
font-style: italic;
}
\ No newline at end of file
<div id="sitemap">
<div id="sitemapBox" class="sitemapText">
This is where the sitemap would be defined
</div>
</div>
\ No newline at end of file
#Title
{
///* transform origin center top & perspective 200px*/
// transform-origin:center top;
// -webkit-transform-origin:center top; /*Safari and Chrome*/
// -ms-transform-origin:center top; /*IE9*/
//background:rgba(70, 59, 55, 1);
///*radial border 25px*/
// border-radius: 25px; /*Everyone Else*/
// -webkit-border-radius: 25px; /*Safari and Chrome*/
//animation:AnimHeader 3s 0s 1;
//-webkit-animation:AnimHeader 3s 0s 1;
}
#TitleImg
{
background-size: 100% 100%;
height: 250px;
}
#TitleBox
{
position: relative;
top: 40px;
padding: 10px 30px;
width: 400px;
background-color: gray;
background: -webkit-linear-gradient(left , rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient( right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient( right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Standard*/
/*radial border 25px*/
}
#TitleOnly
{
position: relative;
padding: 10px 30px;
width: 400px;
background-color: gray;
background: -webkit-linear-gradient(left , rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient( right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient( right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(10,10,10,0.75), rgba(255,0,0,0)); /*Standard*/
/*radial border 25px*/
}
#TitleText
{
text-align: left;
margin: 0px;
padding: 5px;
color:white;
font:30px Georgia,serif;
}
#TitleDesc
{
text-align: left;
margin: 0px;
padding: 5px;
color:white;
font:15px Georgia,serif;
}
\ No newline at end of file
title.jpg

125 KB

<?php
if(isset($_POST["id"])||true)
{
//TODO
//Get Title, Desc, and image location from SQL Database
$Title = $_GLOBAL["pageTitle"];
if(isset($_GLOBAL["pageDesc"]))
{
$Desc = $_GLOBAL["pageDesc"];
$Img = $_GLOBAL["pageImg"];
?>
<div id="Title">
<div id="TitleImg" <?php echo "style=\"background-image: url('".$Img."');\"";?>>
<div id="TitleBox">
<p id="TitleText"><?php echo $Title;?></p>
<p id="TitleDesc"><?php echo $Desc;?></p>
</div>
</div>
</div>
<?php
}
else
{
?>
<div id="Title">
<div id="TitleOnly">
<p id="TitleText"><?php echo $Title;?></p>
</div>
</div>
<?php
}
}
?>
\ No newline at end of file
<?php
if(isset($_GET["id"]))
$_GLOBAL["pageId"] = $_GET["id"];
else
$_GLOBAL["pageId"] = 0;
switch ($_GLOBAL["pageId"])
{
case -1:
$_GLOBAL["pageTitle"] = "Sitemap";
break;
case 0:
$_GLOBAL["pageTitle"] = "Home";
break;