Homepage

Developer
James Donovan
Size
4,737 Kb
Views
12,144
  1. Homepage Previews
  2. Homepage HTML Codes
  3. Homepage CSS Codes
  4. Homepage JS Codes

How do I make an homepage?

What is a homepage? How do you make a homepage? This script and codes were developed by James Donovan on 26 November 2022, Saturday.

Homepage Previews
IQ Test

Homepage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Homepage</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper"><a href="https://www.netflix.com/"><img class="hvr-float-shadow" src="http://razorianfly.com/wp-content/uploads/2015/01/AppIcon.512x512-75-6.png" alt="netflix"/></a><a href="https://www.youtube.com/"><img class="hvr-float-shadow" src="http://a4.mzstatic.com/us/r30/Purple3/v4/d6/e4/12/d6e41207-d0ee-96c5-6f9d-e789c6e4caf7/icon128-2x.png" alt="youtube"/></a><a href="https://www.reddit.com/"><img class="hvr-float-shadow" src="https://lh5.ggpht.com/1-LNRid982TLH8lF0BsXrkjYQNlbjv6en6mxDN9dzyIyizMJO2ZXgJNNtqIVInLSDg=w300" alt="reddit"/></a><a href="https://www.facebook.com/"><img class="hvr-float-shadow" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png" alt="facebook"/></a><a href="https://docs.google.com/spreadsheets/u/0/"><img class="hvr-float-shadow" src="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Sheets-icon.png" alt="sheets"/></a><a href="https://docs.google.com/document/u/0/"><img class="hvr-float-shadow" src="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Docs-icon.png" alt="docs"/></a><a href="https://drive.google.com/drive/my-drive"><img class="hvr-float-shadow" src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/256/Google-Drive-icon.png" alt="drive"/></a> <div id="search-form"> <input type="text" id="search-text" onkeypress="GetChar (event);" autofocus="autofocus"/> <input type="submit" value="Search" id="search-button" onclick="search()"/> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Homepage - Script Codes CSS Codes

body { margin: 0px;
}
#wrapper { margin: 0px auto; width: 100%; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0px 20px;
}
img { width: 150px;
}
#search-form { margin-top: 30px;
}
input[type="text"] { padding: 7px; font-size: 1.2em; width: 500px;
}
input[type="submit"] { padding: 7px; font-size: 1.2em; background-color: #2980b9; color: white; border: none; margin-left: 5px;
}
@media (max-width: 605px) { #search-button { diplay: block; margin-left: 0px; margin-top: 15px; } #search-text { width: 100%; margin: 0px 20px; }
}
@media (max-width: 300px) { #wrapper { position: relative; top: 0px; left: 0px; transform: translate(0px, 0px); padding: 0px; } img { display: block; } #search-text { margin: 0px; }
}
/* Float Shadow */
.hvr-float-shadow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;
}
.hvr-float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); /* W3C */ -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform, opacity; transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active { -webkit-transform: translateY(-5px); transform: translateY(-5px); /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before { opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

Homepage - Script Codes JS Codes

function search() {	if (document.getElementById("search-text").value == "") {	window.location = "https://www.google.com/"	} else {	window.location = "https://www.google.com/search?hl=en&site=webhp&q=" + document.getElementById("search-text").value + "&oq=" + document.getElementById("search-text").value;	}
}
function GetChar(event) {	if (event.keyCode == 13) {	search();	}
}
Homepage - Script Codes
Homepage - Script Codes
Home Page Home
Developer James Donovan
Username JWDonovan
Uploaded November 26, 2022
Rating 3
Size 4,737 Kb
Views 12,144
Do you need developer help for Homepage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Donovan (JWDonovan) Script Codes
Name
Push Menu
South Park Hub - Random Episodes
Video.js
South Park Hub - Temp Slideshow
Modal
South Park Hub - Seasons
South Park Hub - Login
SVG
Portfolio Header
Page Loader
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!