CSS Docs Index:

Container Markup

For a fixed width content area (max-width: 1700px wide on large screens, 1110px on smaller screens):

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<div class="post-content">
				
				[Content]
				
			</div>
		</div>
	</div>
</div>

For a full width content area with top and bottom padding, wrap in .content-block:

<div class="content-block">
</div>

Typography: Sizing

.super

.mega

.alpha

.beta

.gamma

.delta

.zeta

.theta

.eta

.super.serif-heading

.mega.serif-heading

.alpha.serif-heading

.beta.serif-heading

.gamma.serif-heading

.delta.serif-heading

.zeta.serif-heading

.theta.serif-heading

.eta.serif-heading

Typography: Styling and Positioning

Italics

.delta.em.serif

or
<em>Italic text</em>

Bold

.delta.bo

or
<strong>Bold Text</strong>

Alignment (bootstrap classes)

	<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>					

Text Transform (bootstrap classes)

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Typography: Headings

"Line Around"

On

New York City

Physique Boutique

Physique Boutique

<h4 class="line-around"><span class="line-around-inner">On</span><span class="line-around-dots"></span></h4>

<h4 class="line-around"><span class="line-around-inner">New York City</span><span class="line-around-dots"></span></h4>

<h4 class="line-around super serif-heading text-uppercase text-center"><span class="line-around-inner">Physique Boutique</span><span class="line-around-dots"></span></h4>

<h4 class="line-around line-around-left super serif-heading text-uppercase text-center"><span class="line-around-inner">Physique Boutique</span><span class="line-around-dots"></span></h4>

"Line Around" on a background

On

New York City

Physique Boutique

<div class="content-block bg-tan">		
	<div class="container-fluid">
		<div class="col-xs-12">
			<h4 class="line-around"><span class="line-around-inner bg-tan">On</span><span class="line-around-dots"></span></h4>
			
			<h4 class="line-around"><span class="line-around-inner bg-tan">New York City</span><span class="line-around-dots"></span></h4>
			
			<h4 class="line-around super serif-heading text-uppercase text-center"><span class="line-around-inner bg-tan">Physique Boutique</span><span class="line-around-dots"></span></h4>		
		</div>			
	</div>
</div>

"Line Around" with Ghost Number

New York City

Locations

infony@physique57.com
<div class="content-block bg-gray">		
	<div class="container-fluid">
		<div class="col-xs-12 text-center">
			<div class="line-around"><span class="line-around-inner bg-gray">New York City</span><span class="line-around-dots"></span></div>
			<div class="pr text-center ghost-number-4">
				<h2 class="pt0 alpha mb3 serif-heading text-uppercase">Locations</h2>
				
				<div class="em serif-heading eta">infony@physique57.com</div>
				<div class="ghost-number">
				</div>
			</div>
						
		</div>			
	</div>
</div>

"Line Under"

Work Hard, Barre Hard

Celebrate yourself and your body
<div class="content-block bg-tan">		
	<div class="container-fluid text-center">
		<h4 class="dot-line-under small-caps mb0 eta c-brown">Work Hard, Barre Hard<span class="line"></span></h4>
		<i class="serif">Celebrate yourself and your body</i>	
	</div>
</div>

"Line Under" with Ghost Number

Work Hard, Barre Hard

Celebrate yourself and your body
<div class="content-block bg-tan">		
	<div class="container-fluid text-center">
		<div class="table-mob">
			<div class="table-cell ghost-number ghost-number-1">
				<h4 class="dot-line-under small-caps mb0 eta c-brown">Work Hard, Barre Hard<span class="line"></span></h4>
				<i class="serif">Celebrate yourself and your body</i>			
			</div>
		</div>
	</div>
</div>

Spacing

Spacing classes with a scale in multiples of 12px, up to 78px (.mt6h, .mb6h, .pt6h, .pb6h, i.e. 6.5 * 12)

.padding-full adds 20px of top/right/bottom/left padding on desktop, 10px of padding on mobile
.padding-side adds 20px of right/left padding on desktop, 10px of padding on mobile
.mth {margin-top: 6px}
.pth {padding-top: 6px}
.mbh {margin-bottom: 6px}
.pbh {padding-bottom: 6px}
.mt1 {margin-top: 12px}
.mt1h {margin-top: 18px}

.pt1 {padding-top: 12px}
.pt1h {padding-top: 18px}

.mb1 {margin-bottom: 12px}
.mb1h {margin-bottom: 18px}

.pb1 {padding-bottom: 12px}
.pb1h {padding-bottom: 18px}
.mt2 {margin-top: 24px}
.mt2h {margin-top: 30px}

.pt2 {padding-top: 24px}
.pt2h {padding-top: 30px}

.mb2 {margin-bottom: 24px}
.mb2h {margin-bottom: 30px}

.pb2 {padding-bottom: 24px}
.pb2h {padding-bottom: 30px}

Content Block

Will create a block with 60px top and bottom padding on desktop, 36px on mobile.

<div class="content-block bg-tan">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h2 class="mega serif-heading content-block-header caps text-center">Physique Boutique</h2>
			</div>
		</div> <!-- row -->
	</div> <!-- container -->
</div> <!-- content-block -->

Physique Boutique

Buttons

Use PHP <?php echo p57_btn($href, $text); ?> to generate button code.

<a href="" class="button">
	Get started with online workouts
	<div class="border top left"></div>
	<div class="border top right"></div>
	<div class="border bottom left"></div>
	<div class="border bottom right"></div>
</a>
Get started with online workouts

Two Column

Use .rtl class on .two-col > .table to make the text column appear first on desktop

Physique 57 is changing the fitness industry. Our proven barre-based workout uses intervals to rapidly transform your body. Our signature class incorporates cardio, strength training, stretching, and recovery for a 57-minute workout that improves your flexibility and endurance while strengthening and sculpting your muscles.

Our classes range from beginning to advanced and each is structured to maximize every minute and move with our unique choreography and expert instructors

Work Hard, Barre Hard

Celebrate yourself and your body

Physique 57 is changing the fitness industry. Our proven barre-based workout uses intervals to rapidly transform your body. Our signature class incorporates cardio, strength training, stretching, and recovery for a 57-minute workout that improves your flexibility and endurance while strengthening and sculpting your muscles.

Our classes range from beginning to advanced and each is structured to maximize every minute and move with our unique choreography and expert instructors

Work Hard, Barre Hard

Celebrate yourself and your body
<div class="two-col bg-tan col-slide left">
	<div class="table w100">
	
		<div class="col-slide-img table-cell" style="background-image: url(assets/images/homeslide1.jpg)">	
			<div class="col-slide-overlay closed">
				<p>Physique 57 is changing the fitness industry. Our proven barre-based workout uses intervals to rapidly transform your body. Our signature class incorporates cardio, strength training, stretching, and recovery for a 57-minute workout that improves your flexibility and endurance while strengthening and sculpting your muscles.</p>
				
				<p>Our classes range from beginning to advanced and each is structured to maximize every minute and move with our unique choreography and expert instructors</p>
			
				<div class="col-slide-tab closed"><a class=""><span class="closed delta border-icon icon-plus"></span></a></div>
		
			</div>
		</div>


		<div class="table-cell col-slide-text">	

			<div class="content-block">		

					<div class="table-mob w100">
						<div class="table-cell">
							<div class="table-mob w100">

								<div class="table-cell ghost-number ghost-number-1">
									<div class="col-slide-text-inner">
	
										<h4 class="dot-line-under small-caps mb0 eta c-brown">Work Hard, Barre Hard<span class="line"></span></h4>
										<i class="serif">Celebrate yourself and your body</i>
									</div>																
								</div>
								
							</div>
							
							<div class="mt4">
								<?php echo p57_btn("", "Book a Class"); ?>
							</div>
						</div>
					</div>
			</div>
						
		</div>
		
	</div>
</div>

<div class="two-col bg-tan col-slide right">
	<div class="table w100 rtl">
	
		<div class="col-slide-img table-cell" style="background-image: url(assets/images/homeslide1.jpg)">	
			<div class="col-slide-overlay closed">
				<p>Physique 57 is changing the fitness industry. Our proven barre-based workout uses intervals to rapidly transform your body. Our signature class incorporates cardio, strength training, stretching, and recovery for a 57-minute workout that improves your flexibility and endurance while strengthening and sculpting your muscles.</p>
				
				<p>Our classes range from beginning to advanced and each is structured to maximize every minute and move with our unique choreography and expert instructors</p>
			
				<div class="col-slide-tab closed"><a class=""><span class="closed delta border-icon icon-plus"></span></a></div>
		
			</div>
		</div>


		<div class="table-cell col-slide-text">	

			<div class="content-block">		

					<div class="table-mob w100">
						<div class="table-cell">
							<div class="table-mob w100">

								<div class="table-cell ghost-number ghost-number-1">
									<div class="col-slide-text-inner">
										<h4 class="dot-line-under small-caps mb0 eta c-brown">Work Hard, Barre Hard<span class="line"></span></h4>
										<i class="serif">Celebrate yourself and your body</i>
									</div>
								</div>							
							</div>

							<div class="mt4">
								<?php echo p57_btn("", "Book a Class"); ?>
							</div>
						</div>
					</div>
			</div>
						
		</div>
		
	</div>
</div>

Image Overlay

Image overlay 4 column

"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
- Betty, Long Island NY

"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
- Betty, Long Island NY

"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
- Betty, Long Island NY

"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
- Betty, Long Island NY

<div class="container-fluid">
	<div class="row four-col">
		<div class="col-sm-6 col-md-3 img-overlay-wrap">
			<div class="img-overlay-bg" style="background-image: url(assets/images/overlay-bg.jpg)">
				<div class="img-overlay-text-wrap">
					<div class="img-overlay-text small">
						<p>"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
						<br/>
		<i>- Betty, Long Island NY</i></p>				
					</div>
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-3 img-overlay-wrap">
			<div class="img-overlay-bg" style="background-image: url(assets/images/overlay-bg.jpg)">
				<div class="img-overlay-text-wrap">
					<div class="img-overlay-text small">
						<p>"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
						<br/>
		<i>- Betty, Long Island NY</i></p>				
					</div>
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-3 img-overlay-wrap">
			<div class="img-overlay-bg" style="background-image: url(/assets/images/overlay-bg.jpg)">
				<div class="img-overlay-text-wrap">
					<div class="img-overlay-text small">
						<p>"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
						<br/>
		<i>- Betty, Long Island NY</i></p>			
					</div>
				</div>
			</div>
		</div>
	
		<div class="col-sm-6 col-md-3 img-overlay-wrap">
			<div class="img-overlay-bg" style="background-image: url(/assets/images/overlay-bg.jpg)">
				<div class="img-overlay-text-wrap">
					<div class="img-overlay-text small">
						<p>"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
						<br/>
		<i>- Betty, Long Island NY</i></p>				
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Image overlay 2 column

"It tones my butt, thighs and abs like no other workout."
- Betty, Long Island NY

"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
- Betty, Long Island NY

<div class="row image-overlay-2-col-wrap">

	<div class="col-sm-6 img-overlay-item testimonial">
		<div class="img-overlay-bg" style="background-image: url(assets/images/overlay-bg.jpg)">
			<div class="img-overlay-text-wrap">
				<div class="img-overlay-text small">
					<p>"It tones my butt, thighs and abs like no other workout."
					<br/>
	<i>- Betty, Long Island NY</i></p>				
				</div>
			</div>
		</div>
	</div>

	<div class="col-sm-6 img-overlay-item testimonial">
		<div class="img-overlay-bg" style="background-image: url(assets/images/overlay-bg.jpg)">
			<div class="img-overlay-text-wrap">
				<div class="img-overlay-text small">
					<p>"Attending a Physique 57 class means pushing your limits and opening yourself up to change. like this."
					<br/>
	<i>- Betty, Long Island NY</i></p>				
				</div>
			</div>
		</div>
	</div>

</div>

Right/Left Image (before/after)

Work Hard, Barre Hard

After slowly gaining weight over the course of a few years, Amy decided it was time to make a change. Amy wanted to fit back into her "skinny" jeans. What she accomplished was so much more.

After a few years of no real exercise to speak of, I realized that I was slowly gaining weight. After buying one size up in pants...

From New York, NY / Age: 29 / Height 5’5” / Weight before: 130 / Weight after: 120 / Pounds lost: 10








VIDEOS ON DEMAND

Results-oriented workouts on your schedule
Stream A Workout

PHYSIQUE BOUTIQUE

Get outfitted for success
Shop

SUCCESS STORIES

Results in as few as 8 workouts
Read More