SPP Mainpage

Developer
Matt Shull
Size
4,446 Kb
Views
18,216
  1. SPP Mainpage Previews
  2. SPP Mainpage HTML Codes
  3. SPP Mainpage CSS Codes

How do I make an spp mainpage?

What is a spp mainpage? How do you make a spp mainpage? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

SPP Mainpage Previews
IQ Test

SPP Mainpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SPP Mainpage</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="desktopNav" class="hidden-xs"> <div id="socialIcons">Social Icons</div> <div id="logo" class="gray"></div> <ul id="secondaryNav"> <li>About Us</li> <li>Organizational Groups</li> <li>Engineering</li> <li>Compliance</li> <li> <input type="text" placeholder="Search"> </li> </ul> <ul id="primaryNav"> <li>Stakeholder Center</li> <li>Markets and Operations</li> <li>Regional Entity</li> <li>Events</li> </ul>
</nav>
<div class="navbar navbar-default hidden-lg hidden-md hidden-sm"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Southwest Power Pool</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <input type="text" placeholder="Search"> </li> <li>Stakeholder Center</li> <li>Events</li> <li>Markets and Operations</li> <li>Regional Entity</li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid -->
</div>
<header class="lightgray block"> <div id="headerText" class="centered"> <h2 class="featurette-heading text-center">Southwest Power Pool</h2> <div class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div>
</header>
<section id="contentArea" class="container mb25"> <div class="alert alert-danger text-center" role="alert">This is an example alert. For more information please visit <a href="#">our support page</a>.</div> <div class="clearfix"> <div class="col-md-4"> <div class="gray text-center" style="height:300px; font-size:20px; color:white; margin-bottom:20px;">Heat Map Image</div> </div> <div class="col-md-4"> <div class="gray text-center" style="height:300px; font-size:20px; color:white; margin-bottom:20px;">Generation Mix Image</div> </div> <div class="col-md-4"> <div class="gray text-center" style="height:300px; font-size:20px; color:white; margin-bottom:20px;">Forecast vs Actual Image</div> </div> <div id="copyText" class="lead col-md-12"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div>
</section>
<section id="eventsSection" class="container">Events</section>
<section id="promoArea" class="container clearfix"> <div class="col-md-4 col-xs-12 col-xxs-12 promo mb25"><div class="gray">Organizational Groups</div></div> <div class="col-md-4 col-xs-12 col-xxs-12 promo mb25"><div class="gray">Documents</div></div> <div class="col-md-4 col-xs-12 col-xxs-12 promo mb25"><div class="gray">News Archives</div></div>
</section>
<section id="mobileSecondaryNav" class="hidden-lg hidden-md hidden-sm"> <ul id="secondaryNav"> <li>About Us</li> <li>Organizational Groups</li> <li>Engineering</li> <li>Compliance</li> </ul>
</section>
<footer class="lightgray">
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js'></script>
</body>
</html>

SPP Mainpage - Script Codes CSS Codes

.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;
}
@media (max-width: 384px) { .col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11 { float: left; } .col-xxs-1 { width: 8.333333333333332%; } .col-xxs-2 { width: 16.666666666666664%; } .col-xxs-3 { width: 25%; } .col-xxs-4 { width: 33.33333333333333%; } .col-xxs-5 { width: 41.66666666666667%; } .col-xxs-6 { width: 50%; } .col-xxs-7 { width: 58.333333333333336%; } .col-xxs-8 { width: 66.66666666666666%; } .col-xxs-9 { width: 75%; } .col-xxs-10 { width: 83.33333333333334%; } .col-xxs-11 { width: 91.66666666666666%; } .col-xxs-12 { width: 100%; } .col-xxs-push-1 { left: 8.333333333333332%; } .col-xxs-push-2 { left: 16.666666666666664%; } .col-xxs-push-3 { left: 25%; } .col-xss-push-4 { left: 33.33333333333333%; } .col-xxs-push-5 { left: 41.66666666666667%; } .col-xxs-push-6 { left: 50%; } .col-xxs-push-7 { left: 58.333333333333336%; } .col-xxs-push-8 { left: 66.66666666666666%; } .col-xxs-push-9 { left: 75%; } .col-xxs-push-10 { left: 83.33333333333334%; } .col-xxs-push-11 { left: 91.66666666666666%; } .col-xxs-pull-1 { right: 8.333333333333332%; } .col-xxs-pull-2 { right: 16.666666666666664%; } .col-xxs-pull-3 { right: 25%; } .col-xxs-pull-4 { right: 33.33333333333333%; } .col-xxs-pull-5 { right: 41.66666666666667%; } .col-xxs-pull-6 { right: 50%; } .col-xxs-pull-7 { right: 58.333333333333336%; } .col-xxs-pull-8 { right: 66.66666666666666%; } .col-xxs-pull-9 { right: 75%; } .col-xxs-pull-10 { right: 83.33333333333334%; } .col-xxs-pull-11 { right: 91.66666666666666%; } .col-xxs-offset-1 { margin-left: 8.333333333333332%; } .col-xxs-offset-2 { margin-left: 16.666666666666664%; } .col-xxs-offset-3 { margin-left: 25%; } .col-xxs-offset-4 { margin-left: 33.33333333333333%; } .col-xxs-offset-5 { margin-left: 41.66666666666667%; } .col-xxs-offset-6 { margin-left: 50%; } .col-xxs-offset-7 { margin-left: 58.333333333333336%; } .col-xxs-offset-8 { margin-left: 66.66666666666666%; } .col-xxs-offset-9 { margin-left: 75%; } .col-xxs-offset-10 { margin-left: 83.33333333333334%; } .col-xxs-offset-11 { margin-left: 91.66666666666666%; }
}
.hidden-xxs { display: block !important;
}
tr.hidden-xxs { display: table-row !important;
}
th.hidden-xxs,
td.hidden-xxs { display: table-cell !important;
}
@media (max-width: 384px) { .hidden-xxs { display: none !important; } tr.hidden-xxs { display: none !important; } th.hidden-xxs, td.hidden-xxs { display: none !important; }
}
@media (min-width: 385px) and (max-width: 767px) { .hidden-xxs.hidden-xs { display: none !important; } tr.hidden-xxs.hidden-xs { display: none !important; } th.hidden-xxs.hidden-xs, td.hidden-xxs.hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) { .hidden-xxs.hidden-sm { display: none !important; } tr.hidden-xxs.hidden-sm { display: none !important; } th.hidden-xxs.hidden-sm, td.hidden-xxs.hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) { .hidden-xxs.hidden-md { display: none !important; } tr.hidden-xxs.hidden-md { display: none !important; } th.hidden-xxs.hidden-md, td.hidden-xxs.hidden-md { display: none !important; }
}
@media (min-width: 1200px) { .hidden-xxs.hidden-lg { display: none !important; } tr.hidden-xxs.hidden-lg { display: none !important; } th.hidden-xxs.hidden-lg, td.hidden-xxs.hidden-lg { display: none !important; }
}
@media (max-width: 384px) { .hidden-xs.hidden-xxs { display: none !important; } tr.hidden-xs.hidden-xxs { display: none !important; } th.hidden-xs.hidden-xxs, td.hidden-xs.hidden-xxs { display: none !important; }
}
@media (max-width: 384px) { .hidden-sm.hidden-xxs { display: none !important; } tr.hidden-sm.hidden-xxs { display: none !important; } th.hidden-sm.hidden-xxs, td.hidden-sm.hidden-xxs { display: none !important; }
}
@media (max-width: 384px) { .hidden-md.hidden-xxs { display: none !important; } tr.hidden-md.hidden-xxs { display: none !important; } th.hidden-md.hidden-xxs, td.hidden-md.hidden-xxs { display: none !important; }
}
@media (max-width: 384px) { .hidden-lg.hidden-xxs { display: none !important; } tr.hidden-lg.hidden-xxs { display: none !important; } th.hidden-lg.hidden-xxs, td.hidden-lg.hidden-xxs { display: none !important; }
}
.gray { background: gray;
}
.lightgray { background: lightgray;
}
.darkgray { background: darkgray;
}
nav { position:relative; height:100px;
}
#logo { position:absolute; width: 200px; height:75px; left: 20px; display:none; text-align:center; font-size:20px; color:white;
}
#logo:before { content:"Logo"; vertical-align: -75%;
}
.navbar { margin:0; background:white;
}
/* This parent can be any width and height */
.block { text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before { content: ''; display: inline-block; height: 85%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered { display: inline-block; vertical-align: middle; width: 80%; text-align:left;
}
header { height:500px;
}
.featurette-heading { color:#5a5a5a;
}
.content { line-height:45px; font-size:16px;
}
#primaryNav, #secondaryNav { list-style:none; padding:0; margin:0;
}
#primaryNav > li, #secondaryNav > li { display:inline-block;
}
#secondaryNav { margin-top:10px; text-align:right;
}
#secondaryNav > li { margin:0px 20px; padding:0px 10px;
}
#mobileSecondaryNav { padding:20px 0px; font-size:16px;
}
#primaryNav { margin-top:15px; text-align:center;
}
#primaryNav > li { margin:0px 20px; padding:0px 10px; font-size:18px;
}
.alert-danger a { color: #a94442; font-weight:700; outline:0;
}
.lead { color: #5a5a5a; line-height:40px;
}
.promo > div { height: 170px; font-size:18px; color:white; text-align:center;
}
footer { height:250px; font-size:18px; text-align:center;
}
footer:before { content: "Footer"; vertical-align:-400%;
}
.mb25 { margin-bottom:25px;
}
@media (min-width: 1200px) { #logo { display:block; }
}
@media (min-width: 992px) { /* This parent can be any width and height */ .block { text-align: right; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 85%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 500px; text-align:left; margin-right:300px; }
}
@media (max-width: 767px) { .centered { width:96%; }
}
@media (max-width: 992px) { .nav-collapse, .nav-collapse.collapse { overflow: visible !important; height: auto !important; } .navbar .btn-navbar { display:none; } .dropdown-menu li:hover .sub-menu { display: block !important; visibility: visible !important; }
}
#socialIcons { background:gray; width:200px; text-align:center; color:white; font-size:18px; padding:10px 0px; position:absolute; right:0; bottom:0; display:none;
}
@media (min-width: 1200px) { #socialIcons { display:block; }
}
#eventsSection { background:lightgray; font-size:20px; text-align:center; padding:200px 0px; margin-bottom: 50px;
}
SPP Mainpage - Script Codes
SPP Mainpage - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 4,446 Kb
Views 18,216
Do you need developer help for SPP Mainpage?

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!

Matt Shull (derekshull) Script Codes
Name
San Jose Business Listings
Template Style Prototype
SPP Interior Page
A Pen by Matt Shull
List Animation
San Jose Services Wireframe
Inline vs Inline Block vs Block
CSS Animation Example
Angular 2-way Data Binding Example
Shopping List App
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!