I am fairly new to web development, and would like some feedback. It is HTML/CSS, with some JS (button hovers, anchor scrolling and image sliders) from elsewhere. Comments on best practices and any other suggestions would be great as I feel I'm probably doing a lot wrong, but specifically:
I used different-colored containers that stretch the whole width of the page. Each container is inside a div which specifies the background color. Is this the best way to do it?
Is there an easy way for me to vertically-center my text blocks, instead of adding lots of linebreak tags?
A lot of my divs have multiple classes, e.g. "column last half image" and "centered larger highlight" - should this be avoided and if so what's the best way to go about this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>MVX Training | Welcome to the future of training</title>
<meta name="description" content="3D Interactive Training">
<meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" type="img/ico" href="images/favicon.ico">
<link rel="image_src" href="screenshot.jpg" />
<script src="js/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 700, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
});
});
</script>
</head>
<body>
<header>
<div class="lightgrey">
<div class="navcontainer">
<div class="logo">
<img src="images/logo.png" />
</div>
<div class="navlinks">
<ul>
<li><a class="scroll" data-speed="700" href="#welcome">Welcome</a></li>
<li><a class="scroll" data-speed="1000" href="#features">Features</a></li>
<li><a class="scroll" data-speed="1400" href="#casestudies">Case Studies</a></li>
<li><a class="scroll" data-speed="1500" href="#development">Development</a></li>
<li><a class="scroll" data-speed="1600" href="#pricing">Pricing</a></li>
<li><a class="scroll" data-speed="1700" href="#getintouch">Get in Touch</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="darkgrey">
<div class="container">
<div class="column">
<p><br /><br /><br /></p>
<a class="anchor" id="welcome"></a><h1 class="light"><br /><br />WELCOME TO THE FUTURE OF TRAINING</h1>
<div class="underline light"></div>
<p class="centered larger">MVX is an innovative new technology which leverages 3D gaming engines to provide immersive virtual training. 3D visuals and outcomes-focussed content are combined in a realistic 3D environment, allowing you to teach and assess operational procedures, hazard awareness and emergency scenario responses in an interactive and memorable way.</p><br />
<center><img src="images/reel.png" /></center>
<a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
</div>
<a class="scroll" data-speed="700" href="#features"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightgrey">
<div class="container">
<div class="column">
<a class="anchor" id="features"></a><h1>FEATURES</h1>
<div class="underline"></div>
<div class="column half">
<h2>SIMULATE EMERGENCY SCENARIOS</h2>
<p>Expose your personnel to realistic emergency and hazard scenarios so they can safely experience the potential consequences and dangers they can cause, and practise the appropriate responses to these emergencies.</p>
</div>
<div class="column half last image">
<img src="images/simulate_emergency_scenarios.png" />
</div>
</div>
<a class="scroll" data-speed="700" href="#features2"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightestgrey">
<div class="container">
<div class="column">
<div class="column half image rtl">
<img src="images/teach_consequences_effectively.png" />
</div>
<div class="column half last">
<a class="anchor" id="features2"></a><h2>TEACH CONSEQUENCES EFFECTIVELY</h2>
<p>Users can interact with the virtual 3D environment and make choices that will affect how their virtual character will fare, much like the real world. In these virtual environments, users can experience the consequences of those choices in a memorable way without the risk, and without the need to cease real operations.</p>
</div>
</div>
<a class="scroll" data-speed="700" href="#features3"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightgrey">
<div class="container">
<div class="column">
<div class="column half">
<a class="anchor" id="features3"></a><h2>SITE FAMILIARISATION</h2>
<p>Our talented team of 3D artists can create realistic 3D representations of your plant, site or work environment - whether it be existing or conceptual. These can be created using photographs, videos, blueprints or 3D CAD models. Interacting and exploring within this virtual environment will allow users to become familiar with important locations around site, minimising risk and improving efficiency.</p>
</div>
<div class="column half last image rtl">
<br /><br />
<img src="images/site_familiarisation.png" />
</div>
</div>
<a class="scroll" data-speed="700" href="#features4"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightestgrey">
<div class="container">
<div class="column">
<div class="column half image rtl">
</div>
<div class="column half last">
<a class="anchor" id="features4"></a><h2>COMMUNICATE SAFETY CULTURE</h2>
<p>Our training modules are custom-tailored to teach your user outcomes and safety culture in the most effective way. These may be communicated and tested through animated storylines and conversations within the 3D environment, engaging and interactive minigames, and simulated emergency scenarios.</p>
</div>
</div>
<a class="scroll" data-speed="700" href="#features5"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightgrey">
<div class="container">
<div class="column">
<div class="column half">
<a class="anchor" id="features5"></a><h2>VISUALISE COMPLEX PROCESSES</h2>
<p>(Removed for StackExchange char limit)</p>
</div>
<div class="column half last image rtl">
<img src="images/visualise_complex_processes.png" />
</div>
</div>
<a class="scroll" data-speed="700" href="#features6"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightestgrey">
<div class="container">
<div class="column">
<div class="column half image">
</div>
<div class="column half last">
<a class="anchor" id="features6"></a><h2>DETAILED USER REPORTING</h2>
<p>(Removed for StackExchange char limit)</p>
</div>
</div>
<a class="scroll" data-speed="700" href="#features7"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightgrey">
<div class="container">
<div class="column">
<div class="column half">
<a class="anchor" id="features7"></a><h2>DEPLOYMENT OPTIONS</h2>
<p>(Removed for StackExchange char limit)</p>
</div>
<div class="column half last image rtl">
<br />
<img src="images/deployment_options.png" />
</div>
</div>
<a class="scroll" data-speed="700" href="#casestudies"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightestgrey">
<div class="container">
<div class="column">
<a class="anchor" id="casestudies"></a><h1>CASE STUDIES</h1>
<div class="underline"></div>
<h2>WOODSIDE HEAT STRESS</h2>
<ul class="rslides">
<li><img src="images/case-studies/woodside-1.jpg"></li>
<li><img src="images/case-studies/woodside-2.jpg"></li>
<li><img src="images/case-studies/woodside-3.jpg"></li>
<li><img src="images/case-studies/woodside-4.jpg"></li>
<li><img src="images/case-studies/woodside-5.jpg"></li>
</ul>
<p>To complement their existing Broome induction, Woodside required an additional module to teach inductees about the dangers of heat stress. The module covered several related topics ranging from PPE, alcohol restrictions, real examples of heat stress, assessing personal risk, first aid response, emergency response and incident reporting.</p>
<p class="parabreak"> </p>
<p>Inductees are placed in various realistic scenarios, including emergency scenarios, in which they must apply the knowledge they have learnt throughout the module. They are taught to be aware of their own hydration/heat stress levels, as well as those of their co-workers.</p>
<div class="quote">
<p>"The software developed by Sentient for Woodside's Kimberley induction program has provided workers with a more engaging and effective site induction."</p>
<div class="author">
<p>- Jim McQueenie / Health, Safety & Security Manager / Woodside Browse LNG Development</p>
</div>
</div>
</div>
<a class="scroll" data-speed="700" href="#casestudies2"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightgrey">
<div class="container">
<div class="column">
<br /><br /><br />
<a class="anchor" id="casestudies2"></a><h2>ACID PLANT FILTER PRESS</h2>
<ul class="rslides">
<li><img src="images/case-studies/acid-1.jpg"></li>
<li><img src="images/case-studies/acid-2.jpg"></li>
<li><img src="images/case-studies/acid-3.jpg"></li>
<li><img src="images/case-studies/acid-4.jpg"></li>
<li><img src="images/case-studies/acid-5.jpg"></li>
<li><img src="images/case-studies/acid-6.jpg"></li>
<li><img src="images/case-studies/acid-7.jpg"></li>
</ul>
<p>This training module was developed to teach complex procedures to new and existing staff at a plant dealing with hazardous chemicals. The procedures were taught by utilising three fundamental stages: Show, Interact, and Assess. Trainees were first shown the correct procedure, then were allowed to interact with the virtual scene to practise the procedure, and finally were assessed on what they had learnt.</p>
<p class="parabreak"> </p>
<p>Visual animations, combined with an accurate and immersive 3D representation of the real site allowed trainees to familiarise themselves with the procedure and site before being physically inducted.</p>
<div class="stat">
<p> </p>
<p>The company was able to reduce its training time from 3 days per trainee to just 1.</p>
</div>
</div>
<a class="scroll" data-speed="700" href="#development"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="darkgrey">
<div class="container">
<a class="anchor" id="development"></a><h1 class="light">DEVELOPMENT</h1>
<div class="underline light"></div>
<div class="flowbox">Project start-up meeting (with client) to discuss requirements and deliverables</div>
<div class="flowline"></div>
<div class="flowbox">Customer delivers existing training material & other supporting documentation and assets</div>
<div class="flowline"></div>
<div class="flowbox">Create pre-visualisation (3D storyboard)</div>
<div class="flowline"></div>
<div class="flowbox right">Make adjustments</div>
<div class="flowbox rounded">Client approves?</div>
<p class="centered">Yes</p>
<div class="flowline"></div>
<div class="flowline"></div>
<div class="flowbox">Develop any remaining 3D content</div>
<div class="flowline"></div>
<div class="flowbox">Implement animations and interactions</div>
<div class="flowline"></div>
<div class="flowbox">Implement training outcomes</div>
<div class="flowline"></div>
<div class="flowbox">Create a build and deliver to customer</div>
<div class="flowline"></div>
<div class="flowbox right">Make adjustments</div>
<div class="flowbox rounded">Client approves?</div>
<p class="centered">Yes</p>
<div class="flowline"></div>
<div class="flowbox">Project closure</div>
<a class="scroll" data-speed="700" href="#pricing"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="lightestgrey">
<div class="container">
<a class="anchor" id="pricing"></a><h1>PRICING</h1>
<div class="underline"></div>
<p>As each module is customised, the pricing will vary depending on several factors. Below is an estimation of our average module prices. Please contact us directly for a specific quote.</p><br />
<div class="column third lightgrey">
<h2 class="centered">BASIC</h2>
<div class="price"><br /><br /><br />15k</div>
</div>
<div class="column third lightgrey">
<h2 class="centered">MEDIUM</h2>
<div class="price"><br /><br /><br />50k</div>
</div>
<div class="column third last lightgrey">
<h2 class="centered">COMPLEX</h2>
<div class="price"><br /><br /><br />85k</div>
</div>
<div class="column third">
<p class="centered">10-20 minutes of gameplay<br />
Basic 3D environment and assets<br />
Basic 3D animations<br />
1-2 non-player characters<br />
In-house voiceovers</p>
</div>
<div class="column third">
<p class="centered">20-40 minutes of gameplay<br />
Realistic 3D environment and assets<br />
Realistic 3D animations<br />
3-5 non-player characters<br />
Professional voiceovers</p>
</div>
<div class="column third last">
<p class="centered">40-60 minutes of gameplay<br />
Realistic 3D environment and assets<br />
Realistic 3D animations<br />
6-10 non-player characters<br />
Professional voiceovers</p>
</div>
<a class="scroll" data-speed="700" href="#getintouch"><div class="nextbutton">NEXT </div></a>
</div>
</div>
<div class="darkgrey">
<div class="container contact">
<a class="anchor" id="getintouch"></a><h1 class="light">GET IN TOUCH</h1>
<div class="underline light"></div>
<p class="centered larger">See what you can achieve with MVX Training. Contact us for a free demo today.</p>
<a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
<p class="centered larger">Or call us on</p>
<p class="centered larger highlight">+61 8 9240 7888</p>
</div>
</div>
<div class="darkestgrey">
<div class="container">
<center><img src="images/sentient_logo.png" /></center>
<p class="centered larger">204 Balcatta Road, Balcatta WA 6021</p>
<p class="centered larger"><a href="http://sencom.com.au" target="_blank">www.sencom.com.au</a></p>
</div>
</div>
</body>
<script src="js/smooth-scroll.js"></script>
</html>
CSS:
/* ---------------------------------------------------------------
MVX TRAINING WEBSITE
URL:
Company:
Year: 2014
------- SWATCHES USED: --------
Dark backgrounds: #1b1b1b
Darkest backgrounds: #090909
Light backgrounds: #eeeeee
Lightest backgrounds: #f5f5f5
Dark text: #1b1b1b
Light text: #fff
Light grey text: #9e9e9e
Orange highlights: #f98c0b
-------------------------------
--------------------------------------------------------------- */
/* --------------------------- OPEN SANS --------------------------- */
/* Light */
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: 300;
font-style: normal;
}
/* Light Italic */
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
font-weight: 300;
font-style: italic;
}
/* --------------------------- GENERAL --------------------------- */
body {
background-color: #fff;
}
a {
outline: 0;
}
a.anchor {
display: block;
position: relative;
top: -150px;
visibility: hidden;
}
* {
margin: 0;
padding: 0;
}
/* --------------------------- FONTS --------------------------- */
p, body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 300;
text-align: justify;
line-height: 28px;
color: #1b1b1b;
}
p a {
color: #f98c0b;
text-decoration: none;
}
p a:hover {
text-decoration: underline;
}
.darkgrey p, .darkestgrey p {
color: #9e9e9e;
}
p.larger {
font-size: 16px;
}
p.parabreak {
line-height: 14px;
}
.quote {
min-height: 100px;
width: 60%;
float: right;
margin: 10px 120px 10px 10px;
font-style: italic;
color: #000;
background: url('images/quote.png') 1.4em 1.6em no-repeat;
padding: 10px 10px 10px 90px;
}
.author {
font-style: normal;
}
.stat {
min-height: 100px;
width: 60%;
float: right;
margin: 10px 120px 10px 10px;
font-style: italic;
color: #000;
background: url('images/stat.png') 1.4em 1.6em no-repeat;
padding: 6px 10px 10px 90px;
}
h1 {
letter-spacing: 2px;
font-weight: 300;
text-align: center;
font-size: 36px;
color: #1b1b1b;
margin-top: 20px;
margin-bottom: 20px;
}
h1 a {
text-decoration: inherit;
color: inherit;
}
h1.light {
color: #fff;
}
h2 {
letter-spacing: 2px;
font-weight: 300;
font-size: 22px;
text-align: justify;
margin-bottom: 20px;
}
h2.light {
color: #fff;
}
.underline {
background-color: #1b1b1b;
width: 70px;
height: 2px;
display: block;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 30px;
}
.underline.light {
background-color: #fff;
}
.centered {
text-align: center;
}
.highlight {
color: #f98c0b;
}
/* --------------------------- CONTAINERS --------------------------- */
.container {
width: 960px;
margin: 0 auto;
padding: 0;
padding-top: 30px;
padding-bottom: 30px;
}
.container:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nobottompadding {
padding-bottom: 0px;
}
.container.contact {
background-image: url('images/contact.png');
background-repeat: no-repeat;
}
/* --------------------------- COLUMNS --------------------------- */
.column {
width: 960px;
float: left;
}
.column:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.column.third {
float: left;
margin-right: 20px;
width: 306px;
padding-top: 30px;
padding-bottom: 30px;
}
.column.last {
margin-right: 0px;
float: right;
}
.column.half {
width: 460px;
min-height: 300px;
margin-top: 120px;
}
.column.rtl {
direction: rtl;
}
.column.ltr {
direction: ltr;
}
.column.image {
margin: 0px;
}
/* --------------------------- COLORS --------------------------- */
.darkgrey {
background-color: #1b1b1b;
}
.darkestgrey {
background-color: #090909;
}
.lightgrey {
background-color: #eeeeee;
}
.lightestgrey {
background-color: #f5f5f5;
}
/* --------------------------- BUTTONS --------------------------- */
.button {
position: relative;
text-transform: uppercase;
text-align: center;
font-size: 14px;
border: solid 2px #f98c0b;
display: inline-block;
width: 240px;
left: 50%;
margin: 20px auto;
margin-left: -160px;
padding: 10px 40px 10px 40px;
transition: all 0.2s linear;
}
.button:hover {
width:260px;
margin-left:-170px;
-webkit-transition:500ms linear;
}
.button.light {
color: #fff;
}
.nextbutton {
padding-top: -2px;
float: right;
text-align: right;
font-size: 12px;
width: 48px;
height: 16px;
background-image: url('images/arrow.png');
background-repeat: no-repeat;
margin-top: 20px;
margin-bottom: 20px
}
.nextbutton a {
color: inherit;
text-decoration: none;
}
.darkgrey a, darkestgrey a {
color: #fff;
}
.scroll {
color: inherit;
text-decoration: none;
}
/* --------------------------- NAVIGATION --------------------------- */
header {
position: fixed;
z-index: 10;
width: 100%;
height: 88px;
background-color: #eeeeee;
margin: 0px;
}
.navcontainer {
width: 960px;
margin: 0 auto;
height: 88px;
}
.navcontainer:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.navlinks {
float: right;
margin-right: 10px;
padding-top: 28px;
}
ul li {
text-transform: uppercase;
font-size: 12px;
display: inline;
color: #1b1b1b;
margin-left: 40px;
}
ul li a {
color: inherit;
text-decoration: none;
}
ul li a:hover {
border-bottom: 2px solid #f98c0b;
padding-bottom:4px;
}
.logo {
float: left;
margin: 0 auto;
padding: 0px;
height: 150px;
width: 150px;
}
/* --------------------------- PRICING --------------------------- */
.price {
font-size: 60px;
text-align: center;
margin: 30px 50px 10px 50px;
border-radius: 50%;
width: 200px;
height: 200px;
border: 2px solid #f98c0b;
}
/* --------------------------- FLOWCHART --------------------------- */
.flowbox {
text-align: center;
color: #fff;
width: 260px;
border: 2px solid #f98c0b;
margin: auto;
padding: 20px;
}
.flowbox.right {
float: right;
display: inline;
}
.flowbox.rounded {
width: 160px;
border-radius: 50%;
}
.flowline {
font-size: 0;
width: 3px;
height: 20px;
background-color: #3b3b3b;
margin: auto;
}
/* --------------------------- SLIDER --------------------------- */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
padding: 0;
margin: 0;
}
.rslides li:first-child {
position: relative;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
margin-bottom: 20px;
}