San Jose Services Wireframe

Developer
Matt Shull
Size
5,314 Kb
Views
18,216
  1. San Jose Services Wireframe Previews
  2. San Jose Services Wireframe HTML Codes
  3. San Jose Services Wireframe CSS Codes

How do I make an san jose services wireframe?

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

San Jose Services Wireframe Previews
IQ Test

San Jose Services Wireframe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>San Jose Services Wireframe</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> <section> <img style="width:100%;" src="http://content.screencast.com/users/derekshull/folders/Jing/media/7ea62cd1-2d25-446a-92aa-e4a47f254ef1/2015-04-14_1200.png">
</section>
<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="#">San Jose</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>Hotels</li> <li>Restaurants</li> <li>Activites</li> <li>Events</li> <li>Maps & More</li> <li> <input type="text" placeholder="Search"> </li> </ul> </div><!-- /.navbar-collapse --> </div>
</div>
<header class="lightgray">
</header>
<section id="breadcrumbs" class="clearfix"> <span class="pull-left">Home > Interior Page</span> <span class="pull-right">Share Tools</span>
</section>
<div class="clearfix"> <section id="sidebar" class="col-md-2"> <ul class="hidden-sm hidden-xs"> <li style="font-size:18px;">Meeting Spaces</li> <li style="font-size:18px;">Partner Hotels</li> <li style="font-size:18px;">Contact Sales</li> <li style="font-size:18px;">Quick Guides</li> <li style="font-size:18px;">Services</li> <ul style="margin-top:-20px; margin-left:10px;"> <li>&bull; Food & Beverage Services</li> <li>&bull; Destination Services</li> <li>&bull; Vistor Services</li> <li>&bull; Tech Services</li> </ul> <li style="font-size:18px;">Convention Calendar</li> <li class="addBorders hidden-xs hidden-sm text-center" style="font-size:24px;">Submit RFP</li> <li class="addBorders hidden-xs hidden-sm text-center" style="font-size:24px;">Meeting Planning Toolkit</li> <li class="addBorders hidden-xs hidden-sm text-center" style="font-size:24px;">Destination Services Toolkit</li> <li class="addBorders hidden-xs hidden-sm text-center" style="padding:70px 0px;">Ad</li> <li class="addBorders hidden-xs hidden-sm text-center">Weather Widget</li> </ul> <section class="hidden-md hidden-lg text-center"> <select> <option>Link</option> <option>Link</option> <option>Link</option> <option>Link</option> </select> </section> </section> <section id="contentArea" class="col-md-10" style="max-width: 1400px;"> <div class="clearfix" style="margin-bottom:15px;"> <h1 class="pull-left">Services</h1> </div> <div class="contentText">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words.</div> <div class="clearfix" style="margin-top:50px;"> <div class="col-md-6"> <div class="video">Meeting Toolkit Photo <div class="lowerThird">Meeting Toolkit</div> </div> </div> <div class="col-md-6"> <div class="video">Destination Toolkit Photo <div class="lowerThird">Destination Toolkit</div> </div> </div> </div> </section>
</div>
<section class="text-center hidden-md hidden-lg"> <div class="mobileSidebar">Submit RFP</div> <div class="mobileSidebar">Meeting Planning Toolkit</div> <div class="mobileSidebar">Destination Services Toolkit</div>
</section>
<section id="prefooter"> Events / Visitors Guide / Dining Guide
</section>
<section id="mobileSecondaryNav" class="hidden-lg hidden-md hidden-sm"> <ul id="secondaryNav"> <li>Meetings</li> <li>Media</li> <li>San Jose Theaters</li> <li>Film Office</li> </ul>
</section>
<section id="banner" class="darkgray"></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>

San Jose Services Wireframe - 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 { width: 200px; height:75px; text-align:center; font-size:20px; color:white; display:inline-block; vertical-align:top;
}
#logo:before { content:"Logo"; vertical-align: -75%;
}
#searchbox { position:absolute; right:20px; top:0px;
}
#navWrap { display:inline-block;
}
.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: 100%; text-align:left;
}
header { height:250px; position:relative;
}
header > h2 { position:relative; top:75%;
}
.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;
}
#secondaryNav > li { margin:0px 20px; padding:0px 10px;
}
#mobileSecondaryNav { padding:20px 0px; font-size:16px;
}
#primaryNav { margin-top:25px;
}
#primaryNav > li { margin:0px 20px; padding:0px 10px; font-size:18px;
}
.alert-danger a { color: #a94442; font-weight:700; outline:0;
}
.lead { color: #323232; line-height:40px;
}
.promo > div { height: 170px; font-size:18px; color:white; text-align:center;
}
.promo > div:before { content: "Promo Photo"; vertical-align:-250%;
}
footer { height:250px; font-size:18px; text-align:center;
}
footer:before { content: "Footer"; vertical-align:-400%;
}
.mb25 { margin-bottom:25px;
}
@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; }
}
.utrip { height:200px; width:100%; text-align:center;
}
.utrip:before { content:"Utrip Promo"; position:relative; top:50%; font-size:16px; color:white;
}
.eventImage { margin:0 auto; width:100%; display:inline-block !important; overflow:hidden;
}
.hideImage500 { display:none !important;
}
@media (min-width: 500px) { .eventImage { width:49%; display:inline-block !important; } .hideImage500 { display:inline-block; }
}
@media (min-width: 992px) { .eventImage { width:33%; display:inline-block !important; }
}
#banner { height:100px; text-align:center;
}
#banner:before { content:"Banner Ad"; position:relative; top:50%; font-size:16px; color:white;
}
.parallax [class*="bg__"] { position: relative; text-indent: -9999px; background-attachment: fixed; background-position: center center; background-size: cover; padding:50px 0px;
}
.parallax .bg__foo { background-image: url(http://www.latviansongfest2015.org/wp-content/uploads/2014/10/san-jose-usa-01.jpg);
}
.parallax .capture { width: 80%; margin:0 auto; padding: 1em; text-indent: 0; background: rgba(243, 243, 243, 0.8); box-shadow: 0 1px 0.125em #333;
}
.promoImage { display:inline-block; width:100%;
}
@media (min-width: 992px) { .promoImage { width:49%; display:inline-block !important; }
}
.socialIcons { padding:10px 100px; background:gray; color:white; font-size:20px; position:absolute; right:20px; top:52px;
}
.mobilesocialIcons { padding:10px; background:gray; color:white; font-size:20px; text-align:center;
}
#bookingWidget { font-size:16px; padding:10px 0px; text-align:center;
}
#breadcrumbs { color:black; border-top:1px solid black; border-bottom:1px solid black; font-size:16px; padding:10px 50px;
}
#prefooter { font-size:16px; text-align:center; padding:10px 0px; border-top:1px solid black; border-bottom:1px solid black;
}
#sidebar { margin:15px 0px; padding:0;
}
#sidebar ul { list-style: none; padding:10px 0px 10px 10px; font-size:16px;
}
#sidebar > ul { border:1px solid black; max-width:200px;
}
#sidebar > ul > li { margin-bottom:10px;
}
.addBorders { border-top:1px solid black; padding:10px 0px; margin:0 !important;
}
.mobileSidebar { display:inline-block; padding:10px; border:1px solid black;
}
@media (max-width:767px) { #sidebar { border:0px solid black; width:100%; margin:15px 0px 20px 0px; } #sidebar ul { list-style: none; padding:10px 0px 0px 0px; text-align:center; font-size:16px; } #sidebar li { margin-bottom:0px; display:inline-block; padding:0px 5px; } .addBorders { border:1px solid black; padding:10px; margin:0 !important; }
}
select { margin:0 auto; padding: 5px 90px; font-size: 20px;
}
#contentArea { margin-bottom:150px;
}
.contentText { font-size:16px; line-height:30px;
}
.video { content:'Video'; background:gray; text-align:center; color:white; height: 200px; font-size:18px; margin-bottom:10px; position:relative;
}
.lowerThird { background:lightgray; color:black; left:0px; bottom:0px; position:absolute; width:100%; padding:5px 0px;
}
San Jose Services Wireframe - Script Codes
San Jose Services Wireframe - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 5,314 Kb
Views 18,216
Do you need developer help for San Jose Services Wireframe?

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
Shopping List Example
San Jose Business Listings
Angular 2-way Data Binding Example
CSS Only Parallax
Template Style Prototype
List Animation
AngularJS Dropdown Menu
Tri-Cities Interior Wireframe
A Pen by Matt Shull
Inline vs Inline Block vs Block
Create amazing marketing copy 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!