Globals

Brand Colors

$color-black-pearl : #001524
$color-midnight-blue : #002139
$color-sea-blue : #046e8f
$color-sky-blue : #0091aa
$color-coral : #fb3640
$color-burnt-orange : #ff5900

Neutral Colors

$color-black : #010101
$color-white : #fff
$color-rangoon-green : #1b1b1b
$color-armadillo : #4a4a4a
$color-storm-dust : #616161
$color-aluminum : #9b9b9b
$color-iron : #d8d8d8
$color-solitude : #eaeff1
$color-gallery : #efefef

Fonts

$font-body: "Open Sans", sans-serif

$font-serif: "Roboto", sans-serif

$font-code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace

Typography

H1

Description:

Display an H1

Usage:

<h1>This is a headline</h1> or <div class="h1">This is a headline</div>

HTML Output:

<h1>This is a headline one</h1>

This is a headline one

H2

Description:

Display an H2

Usage:

<h2>This is a headline</h2> or <div class="h2">This is a headline</div>

HTML Output:

<h2>This is a headline two</h2>

This is a headline two

H3

Description:

Display an H3

Usage:

<h3>This is a headline</h3> or <div class="h3">This is a headline</div>

HTML Output:

<h3>This is a headline three</h3>

This is a headline three

H4

Description:

Display an H4

Usage:

<h4>This is a headline</h4> or <div class="h4">This is a headline</div>

HTML Output:

<h4>This is a headline four</h4>

This is a headline four

H5

Description:

Display an H5

Usage:

<h5>This is a headline</h5> or <div class="h5">This is a headline</div>

HTML Output:

<h5>This is a headline five</h5>
This is a headline five

H6

Description:

Display an H6

Usage:

<h6>This is a headline</h6> or <div class="h6">This is a headline</div>

HTML Output:

<h6>This is a headline six</h6>
This is a headline six

Subheading

Description:

To use, add the <code>subheading</code> class the wrapper element.

Usage:

<h3 class="subheading">This is a subheading</h3> or <div class="subheading">This is a subheading</div>

HTML Output:

<h3 class="subheading">
Praesent auctor tortor eu elit. Aenean ullamcorper sagittis justo vitae.</h3>

Praesent auctor tortor eu elit. Aenean ullamcorper sagittis justo vitae.

Lead

Description:

To use, add the <code>lead</code> class to the wrapper paragraph element.

Usage:

<p class="lead">This is a lead</p>

HTML Output:

<p class="lead">Lead body copy. Suspendisse ante ipsum, bibendum non varius nec, varius et urna. Donec sapien turpis, gravida aliquam cursus nec.</p>

Lead body copy. Suspendisse ante ipsum, bibendum non varius nec, varius et urna. Donec sapien turpis, gravida aliquam cursus nec.

Paragraph

Description:

This is a standard paragraph.

Usage:

<p>This is paragraph copy.</p>

HTML Output:

<p>Lorem ipsum dolor sit amet, mea purto etiam labore ne, ad qui prima timeam principes. An quo solet dissentiunt, etiam officiis eam at. His in vocent graecis, quaerendum disputationi ut vel. Nam ne percipit liberavisse, quod velit ludus sea te. Mazim lucilius probatus an mei, ei pri adhuc graecis euripidis.</p>

Lorem ipsum dolor sit amet, mea purto etiam labore ne, ad qui prima timeam principes. An quo solet dissentiunt, etiam officiis eam at. His in vocent graecis, quaerendum disputationi ut vel. Nam ne percipit liberavisse, quod velit ludus sea te. Mazim lucilius probatus an mei, ei pri adhuc graecis euripidis.

Blockquote

Description:

This is a blockquote.

Usage:

<blockquote>This is my quote.</blockquote>

HTML Output:

<blockquote>Donec sapien turpis, gravida aliquam cursus nec, lacinia sit amet nisl. Nam non facilisis metus. Proin volutpat id nisi sed.</blockquote>
Donec sapien turpis, gravida aliquam cursus nec, lacinia sit amet nisl. Nam non facilisis metus. Proin volutpat id nisi sed.

Icons

SVG

Description:

Display inline SVGs.

Parameters:

$args (required) Configuration arguments.

Arguments:

icon (required) The SVG icon file name. Default none

title (optional) The title of the icon. Default: none

desc (optional) The description of the icon. Default: none

Usage:

<?php wds_win_get_svg( array( 'icon' => 'facebook-square' ) ); ?>

HTML Output:

<svg class="icon icon-facebook-square icon-" aria-hidden="true" role="img"><title>facebook-square</title><use xlink:href="#icon-facebook-square"></use></svg>

Buttons

Default Button

Description:

Display a button. Usage can include anchors with a class of "button" and inputs with a type of button, reset, or submit.

Usage:

<button class="button" href="#">Click Me</button>

HTML Output:

<button class="button">Click Me</button>

Small Button

Description:

Display a small button. Can be combined with any of the button-type classes.

Usage:

<button class="button button-small" href="#">Click Me</button>

HTML Output:

<button class="button button-small">Small</button>

Large Button

Description:

Display a large button. Can be combined with any of the button-type classes.

Usage:

<button class="button button-large" href="#">Click Me</button>

HTML Output:

<button class="button button-large">Large</button>

Info Button

Description:

Display an info button. Can be combined with any of the button-size classes.

Usage:

<button class="button button-info" href="#">Click Me</button>

HTML Output:

<button class="button button-info">Info</button>

Info Alt Button

Description:

Display an alternative info button. Can be combined with any of the button-size classes.

Usage:

<button class="button button-info-alt" href="#">Click Me</button>

HTML Output:

<button class="button button-info-alt">Info Alt</button>

Call to Action Button

Description:

Display a call to action button. Can be combined with any of the button-size classes.

Usage:

<button class="button button-cta" href="#">Click Me</button>

HTML Output:

<button class="button button-cta">Call to Action</button>

Call to Action Alt Button

Description:

Display an alternative call to action button. Can be combined with any of the button-size classes.

Usage:

<button class="button button-cta-alt" href="#">Click Me</button>

HTML Output:

<button class="button button-cta-alt">CTA Alt</button>

Outline Button

Description:

Display an outline button. Can be combined with any of the button-size classes.

Usage:

<button class="button button-outline" href="#">Click Me</button>

HTML Output:

<button class="button button-outline">Outline</button>

Disabled Button

Description:

Display a disabled button. Can be combined with any of the button-size classes. Use either a class of "disabled" or the disabled attribute on a button element.

Usage:

<button class="button" disabled href="#">Click Me</button>

HTML Output:

<button class="button" disabled>Disabled</button>

Forms

Search Form

Description:

Display the search form.

Usage:

<?php get_search_form(); ?>

HTML Output:

<form method="get" class="search-form" action="https://training.atmosera.com/">
	<label for="search-field"><span class="screen-reader-text">To search this site, enter a search term</span></label>
	<input class="search-field" id="search-field" type="text" name="s" value="" aria-required="false" autocomplete="off" placeholder="Search" />
	<button>Submit</button>
</form>

Checkbox

Description:

Display a checkbox.

Usage:

<input type="checkbox" name="vehicle" value="Car" checked> This is a checkbox!

HTML Output:

<input type="checkbox" name="vehicle" value="Car" checked> This is a checkbox!
This is a checkbox!

Standard Input

Description:

Display an input.

Usage:

<input type="text" placeholder="Email">

HTML Output:

<input type="text" placeholder="Email">

Standard Input w/ Error

Description:

Display an input.

Usage:

<input type="text" placeholder="Email" class="error">

HTML Output:

<input type="text" placeholder="Email" class="error">

Dropdown

Description:

Display a dropdown with Chosen.js.

Usage:

<select>
			<option value="" disabled="disabled" selected="selected">Please select a name</option>
			<option value="1">One</option>
			<option value="2">Two</option>
		</select>

HTML Output:

<select>
			<option value="" disabled="disabled" selected="selected">Please select a name</option>
			<option value="1">One</option>
			<option value="2">Two</option>
		</select>

Grid Classes

Grid, XS Gutter

Description:

This grid is meant to be used with the five-column sections that span the Home and Parent Landing pages. Note that these are built on a five-column grid for that purpose.

Usage:

<div class="win-col-xs-1"></div>

HTML Output:

<div class="row-xs">
	
	<div class="row">
		<div class="win-col-xs-1">1</div>
		<div class="win-col-xs-4">4</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xs-2">2</div>
		<div class="win-col-xs-3">3</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xs-3">3</div>
		<div class="win-col-xs-2">2</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xs-4">4</div>
		<div class="win-col-xs-1">1</div>
	</div>

	
	<div class="row">
		<div class="win-col-xs-5">5</div>
	</div>

	</div>
1
4
2
3
3
2
4
1
5

Grid, Large Gutter

Description:

These grid classes use <code>win-col-lg-x</code>, which produces a grid with 47px gutters between columns. This grid is primarily used on the Parent Landing pages.

Usage:

<div class="win-col-lg-4"></div>

HTML Output:

<div class="row-lg">
	
	<div class="row">
		<div class="win-col-lg-1">1</div>
		<div class="win-col-lg-11">11</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-2">2</div>
		<div class="win-col-lg-10">10</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-3">3</div>
		<div class="win-col-lg-9">9</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-4">4</div>
		<div class="win-col-lg-8">8</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-5">5</div>
		<div class="win-col-lg-7">7</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-6">6</div>
		<div class="win-col-lg-6">6</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-7">7</div>
		<div class="win-col-lg-5">5</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-8">8</div>
		<div class="win-col-lg-4">4</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-9">9</div>
		<div class="win-col-lg-3">3</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-10">10</div>
		<div class="win-col-lg-2">2</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-lg-11">11</div>
		<div class="win-col-lg-1">1</div>
	</div>

	
	<div class="row">
		<div class="win-col-lg-12">12</div>
	</div>

	</div>
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

Grid, Extra Large Gutter

Description:

These grid classes use <code>win-col-xl-x</code>, which produces a grid with 100px gutters between columns. This grid is primarily used on the Blog and Home pages.

Usage:

<div class="win-col-xl-4"></div>

HTML Output:

<div class="row-xl">
	
	<div class="row">
		<div class="win-col-xl-1">1</div>
		<div class="win-col-xl-11">11</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-2">2</div>
		<div class="win-col-xl-10">10</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-3">3</div>
		<div class="win-col-xl-9">9</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-4">4</div>
		<div class="win-col-xl-8">8</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-5">5</div>
		<div class="win-col-xl-7">7</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-6">6</div>
		<div class="win-col-xl-6">6</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-7">7</div>
		<div class="win-col-xl-5">5</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-8">8</div>
		<div class="win-col-xl-4">4</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-9">9</div>
		<div class="win-col-xl-3">3</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-10">10</div>
		<div class="win-col-xl-2">2</div>
	</div>

	
	
	<div class="row">
		<div class="win-col-xl-11">11</div>
		<div class="win-col-xl-1">1</div>
	</div>

	
	<div class="row">
		<div class="win-col-xl-12">12</div>
	</div>

	</div>
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

Cards

Default Card

Description:

This card is used to display blog and case study posts.

HTML Output:

<article class="card-default  post-17023 post type-post status-publish format-standard has-post-thumbnail hentry category-azure-and-cloud-computing category-wintellect-blogs category-devcenter category-tutorials">

			<div class="post-thumbnail image-as-background" style="background-image: url('https://training.atmosera.com/wp-content/uploads/2021/12/eventgrid-1024x437.jpg');">
			<img width="365" height="242" src="https://training.atmosera.com/wp-content/uploads/2021/12/eventgrid-365x242.jpg" class="attachment-blog-card size-blog-card wp-post-image" alt="" loading="lazy" />		</div>
	
	<div class="card-text-wrap">
		<header class="entry-header">
			<div class="entry-meta">
				<span class="category">Blogs</span><span class="separator">|</span><span class="date">Dec 15, 2021</span>
			</div>

			<h2 class="entry-title h4"><a href="https://training.atmosera.com/azure-grids-hubs-busses-topics-and-queues-oh-my/" class="color-armadillo" data-webinarurl="https://training.atmosera.com/azure-grids-hubs-busses-topics-and-queues-oh-my/">Azure: Grids, Hubs, Busses, Topics, and Queues… Oh My!</a></h2>
		</header><!-- .entry-header -->

		<div class="entry-content">
			Messaging between application components and devices is why engineers invented computer networks. The ultimate computer network is the Internet, which has practically connected all the world’s devices to a single network where any one device can send a message to another device. For this reason, there are tons of solutions that provide messaging infrastructure to…	<div class="read-more-wrap">
		<a class="more-link color-coral" href="https://training.atmosera.com/azure-grids-hubs-busses-topics-and-queues-oh-my/" data-webinarurl="https://training.atmosera.com/azure-grids-hubs-busses-topics-and-queues-oh-my/">Read More<span class="arrow">→</span></a>
	</div>
			</div><!-- .entry-content -->
	</div><!-- .card-text-wrap -->
</article><!-- #post-## -->

Azure: Grids, Hubs, Busses, Topics, and Queues… Oh My!

Messaging between application components and devices is why engineers invented computer networks. The ultimate computer network is the Internet, which has practically connected all the world’s devices to a single network where any one device can send a message to another device. For this reason, there are tons of solutions that provide messaging infrastructure to…

Featured Blog Post Card

Description:

This card is used to display featured posts on the Blog page.

HTML Output:

<article class="card-blog-post-featured win-col-lg-8 post-1 post type-post status-publish format-standard hentry category-uncategorized tag-featured">
	
	<div class="card-text-wrap">
		<header class="entry-header">
			<div class="entry-meta">
				<span class="category">Featured</span><span class="separator">|</span><span class="date">Apr 21, 2017</span>
			</div>

			<h2 class="entry-title"><a href="https://training.atmosera.com/hello-world/">Hello world!</a></h2>
		</header><!-- .entry-header -->

		<div class="entry-content">
			Lorem ipsum dolor sit amet, pro cu verterem deterruisset, vidisse fastidii vel ei. Ne pri iudico audire omnesque. Te mollis suscipit sed, affert dolorem aliquando vix at. An pro accusam mentitum, propriae definitiones no qui. Ut summo voluptatibus vis. Ne veri suscipit usu. Nec posse consequat ne. Aeque offendit nam cu. Cu alii meis veritus…	<div class="read-more-wrap">
		<a class="more-link color-coral" href="https://training.atmosera.com/hello-world/" data-webinarurl="https://training.atmosera.com/hello-world/">Read More<span class="arrow">→</span></a>
	</div>
			</div><!-- .entry-content -->
	</div><!-- .card-text-wrap -->
</article><!-- #post-## -->

Hello world!

Lorem ipsum dolor sit amet, pro cu verterem deterruisset, vidisse fastidii vel ei. Ne pri iudico audire omnesque. Te mollis suscipit sed, affert dolorem aliquando vix at. An pro accusam mentitum, propriae definitiones no qui. Ut summo voluptatibus vis. Ne veri suscipit usu. Nec posse consequat ne. Aeque offendit nam cu. Cu alii meis veritus…

Single Class Card

Description:

Display a standard single-event Class Card.

Usage:

<?php echo wds_win_display_class_card(); ?>

HTML Output:

<div class="class-card background-white ">
	<div class="all-detail-helper">
		<div class="class-details-container">
			<h3 class="class-title background-white">Patterns </h3>
			<ul class="class-details post-">
			<li>
				<span class="class-type color-burnt-orange">Duration: </span>			</li>

		</div><!-- .class-details-container -->

					<div class="class-availability-type class-availability-typeNew">
				<div class="type-icon-group color-burnt-orange">
					<div class="type-icon">
						<svg class="icon icon-private-onsite icon-" aria-hidden="true" role="img"><title>Private Virtual Training</title><use xlink:href="#icon-private-onsite"></use></svg>					</div><!-- .type-icon -->

									<div class="type-icon">
						<svg class="icon icon-public-class icon-" aria-hidden="true" role="img"><title>Public Class</title><use xlink:href="#icon-public-class"></use></svg>					</div><!-- .type-icon -->
								</div><!-- .type-icon-group -->
			</div><!-- .class-availability-type -->
			</div><!-- .all-detail-helper -->

	<div class="class-buttons">
			<a href="https://training.atmosera.com/patterns/" class="button button-small learn-more">Course Info</a>
			<a href="https://training.atmosera.com/contact/?course_id=4" class="button button-small register button-cta">Request Quote</a>
	</div><!-- .class-buttons -->
</div><!-- .class-card -->

<!-- styles new pallete -->
<style>
	.all-detail-helper {
		background-color: #EBEBEB;
	}
	@media only screen and (min-width: 768px) {
		.all-detail-helper {
			background-color: transparent;
		}	
		.class-availability-typeNew {
				background-color: #EBEBEB;
		}
	}
	
</style>

Patterns

  • Duration:
.all-detail-helper { background-color: #EBEBEB; } @media only screen and (min-width: 768px) { .all-detail-helper { background-color: transparent; } .class-availability-typeNew { background-color: #EBEBEB; } }

Multi Class Card

Description:

Display a standard multi-event Class Card.

Usage:

<?php echo wds_win_display_class_card( array( 'type' => 'multi' ) ); ?>

HTML Output:

<div class="class-card background-white ">
	<div class="all-detail-helper">
		<div class="class-details-container">
			<h3 class="class-title background-white">Patterns </h3>
			<ul class="class-details post-">
			<li>
				<span class="class-type color-burnt-orange">Duration: </span>			</li>

		</div><!-- .class-details-container -->

					<div class="class-availability-type class-availability-typeNew">
				<div class="type-icon-group color-burnt-orange">
					<div class="type-icon">
						<svg class="icon icon-private-onsite icon-" aria-hidden="true" role="img"><title>Private Virtual Training</title><use xlink:href="#icon-private-onsite"></use></svg>					</div><!-- .type-icon -->

									<div class="type-icon">
						<svg class="icon icon-public-class icon-" aria-hidden="true" role="img"><title>Public Class</title><use xlink:href="#icon-public-class"></use></svg>					</div><!-- .type-icon -->
								</div><!-- .type-icon-group -->
			</div><!-- .class-availability-type -->
			</div><!-- .all-detail-helper -->

	<div class="class-buttons">
			<a href="https://training.atmosera.com/patterns/" class="button button-small learn-more">Course Info</a>
			<a href="https://training.atmosera.com/contact/?course_id=4" class="button button-small register button-cta">Request Quote</a>
	</div><!-- .class-buttons -->
</div><!-- .class-card -->

<!-- styles new pallete -->
<style>
	.all-detail-helper {
		background-color: #EBEBEB;
	}
	@media only screen and (min-width: 768px) {
		.all-detail-helper {
			background-color: transparent;
		}	
		.class-availability-typeNew {
				background-color: #EBEBEB;
		}
	}
	
</style>

Patterns

  • Duration:
.all-detail-helper { background-color: #EBEBEB; } @media only screen and (min-width: 768px) { .all-detail-helper { background-color: transparent; } .class-availability-typeNew { background-color: #EBEBEB; } }

Off-site Private Card

Description:

Display an Off-site Class Card.

Usage:

<?php echo wds_win_display_class_card( array( 'type' => 'offsite' ) ); ?>

HTML Output:

<div class="class-card background-white ">
	<div class="all-detail-helper">
		<div class="class-details-container">
			<h3 class="class-title background-white">Patterns </h3>
			<ul class="class-details post-">
			<li>
				<span class="class-type color-burnt-orange">Duration: </span>			</li>

		</div><!-- .class-details-container -->

					<div class="class-availability-type class-availability-typeNew">
				<div class="type-icon-group color-burnt-orange">
					<div class="type-icon">
						<svg class="icon icon-private-onsite icon-" aria-hidden="true" role="img"><title>Private Virtual Training</title><use xlink:href="#icon-private-onsite"></use></svg>					</div><!-- .type-icon -->

								</div><!-- .type-icon-group -->
			</div><!-- .class-availability-type -->
			</div><!-- .all-detail-helper -->

	<div class="class-buttons">
			<a href="https://training.atmosera.com/patterns/" class="button button-small learn-more">Course Info</a>
			<a href="https://training.atmosera.com/contact/?course_id=4" class="button button-small register button-cta">Request Quote</a>
	</div><!-- .class-buttons -->
</div><!-- .class-card -->

<!-- styles new pallete -->
<style>
	.all-detail-helper {
		background-color: #EBEBEB;
	}
	@media only screen and (min-width: 768px) {
		.all-detail-helper {
			background-color: transparent;
		}	
		.class-availability-typeNew {
				background-color: #EBEBEB;
		}
	}
	
</style>

Patterns

  • Duration:
.all-detail-helper { background-color: #EBEBEB; } @media only screen and (min-width: 768px) { .all-detail-helper { background-color: transparent; } .class-availability-typeNew { background-color: #EBEBEB; } }

Webinars Card

Description:

Display a Webinars Card.

Usage:

<?php echo wds_win_display_class_card( array( 'type' => 'webinar' ) ); ?>

HTML Output:

<div class="class-card background-white ">
	<div class="all-detail-helper">
		<div class="class-details-container">
			<h3 class="class-title background-white">Patterns </h3>
			<ul class="class-details post-">
			<li>
				<span class="class-type color-burnt-orange">Duration: </span>			</li>

		</div><!-- .class-details-container -->

			</div><!-- .all-detail-helper -->

	<div class="class-buttons">
			<a href="https://training.atmosera.com/patterns/" class="button button-small learn-more">Course Info</a>
			<a href="https://training.atmosera.com/contact/?course_id=4" class="button button-small register button-cta">Request Quote</a>
	</div><!-- .class-buttons -->
</div><!-- .class-card -->

<!-- styles new pallete -->
<style>
	.all-detail-helper {
		background-color: #EBEBEB;
	}
	@media only screen and (min-width: 768px) {
		.all-detail-helper {
			background-color: transparent;
		}	
		.class-availability-typeNew {
				background-color: #EBEBEB;
		}
	}
	
</style>

Patterns

  • Duration:
.all-detail-helper { background-color: #EBEBEB; } @media only screen and (min-width: 768px) { .all-detail-helper { background-color: transparent; } .class-availability-typeNew { background-color: #EBEBEB; } }

Heroes

Masthead

Description:

Display the homepage masthead

Usage:

<?php wds_win_display_masthead( array( 'type' => 'homepage', 'background-size' => 'xl-hero' ) ); ?>

HTML Output:

		<header class="masthead mastheadNew full-width color-white image-as-background" style="background-image: url(https://training.atmosera.com/wp-content/themes/wintellect/assets/images/masthead-placeholder.jpg);">
			<div class="flex-helper featured">
				<div class="masthead-content container row-1170 masthead-homepage">
					


		<div class="masthead-column-content">

			<section class="full-width">
				<div class="row-1170">
					<div class="row-xl">
						<div class="row">
							<div class="win-col-xl-12 consulting-column">

																		<a href="https://training.atmosera.com/software-developer-training/instructor-led-courses-schedule/"> 									<img width="300" height="300" src="https://training.atmosera.com/wp-content/uploads/2021/01/scedule-e1610135231241.png" class="img-responsive alignright" alt="" loading="lazy" />									</a>									


								<div class="masthead-precontent masthead-precontentNew">
															</div><!-- .masthead-precontent -->

							
							<h1 class="masthead-title color-white">
								Software Developer Training							</h1>

															<div class="masthead-subcontent">
									Turn your developers into superstars with Atmosera training!								</div><!-- .masthead-subcontent -->
							
																	<p>Atmosera offers both private developer training and public, virtual classes. Our instructors and content are the best of the best. We have trained thousands of developers worldwide and can provide your team with private custom training delivered virtually and will work directly with your team anywhere in the world.</p>
								
								</div><!-- .win-col-lg-6 -->
						</div><!-- .row -->
					</div><!-- .row-1170 -->
				</div><!-- .row-1170 -->
			</section><!-- .two-column-cta -->
		</div><!-- .masthead-column-content -->
		
		<!-- styles new pallete -->
		<style>
			.masthead-precontentNew	.button.button-cta {
				background-color: #FF7224;
				border-color: #FF7224;
				color: #FFFFFF;
			}
			.masthead-precontentNew .masthead .flex-helper .masthead-content hr {
				background-color: #FF7224;
			}
		</style>


	<!-- Floating Elements -->
	
		<div class="button-group">

			<a href="https://www.atmosera.com/software-development-services/" class="button button-large button-info">Consulting</a>

			<a href="" class="button button-large button-cloud">Cloud Managed Services</a>

			<a href="https://training.atmosera.com/" class="button button-large button-cta">Training</a>
		</div><!-- .button-group -->

					</div><!-- .masthead-content -->
			</div><!-- .flex-helper -->
		</header><!-- .masthead -->

		<!-- styles new pallete -->
		<style>
			.mastheadNew:after {
				background-color: #002375;
				mix-blend-mode: multiply;
				opacity: 0.7;
			}
			.mastheadNew .flex-helper .masthead-content hr {
				background-color: #FF7224 !important;
			}
			.mastheadNew .masthead-column-content p:last-child a {
				color: #FF7224;
			}
		</style>
	
.mastheadNew:after { background-color: #002375; mix-blend-mode: multiply; opacity: 0.7; } .mastheadNew .flex-helper .masthead-content hr { background-color: #FF7224 !important; } .mastheadNew .masthead-column-content p:last-child a { color: #FF7224; }

Standard Page

Description:

Display the page masthead

Usage:

<?php wds_win_display_masthead(); ?>

HTML Output:

		<header class="masthead mastheadNew full-width color-white image-as-background" style="background-image: url(https://training.atmosera.com/wp-content/themes/wintellect/assets/images/masthead-placeholder.jpg);">
			<div class="flex-helper featured">
				<div class="masthead-content container row-1170 masthead-page">
					


		<div class="masthead-column-content">

			<section class="full-width">
				<div class="row-1170">
					<div class="row-xl">
						<div class="row">
							<div class="win-col-xl-12 consulting-column">

									


								<div class="masthead-precontent masthead-precontentNew">
															</div><!-- .masthead-precontent -->

							
							<h1 class="masthead-title color-white">
								Patterns							</h1>

							
								
								</div><!-- .win-col-lg-6 -->
						</div><!-- .row -->
					</div><!-- .row-1170 -->
				</div><!-- .row-1170 -->
			</section><!-- .two-column-cta -->
		</div><!-- .masthead-column-content -->
		
		<!-- styles new pallete -->
		<style>
			.masthead-precontentNew	.button.button-cta {
				background-color: #FF7224;
				border-color: #FF7224;
				color: #FFFFFF;
			}
			.masthead-precontentNew .masthead .flex-helper .masthead-content hr {
				background-color: #FF7224;
			}
		</style>


	<!-- Floating Elements -->
					</div><!-- .masthead-content -->
			</div><!-- .flex-helper -->
		</header><!-- .masthead -->

		<!-- styles new pallete -->
		<style>
			.mastheadNew:after {
				background-color: #002375;
				mix-blend-mode: multiply;
				opacity: 0.7;
			}
			.mastheadNew .flex-helper .masthead-content hr {
				background-color: #FF7224 !important;
			}
			.mastheadNew .masthead-column-content p:last-child a {
				color: #FF7224;
			}
		</style>
	
.mastheadNew:after { background-color: #002375; mix-blend-mode: multiply; opacity: 0.7; } .mastheadNew .flex-helper .masthead-content hr { background-color: #FF7224 !important; } .mastheadNew .masthead-column-content p:last-child a { color: #FF7224; }

Single Class Page

Description:

Display the single class masthead

Usage:

<?php wds_win_display_masthead( array( 'type' => 'class' ) ); ?>

HTML Output:

		<header class="masthead mastheadNew full-width color-white image-as-background" style="background-image: url(https://training.atmosera.com/wp-content/themes/wintellect/assets/images/masthead-placeholder.jpg);">
			<div class="flex-helper featured">
				<div class="masthead-content container row-1170 masthead-class">
					


		<div class="masthead-column-content">

			<section class="full-width">
				<div class="row-1170">
					<div class="row-xl">
						<div class="row">
							<div class="win-col-xl-12 consulting-column">

									


								<div class="masthead-precontent masthead-precontentNew">
																										<div class="masthead-terms-list">
										<strong></strong><span class="class-type">Instructor-Led</span>									</div><!-- .masthead-terms-list -->

															</div><!-- .masthead-precontent -->

															<hr>
							
							<h1 class="masthead-title color-white">
								Patterns							</h1>

							
								
								</div><!-- .win-col-lg-6 -->
						</div><!-- .row -->
					</div><!-- .row-1170 -->
				</div><!-- .row-1170 -->
			</section><!-- .two-column-cta -->
		</div><!-- .masthead-column-content -->
		
		<!-- styles new pallete -->
		<style>
			.masthead-precontentNew	.button.button-cta {
				background-color: #FF7224;
				border-color: #FF7224;
				color: #FFFFFF;
			}
			.masthead-precontentNew .masthead .flex-helper .masthead-content hr {
				background-color: #FF7224;
			}
		</style>


	<!-- Floating Elements -->
					</div><!-- .masthead-content -->
			</div><!-- .flex-helper -->
		</header><!-- .masthead -->

		<!-- styles new pallete -->
		<style>
			.mastheadNew:after {
				background-color: #002375;
				mix-blend-mode: multiply;
				opacity: 0.7;
			}
			.mastheadNew .flex-helper .masthead-content hr {
				background-color: #FF7224 !important;
			}
			.mastheadNew .masthead-column-content p:last-child a {
				color: #FF7224;
			}
		</style>
	
.mastheadNew:after { background-color: #002375; mix-blend-mode: multiply; opacity: 0.7; } .mastheadNew .flex-helper .masthead-content hr { background-color: #FF7224 !important; } .mastheadNew .masthead-column-content p:last-child a { color: #FF7224; }

Standard Page

Description:

Display the page masthead

Usage:

<?php wds_win_display_masthead( array( 'type' => 'case-study', 'background-image' => get_post_meta( $post->ID, 'wds_casestudy_header_background_image' ) ) ); ?>