Post: Custom Homepage [HTML]
04-28-2013, 11:19 PM #1
Clouds
Error 404: Title Not Found
(adsbygoogle = window.adsbygoogle || []).push({}); Here's a homepage as designed and customized by yours truly. I will include the source of the index page here and will attach a zip file of all necessary files/folders.

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/style.css">
</head>
<body>
<div id="centerMenu">
<div id="titleMenu">
<h1><center> Clouds' Home </center></h1>
</div>
<div id="links">

<div class="separator">
<span>Search</span>
</div>

<form action="https://www.google.com/search" method="GET">
<div class="input-prepend input-append">
<input type="text" class="span3 input-large" placeholder="Enter a search..." name="q" maxlength="255">
<input type="submit" class="btn" value="Go">
</div>
<input type="hidden" name="hl" value="en">
</form>

<div class="separator">
<span>Essentials</span>
</div>

<div class="elem">
<span>
<a href="https://www.google.com">
<img src="style/icones/google.png">
Google
</a>
</span>
<a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a>
<a href="https://mail.google.com/mail/u/0/?tab=wm#inbox">GMail</a>
<a href="https://www.google.com/news">News</a>
</div>

<div class="separator">
<span>Interests</span>
</div>

<div class="elem">
<span>
<a href="https://www.4chan.org">
<img src="style/icones/4chan.jpg">
4chan
</a>
</span>
<a href="https://www.4chan.org/b/"> /b/ </a>
<a href="https://www.4chan.org/v/"> /v/ </a>
<a href="https://www.4chan.org/wg/"> /wg/ </a>
</div>

<div class="elem">
<span>
<a href="https://www.youtube.com">
<img src="style/icones/youtube.jpg">
YouTube
</a>
</span>
<a href="https://www.youtube.com/feed/playlists"> Playlists </a>
<a href="https://www.youtube.com/feed/subscriptions"> Subscriptions </a>
</div>

<div class="elem">
<span>
<a href="https://www.**********.com/">
<img src="style/icones/ps.png">
**********
</a>
</span>
<a href="https://www.**********.com/forums/home/"> Forums </a>
<a href="https://www.**********.com/forums/hashes/"> Hash DB </a>
<a href="https://www.**********.com/forums/defaces/"> Deface DB </a>
</div>

<div class="separator">
<span>Work</span>
</div>

<div class="elem">
<span>
<a href="https://bb.clemson.edu/">
<img src="style/icones/bb.png">
Blackboard
</a>
</span>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_2_1"> Courses </a>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_11_1"> Resources </a>
</div>

<div class="elem">
<span>
<a href="https://portal.mypearson.com/portal/render.userLayoutRootNode.uP?externalSiteId=mypearson&key=1102821546121852768162012&uP_sparam=activeTab&uP_tparam=portletViewId">
<img src="style/icones/ml.png">
MyLab
</a>
</span>
<a href="https://cp03.coursecompass.com/webapps/portal/frameset.jsp?url=%2Fbin%2Fcommon%2Fcourse.pl%3Fcourse_id%3D_716849_1"> MyMathLab </a>
</div>

<div class="separator">
<span>Awesome faceownloads</span>
</div>

<div class="elem">
<span>
<a href="https://thepiratebay.se/">
<img src="style/icones/tpb.jpg">
The Pirate Bay
</a>
</span>
<a href="https://thepiratebay.se/browse"> Browse Torrents </a>
<a href="https://thepiratebay.se/top"> Top 100 </a>
</div>

<div class="elem">
<span>
<a href="https://mp3boo.com">
<img src="style/icones/mp3.png">
Mp3Boo
</a>
</span>
<a href="https://www.mp3boo.com/mp3-download-releases/2013"> New Releases </a>
<a href="https://www.mp3boo.com/artist"> Browse Artist </a>
</div>

</div>
</div>
</body>
</html>


Here's a preview of the homepage: You must login or register to view this content.

Here's a download link to the files: You must login or register to view this content.
Virus scan: You must login or register to view this content.
(adsbygoogle = window.adsbygoogle || []).push({});

The following 5 users say thank you to Clouds for this useful post:

Absolute Zero, Big Smoke, ResistTheJamsha, John-Martin 1, xePixTvx
04-28-2013, 11:50 PM #2
John-Martin 1
Brutal fighter !!
Originally posted by Clouds View Post
Here's a homepage as designed and customized by yours truly. I will include the source of the index page here and will attach a zip file of all necessary files/folders.



HEY this looks pretty fricken AWESOME!!
Im doing this at uni atm and was wondering if you know how to style seperate pages...?
heres what i have...its just the html file atm...any ideas how id go about doing that...? :s


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html>

<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="https://code.jquery.com/jquery-1.5.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<style type="text/css">.img {padding-left:70px;}</style>

<script src="js/js.js" type="text/javascript"></script>
</head>

<body>

<!--Home Page-->
<div data-role="page" data-theme="a" id="home">
<div data-role="content">
<!--Pic on first page-->
<img src="img/Logo.png" width="300"
height="211" alt="Logo"/>

<!--Page 1 Button-->
<ul data-role="listview" data-inset="true">
<link rel="stylesheet" href="joystiq.css">
<li>

<a href="#one" data-transition="flip">JoyStiq Mobile</a>
</li>
</ul>

<!--Page 2 Button-->
<ul data-role="listview" data-inset="true">
<li>
<a href="#two" data-transition="flip">GameSpot Gaming</a>
</li>
</ul>

<!--Page 3 Button-->
<ul data-role="listview" data-inset="true">
<li>
<a href="#three" data-transition="flip">IGN PC Gaming</a>
</li>
</ul>

<!--Page 4 Button-->
<ul data-role="listview" data-inset="true">
<li>
<a href="#four" data-transition="flip">TIME Tech</a>
</li>
</ul>

</div>
</div>

<!--an alert window...?-->
<div data-role="page" id="alert">
<div data-role="header" data-position="fixed">
<a data-rel="back" data-icon="delete"></a>
<h3><div id="alert-title"></div></h3>
</div>
<div data-role="content">
<div id="alert-content"></div>
</div>
</div>

<!--Page 1-->
<div data-role="page" data-addBackBtn="true" id="one" >
<!--^ ^The way to create a back button is to use data-addBackBtn="true"-->
<div data-role="header">
<h1>Page One Header</h1>
</div>

<div>
<div>

<script language="JavaScript" src="https://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.joystiq.com%2Fmobile%2Frss.xml&chan=y&num=3&date=y&utf=y" charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="https://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.joystiq.com%2Fmobile%2Frss.xml&chan=y&num=3&date=y&utf=y&html=y">View RSS feed</a>
</noscript>

</div>

<!--This creates a button to continue to the next page which is href="#NameOfPageID"-->
<ul data-role="listview" data-inset="true">
<li>
<a href="#two" data-transition="flip">Continue</a>
</li>
</ul>
<!--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-->
</div>
<div data-role="footer" data-position="fixed">
<h4>Page One Footer</h4>
</div>
</div>

<!--Page 2-->
<div data-role="page" data-addBackBtn="true" id="two">

<div data-role="header">
<h2>Welcome to Page 2</h2>
</div>
<div>
<script language="JavaScript" src="https://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.gamespot.com%2Frss%2Fgame_updates.php&chan=y&num=3&date=y&utf=y" charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="https://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.gamespot.com%2Frss%2Fgame_updates.php&chan=y&num=3&date=y&utf=y&html=y">View RSS feed</a>
</noscript>

</div>

<div>
<ul data-role="listview" data-inset="true">
<li>
<a href="#three" data-transition="flip">Continue</a>
</li>
</ul>
</div>

</div>

<!--Page 3-->
<div data-role="page" data-addBackBtn="true" id="three">

<div data-role="header">
<h2>Welcome to Page 3</h2>
</div>
<div>
<script language="JavaScript" src="https://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.ign.com%2Fign%2Fpc-all%3Fformat%3Dxml&chan=y&num=3&date=y&utf=y" charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="https://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.ign.com%2Fign%2Fpc-all%3Fformat%3Dxml&chan=y&num=3&date=y&utf=y&html=y">View RSS feed</a>
</noscript>

</div>

<div>
<ul data-role="listview" data-inset="true">
<li>
<a href="#four" data-transition="flip">Continue</a>
</li>
</ul>
</div>

</div>

<!--Page 4-->
<div data-role="page" data-addBackBtn="true" id="four">

<div data-role="header">
<h2>Welcome to Page 4</h2>
</div>
<div>
<script language="JavaScript" src="https://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Ftimeblogs%2Fnerd_world%3Fformat%3Dxml&chan=y&num=3&date=y&utf=y" charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="https://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Ftimeblogs%2Fnerd_world%3Fformat%3Dxml&chan=y&num=3&date=y&utf=y&html=y">View RSS feed</a>
</noscript>

</div>

<div>
<ul data-role="listview" data-inset="true">
<li>
<a href="#home" data-transition="flip">Home</a>
</li>
</ul>
</div>

</div>

</body>

</html>


P.S sorry about the comments, its to help myself and my other group member understand whats going on xD
05-02-2013, 11:40 PM #3
Absolute Zero
Do your homework, fool.
Originally posted by Clouds View Post
Here's a homepage as designed and customized by yours truly. I will include the source of the index page here and will attach a zip file of all necessary files/folders.

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/style.css">
</head>
<body>
<div id="centerMenu">
<div id="titleMenu">
<h1><center> Clouds' Home </center></h1>
</div>
<div id="links">

<div class="separator">
<span>Search</span>
</div>

<form action="https://www.google.com/search" method="GET">
<div class="input-prepend input-append">
<input type="text" class="span3 input-large" placeholder="Enter a search..." name="q" maxlength="255">
<input type="submit" class="btn" value="Go">
</div>
<input type="hidden" name="hl" value="en">
</form>

<div class="separator">
<span>Essentials</span>
</div>

<div class="elem">
<span>
<a href="https://www.google.com">
<img src="style/icones/google.png">
Google
</a>
</span>
<a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a>
<a href="https://mail.google.com/mail/u/0/?tab=wm#inbox">GMail</a>
<a href="https://www.google.com/news">News</a>
</div>

<div class="separator">
<span>Interests</span>
</div>

<div class="elem">
<span>
<a href="https://www.4chan.org">
<img src="style/icones/4chan.jpg">
4chan
</a>
</span>
<a href="https://www.4chan.org/b/"> /b/ </a>
<a href="https://www.4chan.org/v/"> /v/ </a>
<a href="https://www.4chan.org/wg/"> /wg/ </a>
</div>

<div class="elem">
<span>
<a href="https://www.youtube.com">
<img src="style/icones/youtube.jpg">
YouTube
</a>
</span>
<a href="https://www.youtube.com/feed/playlists"> Playlists </a>
<a href="https://www.youtube.com/feed/subscriptions"> Subscriptions </a>
</div>

<div class="elem">
<span>
<a href="https://www.**********.com/">
<img src="style/icones/ps.png">
**********
</a>
</span>
<a href="https://www.**********.com/forums/home/"> Forums </a>
<a href="https://www.**********.com/forums/hashes/"> Hash DB </a>
<a href="https://www.**********.com/forums/defaces/"> Deface DB </a>
</div>

<div class="separator">
<span>Work</span>
</div>

<div class="elem">
<span>
<a href="https://bb.clemson.edu/">
<img src="style/icones/bb.png">
Blackboard
</a>
</span>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_2_1"> Courses </a>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_11_1"> Resources </a>
</div>

<div class="elem">
<span>
<a href="https://portal.mypearson.com/portal/render.userLayoutRootNode.uP?externalSiteId=mypearson&key=1102821546121852768162012&uP_sparam=activeTab&uP_tparam=portletViewId">
<img src="style/icones/ml.png">
MyLab
</a>
</span>
<a href="https://cp03.coursecompass.com/webapps/portal/frameset.jsp?url=%2Fbin%2Fcommon%2Fcourse.pl%3Fcourse_id%3D_716849_1"> MyMathLab </a>
</div>

<div class="separator">
<span>Awesome faceownloads</span>
</div>

<div class="elem">
<span>
<a href="https://thepiratebay.se/">
<img src="style/icones/tpb.jpg">
The Pirate Bay
</a>
</span>
<a href="https://thepiratebay.se/browse"> Browse Torrents </a>
<a href="https://thepiratebay.se/top"> Top 100 </a>
</div>

<div class="elem">
<span>
<a href="https://mp3boo.com">
<img src="style/icones/mp3.png">
Mp3Boo
</a>
</span>
<a href="https://www.mp3boo.com/mp3-download-releases/2013"> New Releases </a>
<a href="https://www.mp3boo.com/artist"> Browse Artist </a>
</div>

</div>
</div>
</body>
</html>


Here's a preview of the homepage: You must login or register to view this content.

Here's a download link to the files: You must login or register to view this content.
Virus scan: You must login or register to view this content.

Good work!
05-03-2013, 05:51 PM #4
Pretty cool glad we learnt HTML and JavaScript at school. This is awesome really like the effect with the mouse hovering over the links.
05-03-2013, 07:42 PM #5
Awesome work mate!
05-03-2013, 07:45 PM #6
Alt
Banned
That looks smart!
05-03-2013, 08:03 PM #7
Pichu
RIP PICHU.
Originally posted by Clouds View Post
Here's a homepage as designed and customized by yours truly. I will include the source of the index page here and will attach a zip file of all necessary files/folders.

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/style.css">
</head>
<body>
<div id="centerMenu">
<div id="titleMenu">
<h1><center> Clouds' Home </center></h1>
</div>
<div id="links">

<div class="separator">
<span>Search</span>
</div>

<form action="https://www.google.com/search" method="GET">
<div class="input-prepend input-append">
<input type="text" class="span3 input-large" placeholder="Enter a search..." name="q" maxlength="255">
<input type="submit" class="btn" value="Go">
</div>
<input type="hidden" name="hl" value="en">
</form>

<div class="separator">
<span>Essentials</span>
</div>

<div class="elem">
<span>
<a href="https://www.google.com">
<img src="style/icones/google.png">
Google
</a>
</span>
<a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a>
<a href="https://mail.google.com/mail/u/0/?tab=wm#inbox">GMail</a>
<a href="https://www.google.com/news">News</a>
</div>

<div class="separator">
<span>Interests</span>
</div>

<div class="elem">
<span>
<a href="https://www.4chan.org">
<img src="style/icones/4chan.jpg">
4chan
</a>
</span>
<a href="https://www.4chan.org/b/"> /b/ </a>
<a href="https://www.4chan.org/v/"> /v/ </a>
<a href="https://www.4chan.org/wg/"> /wg/ </a>
</div>

<div class="elem">
<span>
<a href="https://www.youtube.com">
<img src="style/icones/youtube.jpg">
YouTube
</a>
</span>
<a href="https://www.youtube.com/feed/playlists"> Playlists </a>
<a href="https://www.youtube.com/feed/subscriptions"> Subscriptions </a>
</div>

<div class="elem">
<span>
<a href="https://www.**********.com/">
<img src="style/icones/ps.png">
**********
</a>
</span>
<a href="https://www.**********.com/forums/home/"> Forums </a>
<a href="https://www.**********.com/forums/hashes/"> Hash DB </a>
<a href="https://www.**********.com/forums/defaces/"> Deface DB </a>
</div>

<div class="separator">
<span>Work</span>
</div>

<div class="elem">
<span>
<a href="https://bb.clemson.edu/">
<img src="style/icones/bb.png">
Blackboard
</a>
</span>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_2_1"> Courses </a>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_11_1"> Resources </a>
</div>

<div class="elem">
<span>
<a href="https://portal.mypearson.com/portal/render.userLayoutRootNode.uP?externalSiteId=mypearson&key=1102821546121852768162012&uP_sparam=activeTab&uP_tparam=portletViewId">
<img src="style/icones/ml.png">
MyLab
</a>
</span>
<a href="https://cp03.coursecompass.com/webapps/portal/frameset.jsp?url=%2Fbin%2Fcommon%2Fcourse.pl%3Fcourse_id%3D_716849_1"> MyMathLab </a>
</div>

<div class="separator">
<span>Awesome faceownloads</span>
</div>

<div class="elem">
<span>
<a href="https://thepiratebay.se/">
<img src="style/icones/tpb.jpg">
The Pirate Bay
</a>
</span>
<a href="https://thepiratebay.se/browse"> Browse Torrents </a>
<a href="https://thepiratebay.se/top"> Top 100 </a>
</div>

<div class="elem">
<span>
<a href="https://mp3boo.com">
<img src="style/icones/mp3.png">
Mp3Boo
</a>
</span>
<a href="https://www.mp3boo.com/mp3-download-releases/2013"> New Releases </a>
<a href="https://www.mp3boo.com/artist"> Browse Artist </a>
</div>

</div>
</div>
</body>
</html>


Here's a preview of the homepage: You must login or register to view this content.

Here's a download link to the files: You must login or register to view this content.
Virus scan: You must login or register to view this content.


Lol, you use blackboard too. :fa:

Hey, you want to make me a custom 404 error page?

I did mine in HTML and it's been way too long to do anything decent.

You must login or register to view this content.

That's the link to one of my sites, I just gave an folder directory that does not exist to show the error.

Be willing to pay a few dollars for something that looks cool and something that I can modify if I need to in the future, (EG add links).
05-03-2013, 08:43 PM #8
AgentSexyPig
Never give up!
Originally posted by Clouds View Post
Here's a homepage as designed and customized by yours truly. I will include the source of the index page here and will attach a zip file of all necessary files/folders.

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/style.css">
</head>
<body>
<div id="centerMenu">
<div id="titleMenu">
<h1><center> Clouds' Home </center></h1>
</div>
<div id="links">

<div class="separator">
<span>Search</span>
</div>

<form action="https://www.google.com/search" method="GET">
<div class="input-prepend input-append">
<input type="text" class="span3 input-large" placeholder="Enter a search..." name="q" maxlength="255">
<input type="submit" class="btn" value="Go">
</div>
<input type="hidden" name="hl" value="en">
</form>

<div class="separator">
<span>Essentials</span>
</div>

<div class="elem">
<span>
<a href="https://www.google.com">
<img src="style/icones/google.png">
Google
</a>
</span>
<a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a>
<a href="https://mail.google.com/mail/u/0/?tab=wm#inbox">GMail</a>
<a href="https://www.google.com/news">News</a>
</div>

<div class="separator">
<span>Interests</span>
</div>

<div class="elem">
<span>
<a href="https://www.4chan.org">
<img src="style/icones/4chan.jpg">
4chan
</a>
</span>
<a href="https://www.4chan.org/b/"> /b/ </a>
<a href="https://www.4chan.org/v/"> /v/ </a>
<a href="https://www.4chan.org/wg/"> /wg/ </a>
</div>

<div class="elem">
<span>
<a href="https://www.youtube.com">
<img src="style/icones/youtube.jpg">
YouTube
</a>
</span>
<a href="https://www.youtube.com/feed/playlists"> Playlists </a>
<a href="https://www.youtube.com/feed/subscriptions"> Subscriptions </a>
</div>

<div class="elem">
<span>
<a href="https://www.**********.com/">
<img src="style/icones/ps.png">
**********
</a>
</span>
<a href="https://www.**********.com/forums/home/"> Forums </a>
<a href="https://www.**********.com/forums/hashes/"> Hash DB </a>
<a href="https://www.**********.com/forums/defaces/"> Deface DB </a>
</div>

<div class="separator">
<span>Work</span>
</div>

<div class="elem">
<span>
<a href="https://bb.clemson.edu/">
<img src="style/icones/bb.png">
Blackboard
</a>
</span>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_2_1"> Courses </a>
<a href="https://bb.clemson.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_11_1"> Resources </a>
</div>

<div class="elem">
<span>
<a href="https://portal.mypearson.com/portal/render.userLayoutRootNode.uP?externalSiteId=mypearson&key=1102821546121852768162012&uP_sparam=activeTab&uP_tparam=portletViewId">
<img src="style/icones/ml.png">
MyLab
</a>
</span>
<a href="https://cp03.coursecompass.com/webapps/portal/frameset.jsp?url=%2Fbin%2Fcommon%2Fcourse.pl%3Fcourse_id%3D_716849_1"> MyMathLab </a>
</div>

<div class="separator">
<span>Awesome faceownloads</span>
</div>

<div class="elem">
<span>
<a href="https://thepiratebay.se/">
<img src="style/icones/tpb.jpg">
The Pirate Bay
</a>
</span>
<a href="https://thepiratebay.se/browse"> Browse Torrents </a>
<a href="https://thepiratebay.se/top"> Top 100 </a>
</div>

<div class="elem">
<span>
<a href="https://mp3boo.com">
<img src="style/icones/mp3.png">
Mp3Boo
</a>
</span>
<a href="https://www.mp3boo.com/mp3-download-releases/2013"> New Releases </a>
<a href="https://www.mp3boo.com/artist"> Browse Artist </a>
</div>

</div>
</div>
</body>
</html>


Here's a preview of the homepage: You must login or register to view this content.

Here's a download link to the files: You must login or register to view this content.
Virus scan: You must login or register to view this content.

This is really nice

Copyright © 2026, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo