Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header class="masthead clear">
        <div class="centered">
            
            <div class="site-branding">
                <h1 class="site-title">Flexbox Demo: Card Layouts</h1>
              <p>Text from <a title="Office Ipsum" href="http://officeipsum.com/index.php">Office Ipsum</a> </p>
            </div><!-- .site-title -->
        </div><!-- .centered -->
    </header><!-- .masthead -->
    
    <main class="main-area">
        
        <div class="centered">

            <section class="cards">
                
                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://bigheartservices.com/wp-content/uploads/2017/06/ROBERT-MERCED-2.jpg" alt="Robert Merced">
                        </picture>
                        <div class="card-content">

                            <h2>Robert Merced</h2>
                            <p>Hello everyone, my name is Robert Merced and I am the President of Big Heart Home Care located in Tampa FL. A new facility providing Home & Community-Based Services for persons with disabilities. I have approximately 20 years of Management experience working with and caring for clients with different types of mental and physical disabilities. I have worked as a Facilities Director in various healthcare settings such as hospitals, nursing homes, private facilities and private homes. My highest priority is and has always been my clients physical and mental well-being as well as their safety. I always ensure that each and every one of my client’s individual and changing needs is met on a daily basis to accommodate their choices/preferences and optimize their quality of life.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://bigheartservices.com/wp-content/uploads/2017/07/Elena-Soto-VP.jpg" alt="Norwegian boller">
                        </picture>
                        <div class="card-content">
                            <h2>Elena Soto</h2>
                            <p>Elena Soto has been practicing in the Healthcare industry for approximately 26 years In a variety of settings.  She first started her career after completing her Year long Medical Assistant Certification and doing her internship as a Physical therapy assistant. Here she was hired full time following the Completion of  her internship as a result of her quality workmanship. Just over a year later Elena decided to Take a more challenging position where she could really use her skill set Of becoming a Medical Assistant. Working with Dr. Robert Kelter an Internal Medicine Physician she would put her schooling to work performing Electrocardiograms, pulmonary function testing, Phlebotomy, taking vital signs and More.</p>
                            <p>After being with Dr. Kelter for over several years she only exceeded and It opened a new vision to step into any duty head on. Tackling adversity and Learning almost all aspects of the medical field. Throughout the years Elena Has maintained in the medical field, from administrative to Clinical she sure has Her 26 years of experience well in balance, with many letters of recommendation from Current and former Physicians she has worked for. Elena now works as a physical therapy assistant and is a Children’s Book Author. Elena cares for people from the Bottom of her heart it’s why she’s never once changed professions. Her years of work Have been satisfying knowing she’s has helped so many people in so many ways.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://bigheartservices.com/wp-content/uploads/2017/06/MICHAEL-LERNER-2.jpg" alt="A dinosaur wearing an aluminium jacket">
                        </picture>
                        <div class="card-content">
                            <h2>Michael Lerner</h2>
                            <p>Michael is a single father of 3 adopted special needs children. He has completed over 120 hours of specialized training to learn how to handle different situations that may arise from fostering Special Needs Children and has earned recognition from the City of Cleveland, Ohio as being the Adoptive Family of the Year in 2011.

As a young teenager, Michael would walk to the neighborhood Nursing home and spend time with the elderly residents, helping them with everyday tasks that most take for granted. This included helping them to get dressed, take medications, walk the hallways for exercise, and assist them in socializing with other residents as well as playing the piano in the lobby for the residents’ entertainment.

As Michael got older, he started college to become an EMT/Paramedic. Michael soon joined the Military at the age of 20 and was taught many medical skills such as Assess for Airway Obstruction! Improve/Establish Airway Through Maneuvers. Remove Debris/Suction. Airway Adjuncts: Trauma Focused Individual Training; Cold weather Injury prevention; Heat injuries; Thoracic Trauma, Extremity Trauma; Triage; Field Dressings, Casualty Evacuation Operations, Preventative Medicine measures, First Aid for Adults and Children, Shock prevention, and First Aid for Burns.

Michael is currently certified for Adult and Children First aid, AED and CPR, Medication administration, and Supervision of Self-Medication, Knowledge of Blood-born Pathogen/HIV.

Michael finds great pleasure in knowing that any help he can provide, will provide a greater quality of life for the resident(s). </p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

                <article class="card">
                    <a href="#">
                        <picture class="thumbnail">
                            <img src="http://bigheartservices.com/wp-content/uploads/2017/06/Melba-Merced.jpg" alt="Group Home Backup Manager">
                        </picture>
                        <div class="card-content">
                            <h2>Melba Merced</h2>
                            <p>Melba Merced has always been a caring and loving person who thrives on other people’s success. She is the type of person that can always see the positive side of any situation. No matter what the circumstances are, Melba always seems to find a solution and end up with a positive outcome. With over 10 years of experience taking care of people of all age’s Melba has become a true professional in this industry.</p>
                        </div><!-- .card-content -->
                    </a>
                </article><!-- .card -->

            </section><!-- .cards -->
           
        </div><!-- .centered -->
        
    </main>
              
            
!

CSS

              
                /* Import the google web fonts you want to use */


@import url('https://fonts.googleapis.com/css?family=Comfortaa|Patua+One');

/* Card Based Layout - Base styles */

body {
	background: hsl(0, 0%, 90%);
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: red;
	font-family: 'Comfortaa', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
  font-family: 'Patua One', serif;
  letter-spacing: 2px;
}

h2 {
  font-size: 1rem;
  color: #007489;
}

p {
	margin-bottom: 1.5em;
  color: #898989;
}

b,
strong {
	font-weight: bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: ellipsis;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

.masthead {
	background-color: #005b75;
}

.masthead p, .masthead p a {
  color: white;
}

.site-title {
	color: white;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


.card {
	background: white;
	margin-bottom: 2em;	
}

.card a {
	color: black;
	text-decoration: none;
}

.card a:hover {
	box-shadow: 3px 3px 8px hsl(0, 0%, 80%);
}

.card-content {
	padding: 1.4em;
}

.card-content h2 {
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: bold;
}

.card-content p {
	font-size: 80%;
}

/* Flexbox stuff */

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}


              
            
!

JS

              
                
              
            
!
999px

Console