Advanced Website Design

Developer
Kevin Alford
Size
3,405 Kb
Views
8,096
  1. Advanced Website Design Previews
  2. Advanced Website Design HTML Codes
  3. Advanced Website Design CSS Codes
  4. Advanced Website Design JS Codes

How do I make an advanced website design?

Typography, corners, gradients, shadows, and a grid layout system.. What is a advanced website design? How do you make a advanced website design? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

Advanced Website Design Previews
IQ Test

Advanced Website Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Advanced Website Design</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Nova+Square);
@import url(https://fonts.googleapis.com/css?family=VT323);
p, h1, ul { background-color: #eee; color: #555; padding: 10px; box-shadow: 0px 1px 5px #aaa;
}
body { background-color: #ccc; font-family: 'Nova Square', cursive;
}
a { color: #7af;
}
.posts p { border-top: 5px solid #a47; animation: 2s fadein, 0.4s slidein cubic-bezier(.64,.66,.82,1.21); animation-fill-mode: forwards; opacity: 0; position: relative;
}
.title { font-family: 'VT323', cursive; font-size: 3.0em; background-color: #222; color: #aaa; border-radius: 5px; text-shadow: 0px 0px 10px #111; box-shadow: 0px 2px 10px #777; position:relative; top: -80px; margin-bottom: -10px; animation: 2s breakdown; animation-delay: 2s; animation-fill-mode: forwards;
}
.delay1 { animation-delay: 0.5s !important;
}
.delay2 { animation-delay: 1s !important;
}
@keyframes breakdown { 0% { transform: rotate( 0deg); } 10% { transform: rotate( 0deg); top: -30px; } 30% { transform: rotate( 1deg); } 75% { transform: rotate( 0deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(-2deg); top: -30px; }
}
@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes slidein { 0% { left: 300px; } 100% { left: 0px; }
}
li { list-style: none; border-left: 4px solid #7af; padding-left: 5px; margin-bottom: 5px;
}
.footer { background-color: #edf; border: 1px solid #bbb; border-radius: 10px; height: 3.5em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container_12"> <div class="grid_12"> <h1 class="title"> Kevins Gridiculous Site </h1> </div> <div class="clear"></div> <div class="grid_3"> <ul> <li>HTML </li> <li>CSS </li> <li>Javascript </li> </ul> </div> <div class="grid_9"> <div class="posts"> <p> HTML is for creating content on websites. </p> <p class="delay1"> CSS is for styling the content. </p> <p class="delay2"> Javascript creates interaction! </p> </div> </div> <div class="clear"></div> <div class="grid_6"> <p class="footer"> Kevin works for <a href="http://www.gameslearningsociety.org/">Games + Learning + Society</a> as a Software Engineer doing web development and game server programming. </p> </div> <div class="grid_6"> <p class="footer">This page was built using modern techniques and tools including: <a href="https://960.gs/">960 Grid system</a>, <a href="https://leaverou.github.com/prefixfree/">Prefix free</a>, <a href="https://jquery.com/">jQuery</a>, and <a href="https://necolas.github.com/normalize.css/">normalize.css</a> </p> </div> <div class="clear"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Advanced Website Design - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Nova+Square);
@import url(https://fonts.googleapis.com/css?family=VT323);
p, h1, ul { background-color: #eee; color: #555; padding: 10px; box-shadow: 0px 1px 5px #aaa;
}
body { background-color: #ccc; font-family: 'Nova Square', cursive;
}
a { color: #7af;
}
.posts p { border-top: 5px solid #a47; animation: 2s fadein, 0.4s slidein cubic-bezier(.64,.66,.82,1.21); animation-fill-mode: forwards; opacity: 0; position: relative;
}
.title { font-family: 'VT323', cursive; font-size: 3.0em; background-color: #222; color: #aaa; border-radius: 5px; text-shadow: 0px 0px 10px #111; box-shadow: 0px 2px 10px #777; position:relative; top: -80px; margin-bottom: -10px; animation: 2s breakdown; animation-delay: 2s; animation-fill-mode: forwards;
}
.delay1 { animation-delay: 0.5s !important;
}
.delay2 { animation-delay: 1s !important;
}
@keyframes breakdown { 0% { transform: rotate( 0deg); } 10% { transform: rotate( 0deg); top: -30px; } 30% { transform: rotate( 1deg); } 75% { transform: rotate( 0deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(-2deg); top: -30px; }
}
@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes slidein { 0% { left: 300px; } 100% { left: 0px; }
}
li { list-style: none; border-left: 4px solid #7af; padding-left: 5px; margin-bottom: 5px;
}
.footer { background-color: #edf; border: 1px solid #bbb; border-radius: 10px; height: 3.5em;
}

Advanced Website Design - Script Codes JS Codes

// TODO
// embed video
// javascript slideshow
Advanced Website Design - Script Codes
Advanced Website Design - Script Codes
Home Page Home
Developer Kevin Alford
Username zeroeth
Uploaded January 07, 2023
Rating 3
Size 3,405 Kb
Views 8,096
Do you need developer help for Advanced Website Design?

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!

Kevin Alford (zeroeth) Script Codes
Name
Three.js Shader Fun
960 grid layout
Javascript Starfleet Basics
How not to code a website
Processing.js Random Slice
Simple responsive 2 col
Please Enter a Value
Glsl.heroku.com sandbox
A Pen by Kevin Alford
Three.js WebGL Clock
Create amazing art & images 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!