Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [Freebie] I made a new personal homepage, figured I'd share the code
New Posts  All Forums:Forum Nav:

[Freebie] I made a new personal homepage, figured I'd share the code

post #1 of 25
Thread Starter 
Hi guys.

Well, I basically created a personal homepage for me when using the Internet as very bored by lots of other alternatives. I think it came out rather well and so I'm sharing the code.

Features:
- Lots of links to PC & tech related stuffs
- Nice web 2.0 colors
- Google Search box (I provided instructions in the code on how to change it)
- Nice images

Picture:

456


It is written in HTML5 and CSS3 and I welcome you to change the code to your needs. The only thing I ask is that if you make major changes ie re-write more than say 50-60 lines of code then please make it available to others. Basically FOSS principles apply guys.

Instructions:

1. Copy the code below
2. Open notepad, Gedit etc.
3. Paste the full code
4. Save as "homepage.html"
5. Go to your browser settings and select it as your homepage

CODE:

(PS I used CSS in the same HTML to save mucking about with external files)

Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Home </title>

<!-- This is in Version 0.1 -->


<meta charset="utf-8">
<meta name="language" content="english">
<meta name="author" content="Josh Dempsey //  https://www.facebook.com/joshuaa.dempsey" >
<meta name="copyright" content="Released under the GPL.">
<style type="text/css">
/* The CSS for the page is in here. */
img
{
margin: 15px;
}
::selection
{
background-color: #007A8F;
}
a
{
color: #007A8F;
text-decoration: none;
}
a:after
{
color: #007A8F;
text-decoration: none;
}
a:hover
{
color: #007A8F;
text-decoration: underline;
}
body
{
background-color: #EEEEEE;
height: 100%;
width: 100%;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
h1.header
{
text-align: center;
font-size: 20px;
font-family: 'Open Sans', 'serif';
text-decoration: underline;
color: #3369E8;
}
div.search-box
{
text-align: center;
margin-top: 40px;
}
div.main
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: transparent;
}
div.news
{
text-align: center;
height: auto;
width: 20%;
margin: 10px;
background-color: transparent;
border-top: 4px solid #007A8F;
border-bottom: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: inline-block;    
}
div.socialmedia
{
text-align: center;
height: auto;
width: 20%;
margin: 10px;
background-color: transparent;
border-top: 4px solid #356406;
border-bottom: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: inline-block;    
}
div.line1
{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 100px;
}
div.line2
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
div.pcsites
{
text-align: center;
height: auto;
width: 20%;
margin: 10px;
background-color: transparent;
border-top: 4px solid #B10D18;;
border-bottom: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: inline-block; 
}
div.forums
{
text-align: center;
height: auto;
width: 20%;
margin: 10px;
background-color: transparent;
border-top: 4px solid #0054B3;
border-bottom: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: inline-block; 
}
div.blog
{
text-align: center;
height: auto;
width: 20%;
margin: 10px;
background-color: transparent;
border-top: 4px solid #D42F00;;
border-bottom: 3px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: inline-block; 
}
div.icons
{
margin-left: auto;
margin-right: auto;
background-color: transparent;
height: auto;
width: 100%;
display: inline-block;
text-align: center;
margin-top: 50px;
}
</style>
</head>

<body>

</body>
<header>
<h1 class="header">
Homepage</h1>
</header>
<div class="search-box">
<!-- This adds the search box to the top of the page -->
<!-- The code below (line X) changes the SE (search engine) replace with e.g. yahoo.co.uk./search -->
<form method="get" action="http://www.google.com/search">
<input type="text"   name="q" size="31"
 maxlength="255" value="" / style="text-align: center; border-radius: 15px; box-shadow: 10px 10px 5px #888888; box-shadow: inset 0 #000;">
<input type="submit" value="✔" style="box-shadow: 10px 10px 5px #888888"/>
</form>
</div>
<!-- This is the start of the guts of the website. This is where the DIVs start which enclose the sites. -->

<div class="main">
<div class="line1"><div class="news">
<!-- The news website links go here -->
<a href="http://www.bbc.co.uk">BBC</a><br>
<a href="http://www.dailymail.co.uk">Daily Mail</a><br>
<a href="http://www.telegraph.co.uk">Telegraph</a><br>
<a href="http://www.theregister.co.uk">The Register</a><br>
</div>
<div class="socialmedia">
<a href="http://www.facebook.com">Facebook</a><br>
<a href="http://www.twitter.com">Twitter</a><Br>
<a href="http://www.plus.google.com">G+</a><br>
<a href="http://www.orkut.com">Orkut</a><br>
</div>
<div class="pcsites">
<a href="http://www.softpedia.com">Softpedia</a><br>
<a href="http://www.zdnet.co.uk">Zdnet</a><br>
<a href="http://www.techspot.com/">Techspot</a><br>
<a href="http://www.bbc.co.uk/news/technology/">BBC (tech)</a><br>
</div>
</div>
<div class="line2">
<div class="forums">
<a href="http://www.overclock.net"><b>OCN</b></a><br>
<a href="http://ubuntuforums.org/">Ubuntu forums</a><br>
<a href="http://windowsforums.org/">Windows forums</a><br>
<a href="https://forum.suprbay.org/">TPB forums</a><br>
</div>
<div class="blog">
<a href="http://opensourceoperatingsystems.blogspot.co.uk/">Best Linux blog</a><br>
<a href="http://windowsteamblog.com/">Windows blog</a><br>
<a href="http://blog.chromium.org/">Chromium blog</a><br>
<a href="http://torvalds-family.blogspot.co.uk/">Linus' Torvalds blog</a><br></div>
</div>
</div>
<div class="icons">
<a href="http://www.twitter.com"><img src="http://i876.photobucket.com/albums/ab325/joshdempsey/isometrica-small-twitter.png"></a>
<a href="http://www.reddit.com"><img src="http://i876.photobucket.com/albums/ab325/joshdempsey/isometrica-small-reddit.png"></a>
<a href="http://www.linkedin.com"><img src="http://i876.photobucket.com/albums/ab325/joshdempsey/isometrica-small-linked-in.png"></a>
<a href="http://www.facebook.com"><img src="http://i876.photobucket.com/albums/ab325/joshdempsey/isometrica-small-facebook.png"></a>
<a href="http://www.stumbleupon.com"><img src="http://i876.photobucket.com/albums/ab325/joshdempsey/isometrica-small-stumble-upon.png"></a>
</div>
</html>

Thanks!
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #2 of 25
Thread Starter 
Reserved for 0.1.1
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #3 of 25
I am not really much aware about HTML5 so I noticed you have left the "body" tag blank & the rest of the markup follows it. Is it intentional. but well , it works.
I think you could save some on the styling on the 5 blocks which are similar except for the top border if you add 2 classes & make one of of them hold the common styles.
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
post #4 of 25
Get that Daily Fail link out tongue.gif

Also your tick character should really be expressed as a character code.
post #5 of 25
Site looks nice!

Thanks for reminding me to brush up on my HTML/CSS
    
CPUMotherboardGraphicsRAM
Phenom II X3 720 @ 3.5 (1.39v) Gigabyte GA-MA790XT-UD4P ASUS 5850 @ 880/1180 (1.118v) 4gb 1333mhz G.Skill DDR3 
Hard DriveHard DriveHard DriveHard Drive
64gb Crucial M4 SSD 3x 250gb WD2500JD - RAID0 1tb WD1001FALS 1tb WD10EARS 
Optical DriveCoolingOSMonitor
Pioneer DLDVD/CDRW Arctic Freezer Pro 64 Win 7 64bit Ultimate E2305 LG 23" LED 
KeyboardPowerCaseMouse
Filco Majestouch II Ninja Tenkeyless Fortron BlueStorm II 500w CM 690II Advanced Razer DeathAdder 
Mouse PadAudioAudio
generic Echo Miamidi PCI M-Audio BX5a Studio Monitors 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Phenom II X3 720 @ 3.5 (1.39v) Gigabyte GA-MA790XT-UD4P ASUS 5850 @ 880/1180 (1.118v) 4gb 1333mhz G.Skill DDR3 
Hard DriveHard DriveHard DriveHard Drive
64gb Crucial M4 SSD 3x 250gb WD2500JD - RAID0 1tb WD1001FALS 1tb WD10EARS 
Optical DriveCoolingOSMonitor
Pioneer DLDVD/CDRW Arctic Freezer Pro 64 Win 7 64bit Ultimate E2305 LG 23" LED 
KeyboardPowerCaseMouse
Filco Majestouch II Ninja Tenkeyless Fortron BlueStorm II 500w CM 690II Advanced Razer DeathAdder 
Mouse PadAudioAudio
generic Echo Miamidi PCI M-Audio BX5a Studio Monitors 
  hide details  
Reply
post #6 of 25
Thread Starter 
Quote:
Originally Posted by _Nikhil View Post

I am not really much aware about HTML5 so I noticed you have left the "body" tag blank & the rest of the markup follows it. Is it intentional. but well , it works.
I think you could save some on the styling on the 5 blocks which are similar except for the top border if you add 2 classes & make one of of them hold the common styles.

I will look into this, thanks! I was thinking about classes but got a bit stumbled at how I would work it.. I will try again..
Quote:
Originally Posted by Plan9 View Post

Get that Daily Fail link out tongue.gif
Also your tick character should really be expressed as a character code.

It's just there so I can look at hot TOWIE ladies tongue.gif
Quote:
Originally Posted by _02 View Post

Site looks nice!
Thanks for reminding me to brush up on my HTML/CSS

Thanks! And good! The more the merrier as they say...
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #7 of 25
What actually makes it HTML 5 and CSS 3?

I'm pretty new too looking into the new HTML standard. As far as I'm aware we should be using segments instead of div's and (as you've managed too do) replace the use for float:.

I actually didn't know about display:inline-block as being an alternative, is that the best alternative too using floats?


The search page looks nice and spacious and groovy, which is how I like my pages lol

Also when is IE gonna start being friendly for developers and actually work?
Liquid Mad House
(11 items)
 
Ti Fighter
(14 items)
 
G650
(6 items)
 
CPUMotherboardGraphicsGraphics
5930k @ 4.5 ASUS X99 Delux GTX980 1525/8000 GTX980 1525/8000 
RAMHard DriveHard DriveHard Drive
16GB DDR4 2999 850 PRO SSD - 512x512GB Raid 850 PRO SSD 512GB - For Gaming 2 x 4tb - For Storage 
CoolingMonitorCase
Custom 2x420 / Heatkiller Copper / 2xEK GPU blocks 1440p  Thermaltake Core X9 
CPUMotherboardGraphicsRAM
i7 3970x @ 4.5 x79 sabertooth evga 780ti superclocked 32GB 1866 Vengence DDR3 
Hard DriveHard DriveCoolingOS
512GB Samsung evo SSD 2TB Samsung Spinpoint H100i Windows 8.1 
MonitorKeyboardPowerCase
1440p Sharkoon Skiller Corsair AX850 Cooler Master HAF XB 
MouseAudio
R.A.T 3 TeckNet HS800 7.1 Surround Headphones  
CPUGraphicsRAMHard Drive
i3-370M GMA HD 500 MHz 3GB DDR3 250GB 
Optical DriveOS
DL DVD RW Windows 7 Home Edition 
  hide details  
Reply
Liquid Mad House
(11 items)
 
Ti Fighter
(14 items)
 
G650
(6 items)
 
CPUMotherboardGraphicsGraphics
5930k @ 4.5 ASUS X99 Delux GTX980 1525/8000 GTX980 1525/8000 
RAMHard DriveHard DriveHard Drive
16GB DDR4 2999 850 PRO SSD - 512x512GB Raid 850 PRO SSD 512GB - For Gaming 2 x 4tb - For Storage 
CoolingMonitorCase
Custom 2x420 / Heatkiller Copper / 2xEK GPU blocks 1440p  Thermaltake Core X9 
CPUMotherboardGraphicsRAM
i7 3970x @ 4.5 x79 sabertooth evga 780ti superclocked 32GB 1866 Vengence DDR3 
Hard DriveHard DriveCoolingOS
512GB Samsung evo SSD 2TB Samsung Spinpoint H100i Windows 8.1 
MonitorKeyboardPowerCase
1440p Sharkoon Skiller Corsair AX850 Cooler Master HAF XB 
MouseAudio
R.A.T 3 TeckNet HS800 7.1 Surround Headphones  
CPUGraphicsRAMHard Drive
i3-370M GMA HD 500 MHz 3GB DDR3 250GB 
Optical DriveOS
DL DVD RW Windows 7 Home Edition 
  hide details  
Reply
post #8 of 25
Thread Starter 
Quote:
Originally Posted by Chobbit View Post

What actually makes it HTML 5 and CSS 3?
I'm pretty new too looking into the new HTML standard. As far as I'm aware we should be using segments instead of div's and (as you've managed too do) replace the use for float:.
I actually didn't know about display:inline-block as being an alternative, is that the best alternative too using floats?
The search page looks nice and spacious and groovy, which is how I like my pages lol
Also when is IE gonna start being friendly for developers and actually work?

We probably should be. I used HTML5 elements for the ones I know, I will be converting the rest later. I hope to use Javascript to make it a bit more interactive. IE... Hmm, it should work on IE9 fine but god knows for the rest. Probably never.

Oh well, we can only hope MS takes their head out their ass and makes a good browser (HTML compatibleness wise)
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
post #9 of 25
Quote:
Originally Posted by Chobbit View Post

What actually makes it HTML 5 and CSS 3? Also when is IE gonna start being friendly for developers and actually work?

I haven't checked in YEARS, but lol
    
CPUMotherboardGraphicsRAM
Phenom II X3 720 @ 3.5 (1.39v) Gigabyte GA-MA790XT-UD4P ASUS 5850 @ 880/1180 (1.118v) 4gb 1333mhz G.Skill DDR3 
Hard DriveHard DriveHard DriveHard Drive
64gb Crucial M4 SSD 3x 250gb WD2500JD - RAID0 1tb WD1001FALS 1tb WD10EARS 
Optical DriveCoolingOSMonitor
Pioneer DLDVD/CDRW Arctic Freezer Pro 64 Win 7 64bit Ultimate E2305 LG 23" LED 
KeyboardPowerCaseMouse
Filco Majestouch II Ninja Tenkeyless Fortron BlueStorm II 500w CM 690II Advanced Razer DeathAdder 
Mouse PadAudioAudio
generic Echo Miamidi PCI M-Audio BX5a Studio Monitors 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Phenom II X3 720 @ 3.5 (1.39v) Gigabyte GA-MA790XT-UD4P ASUS 5850 @ 880/1180 (1.118v) 4gb 1333mhz G.Skill DDR3 
Hard DriveHard DriveHard DriveHard Drive
64gb Crucial M4 SSD 3x 250gb WD2500JD - RAID0 1tb WD1001FALS 1tb WD10EARS 
Optical DriveCoolingOSMonitor
Pioneer DLDVD/CDRW Arctic Freezer Pro 64 Win 7 64bit Ultimate E2305 LG 23" LED 
KeyboardPowerCaseMouse
Filco Majestouch II Ninja Tenkeyless Fortron BlueStorm II 500w CM 690II Advanced Razer DeathAdder 
Mouse PadAudioAudio
generic Echo Miamidi PCI M-Audio BX5a Studio Monitors 
  hide details  
Reply
post #10 of 25
Thread Starter 
Oops... forgot to test it in IE... oh no. Well, if you use it:

https://www.google.com/chrome
http://www.mozilla.org/en-US/firefox/new/
http://www.opera.com/
http://www.apple.com/safari/

tongue.gif
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
Main Rig.
(14 items)
 
Battlefield 2 review.
Battlefield 2 PC Game EA
 
CPUMotherboardGraphicsRAM
Bulldozer FX4100 Gigabyte GA-M68MT-S2 MSI 7770 Kingston Hyper X | 2 x 2 GB 
Hard DriveOptical DriveCoolingOS
WD 2 TB  LiteON DVD/CD R-W Drive AMD Standard cooler Windows 7 Ultimate 
MonitorKeyboardPowerCase
32' Luxor Full HD TV Microsoft comfort curce Antec 450 Watt OcUK Value case 
MouseAudio
Microsoft wireless mouse Logitech speakers & Bass 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [Freebie] I made a new personal homepage, figured I'd share the code