Web Front Page

Developer
Garrett Saiki
Size
2,513 Kb
Views
52,624
  1. Web Front Page Previews
  2. Web Front Page HTML Codes
  3. Web Front Page CSS Codes

How do I make an web front page?

What is a web front page? How do you make a web front page? This script and codes were developed by Garrett Saiki on 13 July 2022, Wednesday.

Web Front Page Previews
IQ Test

Web Front Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Web Front Page</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang ="en">
<head> <meta charset="UTF-8"> <title>Garrett Saiki - Web 1</title>	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">	<link rel="stylesheet" href="css/styles.css"> </head>
<body class=""> <nav> <ul class = topnav id= topNavList>	<li><a href="index.html">Home</a></li>	<li><a href="portfolio.html">Portfolio</a></li> <li><a href="bio.html">Bio &amp; Resume</a></li> <li><a href="contact.html">Contact</a></li>	</ul> </nav> <video autoplay loop muted id = "front" class="overlay"> <source src="https://fpdl.vimeocdn.com/vimeo-prod-skyfire-std-us/01/18/8/200092486/675534455.mp4?token=58d46d91_0x770a9fb96ca86ccff6327624779011e443e872a3&download=1&filename=Mountains+-" type="video/mp4"></source> <h1 id="container">GARRETT SAIKI</h1> <p>Making thoughts Visual</p>
</body>
</html>

Web Front Page - Script Codes CSS Codes

/* Add a black background color to the top navigation */
.topnav { display: inline-block; position: relative; list-style: none; background-color: #333; overflow: hidden; width:100%; z-index: 999999;
}
/* Style the links inside the navigation bar */
.topnav a { float: left; display: inline-block; color: white; text-align: center; padding: 10px 10px; text-decoration: none; font-size: 16px;
}
/* Change the color of links on hover */
.topnav a:hover { background-color: #57191E; color: black; padding: 10px 10px; transition: ease-in .5s;
}
/* Add a color to the active/current link */
.topnav a.active { background-color: #4CAF50; color: white;
}
/*Header*/
html, body { height: 100%;
}
h1, p { font-family: 'Roboto Slab', serif; display: flex; position: relative; top: 30%; text-align: center; color: white; line-height: 1em; box-sizing: border-box; justify-content: center; word-wrap: break-word;
}
h1 { font-size: 4em; letter-spacing: 0.18em;
}
p { font-size: 1.5em; letter-spacing: 0.1em;
}
/*Media Inquries*/
@media only screen and (max-width: 700px) { h1, p { margin: 2% 0; }
}
@media only screen and (max-width: 550px) { h1, p { margin: 2.5% 0; }
}
@media only screen and (max-width: 510px) { h1, p { margin: 3.25% 0; }
}
@media only screen and (max-width: 400px) { h1, p, nav, video { margin: 4.5% 0; }
}
@media only screen and (max-width: 320px) { h1, p { margin: 5.5% 0; }
}
@media only screen and (max-width: 280px) { h1, p { margin: 6.5% 0; }
}
/*video*/
video { height: 100%; position: relative; overflow: hidden; top: 0; left: 50%; min-width: 100%; min-height: auto; width: auto; height: auto; position: absolute; background-size: cover; transform: translate(-50%); z-index: -1;
}
Web Front Page - Script Codes
Web Front Page - Script Codes
Home Page Home
Developer Garrett Saiki
Username gsaiki
Uploaded July 13, 2022
Rating 3
Size 2,513 Kb
Views 52,624
Do you need developer help for Web Front Page?

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!

Garrett Saiki (gsaiki) Script Codes
Name
2d
YouTube Video of Swoop
Ball Animation
Fit Vids
Styled TH
Links
Practice On Own
Internal CSS Page 2
Transition
Internal CSS Page 1
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!