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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div id="uw-container">
	<div id="uw-container-inner">
		<header class="uw-thinstrip" role="banner">
			<div class="container"><a class="uw-patch" href="/" title="University of Washington Home">University of Washington</a> <a aria-hidden="true" class="uw-wordmark" href="/" tabindex="-1" title="University of Washington Home">University of Washington</a> </div>
			<div class="align-right">
				<nav class="uw-thin-strip-nav" role='navigation' aria-label='audience based'>
					<ul class="uw-thin-links">
						<li><a href="/utility-navigation/agents/" title="Agents" id="Agents">Agents</a>
							<li><a href="/utility-navigation/academic-partners/" title="Academic Partners" id="AcademicPartners">Academic Partners</a></li>
						</li>
					</ul>
				</nav>
			</div>
		</header>

		<!-- 		<nav id="dawgdrops" aria-label="Main menu" role="navigation">
			<div class="dawgdrops-inner container" role="application">
				<ul class="dawgdrops-nav">
					<li class="dawgdrops-item"><a href="/about/" class="dropdown-toggle" title="About" aria-controls="menu-About" aria-expanded="false" aria-haspopup="true" id="About">About</a>
						<ul role="group" id="menu-About" aria-labelledby="About" aria-expanded="false" class="dawgdrops-menu">
							<li class="dawgdrops-item"><a href="/about/why-choose-us/" title="Why Choose Us?" id="WhyChooseUs?">Why Choose Us?</a>
								<li class="dawgdrops-item"><a href="/about/locations/" title="Locations" id="Locations">Locations</a>
									<li class="dawgdrops-item"><a href="/about/instructors/" title="Instructors" id="Instructors">Instructors</a>
										<li class="dawgdrops-item"><a href="/about/staff/" title="Staff" id="Staff">Staff</a></li>
									</li>
								</li>
							</li>
						</ul>
						<li class="dawgdrops-item"><a href="/programs/" class="dropdown-toggle" title="Programs" aria-controls="menu-Programs" aria-expanded="false" aria-haspopup="true" id="Programs">Programs</a>
							<ul role="group" id="menu-Programs" aria-labelledby="Programs" aria-expanded="false"
							 class="dawgdrops-menu">
								<li class="dawgdrops-item"><a href="/programs/university-preparation/" title="University Preparation" id="UniversityPreparation">University Preparation</a>
									<li class="dawgdrops-item"><a href="/programs/business-certificates/" title="Business Certificates" id="BusinessCertificates">Business Certificates</a>
										<li class="dawgdrops-item"><a href="/programs/short-programs/" title="Short Programs" id="ShortPrograms">Short Programs</a>
											<li class="dawgdrops-item"><a href="/programs/study-abroad-at-the-uw/" title="Study Abroad at the UW" id="StudyAbroadattheUW">Study Abroad at the UW</a>
												<li class="dawgdrops-item"><a href="/programs/online-programs/" title="Online Programs" id="OnlinePrograms">Online Programs</a>
													<li class="dawgdrops-item"><a href="/programs/custom-programs/" title="Custom Programs" id="CustomPrograms">Custom Programs</a></li>
												</li>
											</li>
										</li>
									</li>
								</li>
							</ul>
							<li class="dawgdrops-item"><a href="/life-at-uw/" class="dropdown-toggle" title="Life At UW" aria-controls="menu-LifeAtUW" aria-expanded="false" aria-haspopup="true" id="LifeAtUW">Life At UW</a>
								<ul role="group" id="menu-LifeAtUW" aria-labelledby="LifeAtUW" aria-expanded="false"
								 class="dawgdrops-menu">
									<li class="dawgdrops-item"><a href="/life-at-uw/arrival-orientation/" title="Arrival &amp; Orientation" id="Arrival&amp;Orientation">Arrival &amp; Orientation</a>
										<li class="dawgdrops-item"><a href="/life-at-uw/housing/" title="Housing" id="Housing">Housing</a>
											<li class="dawgdrops-item"><a href="/life-at-uw/student-activities/" title="Student Activities" id="StudentActivities">Student Activities</a>
												<li class="dawgdrops-item"><a href="/life-at-uw/seattle-the-pacific-northwest/" title="Seattle &amp; the Pacific Northwest" id="Seattle&amp;thePacificNorthwest">Seattle &amp; the Pacific Northwest</a>
													<li class="dawgdrops-item"><a href="/life-at-uw/what-our-students-say/" title="What Our Students Say" id="WhatOurStudentsSay">What Our Students Say</a></li>
												</li>
											</li>
										</li>
									</li>
								</ul>
								<li class="dawgdrops-item"><a href="/student-services/" class="dropdown-toggle" title="Student Services" aria-controls="menu-StudentServices" aria-expanded="false" aria-haspopup="true" id="StudentServices">Student Services</a>
									<ul role="group" id="menu-StudentServices" aria-labelledby="StudentServices"
									 aria-expanded="false" class="dawgdrops-menu">
										<li class="dawgdrops-item"><a href="/student-services/applying-for-a-visa/" title="Applying for a Visa" id="ApplyingforaVisa">Applying for a Visa</a>
											<li class="dawgdrops-item"><a href="/student-services/registration-payment/" title="Registration &amp; Payment" id="Registration&amp;Payment">Registration &amp; Payment</a>
												<li class="dawgdrops-item"><a href="/student-services/health-insurance-immunization/" title="Health Insurance &amp; Immunization" id="HealthInsurance&amp;Immunization">Health Insurance &amp; Immunization</a>
													<li class="dawgdrops-item"><a href="/student-services/immigration-academic-advising/" title="Immigration &amp; Academic Advising" id="Immigration&amp;AcademicAdvising">Immigration &amp; Academic Advising</a></li>
												</li>
											</li>
										</li>
									</ul>
									<li class="dawgdrops-item"><a href="/contact/" title="Contact Us" id="ContactUs">Contact Us</a></li>
								</li>
							</li>
						</li>
					</li>
				</ul>
			</div>
		</nav> -->
		<nav id="dawgdrops" aria-label="Main menu" role="navigation">
			<div class="dawgdrops-inner container" role="application">
				<ul id="menu-main" class="dawgdrops-nav">
					<li class="dawgdrops-item-itc"><a class="dropdown-toggle" href="/about/" title="About" id="About" aria-controls="menu-About" aria-expanded="false" aria-haspopup="true">About</a>
						<div class="mega-wrap">
							<ul role="group" id="menu-About" aria-labelledby="menu-About" aria-expanded="false" class="mega-container mega-singlecolumn">
								<li><a href="/about/why-choose-us/" tabindex="-1" title="Why Choose Us?" id="WhyChooseUs?">Why Choose Us?</a></li>
								<li><a href="/about/locations/" tabindex="-1" title="Locations" id="Locations">Locations</a></li>
								<li><a href="/about/instructors/" tabindex="-1" title="Instructors" id="Instructors">Instructors</a></li>
								<li><a href="/about/staff/" tabindex="-1" title="Staff" id="Staff">Staff</a></li>
							</ul>
						</div>
					</li>
					<li class="dawgdrops-item-itc"><a class="dropdown-toggle" href="/programs/" title="Programs" id="programs" aria-controls="menu-Programs" aria-expanded="false" aria-haspopup="true">Programs</a>
						<div class="mega-wrap">
							<ul role="group" id="menu-Programs" aria-labelledby="menu-Programs" aria-expanded="false" class="mega-container">
								<li><a href="/programs/university-preparation/" tabindex="-1" title="University Preparation" id="UniversityPreparation">University Preparation</a>
									<ul class="section-container">
										<li><a href="/programs/university-preparation/intensive-english-program/" tabindex="-1" title="Intensive English Program" id="IntensiveEnglishProgram">Intensive English Program</a></li>
										<li><a href="/programs/university-preparation/graduate-school-preparation/" tabindex="-1" title="Graduate School Preparation" id="GraduateSchoolPreparation">Graduate School Preparation</a></li>
										<li><a href="/programs/university-preparation/test-preparation/" tabindex="-1" title="Test Preparation" id="TestPreparation">Test Preparation</a></li>
									</ul>
								</li>
								<li><a href="/programs/short-programs/" tabindex="-1" title="Short Programs" id="ShortPrograms">Short Programs</a>
									<ul class="section-container">
										<li><a href="/programs/short-programs/language-culture-short-term-english-program/" tabindex="-1" title="Language &amp; Culture Short-Term English Program" id="Language&amp;CultureShort-TermEnglishProgram">Language &amp; Culture STEP</a></li>
										<li><a href="/programs/short-programs/business-short-term-english-program/" tabindex="-1" title="Business Short-Term English Program" id="BusinessShort-TermEnglishProgram">Business STEP</a></li>
										<li><a href="/programs/short-programs/science-technology-engineering-short-term-english-/" tabindex="-1" title="Science, Technology &amp; Engineering Short-Term English Programs" id="Science,Technology&amp;EngineeringShort-TermEnglishPrograms">Science, Technology &amp; Engineering STEP</a></li>
										<li><a href="/programs/short-programs/academic-skills-short-term-english-program/" tabindex="-1" title="Academic Skills Short-Term English Program" id="AcademicSkillsShort-TermEnglishProgram">Academic Skills STEP</a></li>
										<li><a href="/programs/short-programs/intensive-faculty-development-program/" tabindex="-1" title="Intensive Faculty Development Program" id="IntensiveFacultyDevelopmentProgram">Intensive Faculty Development Program</a></li>
									</ul>
								</li>
								<li><a href="/programs/business-certificates/" tabindex="-1" title="Business Certificates" id="BusinessCertificates">Business Certificates</a>
									<ul class="section-container">
										<li><a href="/programs/business-certificates/global-business-certificate/" tabindex="-1" title="Global Business Certificate" id="GlobalBusinessCertificate">Global Business Certificate</a></li>
										<li><a href="/programs/business-certificates/global-business-english-program/" tabindex="-1" title="Global Business English Program" id="GlobalBusinessEnglishProgram">Global Business English Program</a></li>
									</ul>
								</li>
								<li><a href="/programs/study-abroad-at-the-uw/" tabindex="-1" title="Study Abroad at the UW" id="StudyAbroadattheUW">Study Abroad at the UW</a>
									<ul class="section-container">
										<li><a href="/programs/study-abroad-at-the-uw/global-connections/" tabindex="-1" title="Global Connections" id="GlobalConnections">Global Connections</a></li>
										<li><a href="/programs/study-abroad-at-the-uw/global-electrical-computer-engineering-program/" tabindex="-1" title="Global Electrical &amp; Computer Engineering Program" id="GlobalElectrical&amp;ComputerEngineeringProgram">Global Electrical &amp; Computer Engineering</a></li>
										<li><a href="/programs/study-abroad-at-the-uw/global-quantitative-finance/" tabindex="-1" title="Global Quantitative Finance" id="GlobalQuantitativeFinance">Global Quantitative Finance</a></li>
									</ul>
								</li>
								<li><a href="/programs/online-programs/" tabindex="-1" title="Online Programs" id="OnlinePrograms">Online Programs</a>
								</li>
								<li><a href="/programs/custom-programs/" tabindex="-1" title="Custom Programs" id="CustomPrograms">Custom Programs</a></li>
							</ul>
						</div>
					</li>
					<li class="dawgdrops-item-itc"><a class="dropdown-toggle" href="/life-at-uw/" title="Life At UW" id="LifeAtUW" aria-controls="menu-LifeAtUW" aria-expanded="false" aria-haspopup="true">Life At UW</a>
						<div class="mega-wrap">
							<ul role="group" id="menu-LifeAtUW" aria-labelledby="menu-LifeAtUW" aria-expanded="false" class="mega-container mega-singlecolumn">
								<li><a href="/life-at-uw/arrival-orientation/" tabindex="-1" title="Arrival &amp; Orientation" id="Arrival&amp;Orientation">Arrival &amp; Orientation</a></li>
								<li><a href="/life-at-uw/housing/" tabindex="-1" title="Housing" id="Housing">Housing</a></li>
								<li><a href="/life-at-uw/student-activities/" tabindex="-1" title="Student Activities" id="StudentActivities">Student Activities</a></li>
								<li><a href="/life-at-uw/seattle-the-pacific-northwest/" tabindex="-1" title="Seattle &amp; the Pacific Northwest" id="Seattle&amp;thePacificNorthwest">Seattle &amp; the Pacific Northwest</a></li>
								<li><a href="/life-at-uw/what-our-students-say/" tabindex="-1" title="What Our Students Say" id="WhatOurStudentsSay">What Our Students Say</a></li>
							</ul>
						</div>
					</li>
					<li class="dawgdrops-item-itc"><a class="dropdown-toggle" href="/student-services/" title="Student Services" id="StudentServices" aria-controls="menu-StudentServices" aria-expanded="false" aria-haspopup="true">Student Services</a>
						<div class="mega-wrap">
							<ul role="group" id="menu-StudentServices" aria-labelledby="menu-StudentServices" aria-expanded="false" class="mega-container mega-singlecolumn">
								<li><a href="/student-services/applying-for-a-visa/" tabindex="-1" title="Applying for a Visa" id="ApplyingforaVisa">Applying for a Visa</a></li>
								<li><a href="/student-services/registration-payment/" tabindex="-1" title="Registration &amp; Payment" id="Registration&amp;Payment">Registration &amp; Payment</a></li>
								<li><a href="/student-services/health-insurance-immunization/" tabindex="-1" title="Health Insurance &amp; Immunization" id="HealthInsurance&amp;Immunization">Health Insurance &amp; Immunization</a></li>
								<li><a href="/student-services/immigration-academic-advising/" tabindex="-1" title="Immigration &amp; Academic Advising" id="Immigration&amp;AcademicAdvising">Immigration &amp; Academic Advising</a></li>
							</ul>
						</div>
					</li>
					<li class="dawgdrops-item-itc"><a class="dropdown-toggle" href="/contact/" title="Contact Us" id="ContactUs" aria-controls="menu-ContactUs" aria-expanded="false" aria-haspopup="false">Contact Us</a></li>
				</ul>
			</div>
		</nav>

		<nav id="mobile-relative" class="frontpage bighero" aria-label="mobile menu"><button class="uw-mobile-menu-toggle">Menu</button>
			<div id="spacer"></div>
			<ul class="uw-mobile-menu first-level">
				<div class="menu-dropdowns-container">
					<ul class="" id="menu-dropdowns-1">
						<li class="menu-item menu-item-has-children"><a href="/about/" title="About" class="submenu" id="submenu">About</a>
							<ul class="sub-menu">
								<li class="menu-item"><a href="/about/why-choose-us/" title="Why Choose Us?" id="WhyChooseUs?">Why Choose Us?</a></li>

								<li class="menu-item"><a href="/about/locations/" title="Locations" id="Locations">Locations</a></li>

								<li class="menu-item"><a href="/about/instructors/" title="Instructors" id="Instructors">Instructors</a></li>

								<li class="menu-item"><a href="/about/staff/" title="Staff" id="Staff">Staff</a></li>

							</ul>
						</li>
						<li class="menu-item menu-item-has-children"><a href="/programs/" title="Programs" class="submenu" id="submenu">Programs</a>
							<ul class="sub-menu">
								<li class="menu-item"><a href="/programs/university-preparation/" title="University Preparation" id="UniversityPreparation">University Preparation</a></li>

								<li class="menu-item"><a href="/programs/business-certificates/" title="Business Certificates" id="BusinessCertificates">Business Certificates</a></li>

								<li class="menu-item"><a href="/programs/short-programs/" title="Short Programs" id="ShortPrograms">Short Programs</a></li>

								<li class="menu-item"><a href="/programs/study-abroad-at-the-uw/" title="Study Abroad at the UW" id="StudyAbroadattheUW">Study Abroad at the UW</a></li>

								<li class="menu-item"><a href="/programs/online-programs/" title="Online Programs" id="OnlinePrograms">Online Programs</a></li>

								<li class="menu-item"><a href="/programs/custom-programs/" title="Custom Programs" id="CustomPrograms">Custom Programs</a></li>

							</ul>
						</li>
						<li class="menu-item menu-item-has-children"><a href="/life-at-uw/" title="Life At UW" class="submenu" id="submenu">Life At UW</a>
							<ul class="sub-menu">
								<li class="menu-item"><a href="/life-at-uw/arrival-orientation/" title="Arrival &amp; Orientation" id="Arrival&amp;Orientation">Arrival &amp; Orientation</a></li>

								<li class="menu-item"><a href="/life-at-uw/housing/" title="Housing" id="Housing">Housing</a></li>

								<li class="menu-item"><a href="/life-at-uw/student-activities/" title="Student Activities" id="StudentActivities">Student Activities</a></li>

								<li class="menu-item"><a href="/life-at-uw/seattle-the-pacific-northwest/" title="Seattle &amp; the Pacific Northwest" id="Seattle&amp;thePacificNorthwest">Seattle &amp; the Pacific Northwest</a></li>

								<li class="menu-item"><a href="/life-at-uw/what-our-students-say/" title="What Our Students Say" id="WhatOurStudentsSay">What Our Students Say</a></li>

							</ul>
						</li>
						<li class="menu-item menu-item-has-children"><a href="/student-services/" title="Student Services" class="submenu" id="submenu">Student Services</a>
							<ul class="sub-menu">
								<li class="menu-item"><a href="/student-services/applying-for-a-visa/" title="Applying for a Visa" id="ApplyingforaVisa">Applying for a Visa</a></li>

								<li class="menu-item"><a href="/student-services/registration-payment/" title="Registration &amp; Payment" id="Registration&amp;Payment">Registration &amp; Payment</a></li>

								<li class="menu-item"><a href="/student-services/health-insurance-immunization/" title="Health Insurance &amp; Immunization" id="HealthInsurance&amp;Immunization">Health Insurance &amp; Immunization</a></li>

								<li class="menu-item"><a href="/student-services/immigration-academic-advising/" title="Immigration &amp; Academic Advising" id="Immigration&amp;AcademicAdvising">Immigration &amp; Academic Advising</a></li>

							</ul>
						</li>
						<li class="menu-item"><a href="/contact/" title="Contact Us" id="ContactUs">Contact Us</a></li>
					</ul>
				</div>
			</ul>
		</nav>

		<section aria-labelledby="slideshow-header" class="uw-homepage-slider-container" role="region">
			<div id="vid" class="uw-hero-image uw-homepage-slider uw-homepage-slider lighttext lighttextmobile">
				<div class="overlay"></div>
				<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
			 		<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1778508/seattle-short.mp4" type="video/mp4" type="video/mp4">
		  		</video>
				<div class="container hero-container vertical-center">
					<div class="row">
						<div class="col-md-6">
							<h3 class="slide-title">International & English Language Programs</h3>
							<span class="udub-slant"><span></span></span>
							<p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row">
					<div class="col-md-12 uw-content">
						<div class="col-sm-6">
							<h1>Welcome to UW IELP</h1>
							<p class="intro">Join us at the University of Washington in Seattle, where you'll meet Americans and study with other students from around the world at one of the top schools in the world.</p>
							<p class="intro">Enroll in a program that lasts for just a few weeks, several quarters, or a whole academic year &ndash; and boost your success in school or business.</p>
						</div>
						<div class="col-sm-6"><img alt="back view of man wearing purple W cap" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/79/2017/04/07150842/28389339163_ed00c57fbd_z.jpg" style="margin-top:40px;"></div>

					</div>
				</div>
			</div>
		</section>
		<section id="findaprogram" style="
	background-image:	url(http://www.pngall.com/wp-content/uploads/1/World-Map-Download-PNG.png);">
			<div class="container">

				<div class="row">
					<div class="col-md-12 uw-content">
						<div class="nowrap box-outer">
							<div class="box four box-none">
								<div class="tile  box-no-border">
									<div class="circle"><img src="https://www.oxfordlearning.com/wp-content/uploads/2015/10/icon-tutoring-sat1.png" /></div>

									<h3>University Preparation</h3>

									<p>Get ready to learn and succeed at an American university</p>
								</div>

								<div class="tile  box-no-border">
									<div class="circle"><img src="https://image.flaticon.com/icons/svg/290/290008.svg" /></div>

									<h3>Business Certificates</h3>

									<p>Advance your business English and career with a certificate from the UW</p>
								</div>

								<div class="tile  box-no-border">
									<div class="circle"><img src="https://image.flaticon.com/icons/svg/1599/1599741.svg" /></div>

									<h3>Short Programs</h3>

									<p>Improve your English in just a few weeks &ndash; and explore Seattle</p>
								</div>

								<div class="tile  box-no-border">
									<div class="circle"><img src="https://image.flaticon.com/icons/svg/495/495681.svg" /></div>

									<h3>Study Abroad at UW</h3>

									<p>Experience university life and take classes with UW students</p>
								</div>
							</div>
						</div>

						<div class="hr"></div>
						<a class="uw-btn btn-none" href="/">Find A Program</a>

					</div>
				</div>

			</div>
		</section>
		<section id="experience">
			<div class="container">
				<div class="row">
					<div class="col-md-12 uw-content">
						<div class="box-outer">
							<h2 class="text-center">The UW Experience</h2>
							<div class="box three box-none">
								<div class="tile">
									<img alt="Two women and one man looking at computer" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/79/2017/05/07150829/Allen-School-Image-3.jpg" />
									<span>
									<h3>Vibrant City of Seattle</h3>
									<p>Seattle is a friendly, progressive and culturally diverse place, and it's consistently ranked among America's best places to live, work and study.</p>
								</span>
								</div>

								<div class="tile">
									<img alt="Two surgeons operating on a patient" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/79/2012/07/07150920/dentistry.jpg" />
									<span>
									<h3>World-Class University</h3>
									<p>The UW is one of the world's leading public universities. It boasts Nobel prize-winning faculty and a stunning main campus.</p>
								</span>
								</div>

								<div class="tile">
									<img alt="Students studying a globe" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/79/2012/07/07150903/education-college.jpg" />
									<span>
									<h3>Your Goals Within Reach</h3>
									<p>Highly-trained staff and instructors give personal support and guidance so UW IELP students can have the best learning experience and reach their goals.</p>
								</span>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
		<section id="testimonial">
			<div class="studentstory">
				<div class="outer">
					<div class="left__inner" style="background-image:url(https://www.pearsoned.com/wp-content/uploads/Asian-male-college-student-working-on-a-laptop-computer-770x370.jpg)">
						<div class="left__text">
						</div>
					</div>

					<div class="right__inner">
						<div class="right__text">
							<h2><span>Student Testimonial</span> Taka Nakamura</h2>
							<p>How can studying business at the University of Washington advance your career? Taka Nakamura, a student from Japan in the Global Business Certificate program, shares how coming to the UW is opening up a new world of experiences and opportunities
								for him.</p>
							<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity class="vidplay">
								<div class="play-button">
									<h4>See Taka's story</h4>
								</div>
								<i class="material-icons">play_circle_outline</i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section>
			<div class="container">
				<div class="row">
					<div class="col-md-12 uw-content text-center">
						<h2>UW Rankings</h2>

						<div class="box-outer">
							<div class="box one box-none">
								<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1778508/ielp-home-rankings-1.jpg" />
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
		<section>
			<div class="container">
				<div class="row">
					<div class="col-md-8 uw-content text-center">
						<h2>Program Tiles</h2>

						<div class="box-outer nowrap">
							<div class="box four box-none course-matrix">
								<div class="tile">
									<h3>Length</h3>
									<img src="https://image.flaticon.com/icons/svg/1720/1720804.svg">
									<p>
										9 weeks
									</p>
								</div>
								<div class="tile">
									<h3>Schedule</h3>
									<img src="https://image.flaticon.com/icons/svg/86/86093.svg">

									<p>
										Mon-Fri, 3-5 p.m.<br/> 18 hours/week
									</p>
								</div>
								<div class="tile">
									<h3>English Level</h3>
									<img src="https://image.flaticon.com/icons/svg/1141/1141860.svg">

									<p>
										Beginning to Advanced
									</p>
								</div>
								<div class="tile">
									<h3>F-1 Visa</h3>
									<img src="https://image.flaticon.com/icons/svg/1834/1834440.svg">

									<p>
										Eligible
									</p>
								</div>
							</div>
						</div>
						<div class="box-outer nowrap">
							<div class="box four box-none course-matrix">
								<div class="tile">
									<h3>Length</h3>
									<img src="https://image.flaticon.com/icons/svg/1255/1255623.svg">
									<p>
										9 weeks
									</p>
								</div>
								<div class="tile">
									<h3>Schedule</h3>
									<img src="https://image.flaticon.com/icons/svg/2141/2141352.svg">

									<p>
										Mon-Fri, 3-5 p.m.<br/> 18 hours/week
									</p>
								</div>
								<div class="tile">
									<h3>English Level</h3>
									<img src="https://image.flaticon.com/icons/svg/1255/1255637.svg">

									<p>
										Beginning to Advanced
									</p>
								</div>
								<div class="tile">
									<h3>F-1 Visa</h3>
									<img src="https://image.flaticon.com/icons/svg/1834/1834511.svg">

									<p>
										Eligible
									</p>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row">
					<div class="col-md-12 uw-content text-center">
						<style type="text/css">
							.quotes.box-outer .box {
								border-spacing: 0;
								position: relative;
								padding:20px;
							}

							.quotes.box-outer .box .tile {
								vertical-align: middle;
								position: relative;
								background: linear-gradient( to bottom,
								rgba(0, 0, 0, 0),
								rgba(0, 0, 0, 100));
								background-size: cover;
							}

							.quotes.box-outer .box blockquote {
								border-left: 0;
								padding: 0;
								margin: 2em 0 1em;
								color: white;
								font-family: "Encode Sans Condensed", sans-serif;
								font-size: 1.5em;
								line-height: 1.5em;
								font-weight:600;
							}

							.quotes.box-outer .box blockquote:before,
							.quotes.box-outer .box blockquote:after {
								content: '\201C';
								font-family: "Open Sans", sans-serif;
								font-size: 1.5em;
								font-weight: 900;
								line-height: 1;
								color: #b7a57a;
							}
							.quotes.box-outer .box blockquote:after {
								content: '\201D';
							}

							.quotes.box-outer .box p {
								color: white;
								text-transform: uppercase;
								margin-bottom: 1em;
							}

							@media only screen and (max-width: 767px) {
								.quotes.box-outer .box .tile {
									margin: 0;
								}
								.quotes.box-outer .box {
									display: flex;
									flex-direction: column;
									align-content: center;
								}
							}
						</style>
						<div class="box-outer quotes">
							<div class="box three box-none">
								<div class="tile" style="background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(https://media2.fdncms.com/stranger/imager/u/original/29259304/screen_shot_2018-07-16_at_1.05.18_pm.png);">
									<blockquote>You can learn and get inspired at the Seattle Art Museum</blockquote>
									<p>Lihu, China</p>
								</div>
								<div class="tile" style="background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(https://www.adorama.com/alc/wp-content/uploads/2018/09/mount-rainier-feature-1024x464.jpg);">
									<blockquote>On Mount Rainier, you can see snow even in the summer. It has a nice view.</blockquote>
									<p>Jangkyun, South Korea</p>
								</div>
								<div class="tile" style="background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(https://cache-graphicslib.viator.com/graphicslib/page-images/742x525/605922_Viator_Shutterstock_98531.jpg);">
									<blockquote>Lake Washington is just awesome. You can have a very good boating day on Lake Washington.</blockquote>
									<p>Jesus, Venezuela</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section id="applybanner">
			<div class="container">
				<div class="row">
					<div class="col-md-12 uw-content text-center">
						<p>Ready to take the next step?</p>
						<a class="uw-btn  uw-btn btn-purple" href="">Apply now</a>
					</div>
				</div>
			</div>
		</section>
		<div class="uw-footer" role="contentinfo">
			<a class="footer-wordmark" href="http://www.washington.edu">University of Washington</a>
			<a href="http://www.washington.edu/boundless/">
				<h3 class="be-boundless">Be boundless</h3>
			</a>

			<nav role="navigation" aria-label="footer links">
				<ul class="footer-links">
					<li><a href="http://www.washington.edu/online/privacy/" title="Privacy" id="Privacy">Privacy</a>
						<li><a href="http://www.washington.edu/online/terms/" title="Terms" id="Terms">Terms</a></li>
					</li>
				</ul>
			</nav>
			<p>
				Brought to you in partnership with <a href="https://www.continuum.uw.edu/">UW Continuum College</a><br>&copy; 2019 <a href="http://www.washington.edu/">University of Washington</a> | Seattle, WA
			</p>
		</div>
	</div>
	<!-- #uw-container-inner -->
</div>
              
            
!

CSS

              
                /* Just fixing fonts for Codepen. Ignore this! */

@import url("https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:300,400,500,600,700,800,900|Open+Sans");

body,
p,
a {
	font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
a.uw-btn,
button.uw-btn,
.dawgdrops-item.dawgdrops-item a,
.uw-thinstrip ul.uw-thin-links li a,
.uw-thinstrip ul.uw-thin-links li button,
.uw-homepage-slider-container .uw-homepage-slider .hero-container p,
.dawgdrops-item.dawgdrops-item li a,
#mobile-relative button.uw-mobile-menu-toggle,
.intro,
.itconnect .dawgdrops-item-itc > a,
.itconnect .mega-container > li > a,
.itconnect .section-container li a {
	font-family: "Encode Sans Condensed", sans-serif;
}

/* Actual styles start here */

iframe {
	margin:0;
}

.uw-accordion h3 {
	 margin-top: 5px;
    margin-bottom: 5px;
}

.uw-accordion > .active > p {
    padding: 5px 15px 10px;
}

.table {
	border:0;
	margin-bottom:16px;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	padding:8px 16px;
}

.tableResponsive tbody {
	border:1px solid #ddd;
}

.tableResponsive th,
.tableResponsive td {
	padding:16px !important;
}

.tableResponsive th span {
    text-transform: none;
    display: block;
    font-size: calc(14px + .2vw);
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    line-height: 1.5em;
}

.tableResponsive p {
	 margin:0;
}

.tableResponsive th span p {
	 font-size: calc(14px + .2vw);
    line-height: 1.5;
}

section:nth-child(even) {
	background-color:#e8e3d3;
}

.uw-content h1 {
	color:#4b2e83;
	font-size:calc(1.8em + .5vw);
	font-weight:800;
}

section .uw-content.col-md-12 {
	padding:2em 1em;
}

.intro {
	font-size:calc(1.1em + .3vw);
	line-height:calc(1.4em + .3vw);
	margin:1.5em 0 0;
}

.uw-homepage-slider-container {
	height: auto !important;
}

#vid {
	position: relative;
	background-color: black;
	height: 80vh;
	min-height: 30rem;
	max-height: 50rem;
	width: 100%;
	overflow: hidden;
}

#vid,
#vid p {
	color: white;
}

#vid video {
	position: absolute;
	top: 25%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

#vid .container {
	position: relative;
	z-index: 2;
}

/* optional overlay */
#vid .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #4b2e83;
	opacity: 0.4;
	z-index: 1;
}

.box-outer .box {
	margin:0;
}

#findaprogram {
	background-size:cover;
	background-origin:border-box;
	background-position:center;
	text-align:center;    
	padding-top: 30px;
   margin-top: 50px;
   margin-bottom: 30px;
}

#findaprogram .box-outer .box .tile h3 {
	color:#4b2e83;
	font-weight:700;
	font-size:calc(.9em + .3vw);
}

.box-outer .box .tile p {
	line-height:1.6em;
	font-size:17px;
}

.box-outer .box .tile .circle {
	max-width:150px;
	max-height:150px;
	margin:0 auto !important;
	position:relative;
}

#findaprogram .hr {
	 width:100%;
	 height:20px;
	 margin-bottom:2em;
	 background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1778508/ielp-home-programs-hr.png);
	 background-repeat:no-repeat;
	 background-size:contain;
}

#findaprogram .uw-btn {
	background-color:white;
}

#experience p {
	line-height:1.6em;
	margin-bottom:3em;
}
#experience h2,
#experience .box-outer .box .tile h3 {
	color:#4b2e83;
	font-size:2em;
}
#experience .box-outer .box .tile h3 {
	font-size:1.2em;
	font-weight:700;
}
#experience .box-outer .box.three .tile {
	box-shadow:none;
	padding:0;
}
#experience .box-outer .box.three .tile img {
	margin:0;
}


.studentstory {
  position: relative;
  width: 100%;
}

.studentstory .outer {
  position: relative;
  width: 140vw;
  height: 100%;
  left: -20vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.studentstory .outer:before {
  	 background-image:url('https://www.washington.edu/wp-content/themes/be-boundless/campaign/img/slashes.svg');
	 background-size:100%;
	 position: absolute;
    top: 0;
    height: 40px;
    width: 40%;
    content: "";
    opacity: .4;
}

.left__inner {
  background: #4b2e83;
  background-size:cover;
  background-position:center top;
  margin-right:-60px;
  padding: 80px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height:400px;
}

.right__inner {
  background: #e8e3d3;
  padding: 60px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.left__text,
.right__text {
  -webkit-transform: skew(15deg);
  transform: skew(15deg);
  width: 35vw;
}

.left__text {
  color: #d9d9d9;
  margin-left: 20vw;
}

.right__text {
  color: #4b2e83;
  align-self: center;
  text-align:center;
}

.studentstory h2,
.studentstory p {
  margin: 0.5em 0;
}

.studentstory p {
  font-size: calc(12px + 0.2vw);
}

.studentstory h2 {
  font-size: calc(16px + 1.5vw);
}
.studentstory h2 span {
	font-weight:400;
	display:block;
	text-transform:uppercase;
  font-size: calc(16px + .2vw);
}

.studentstory button {
  display: inline-block;
  font-size:1.5em;
  font-weight: 600;
  background: #4b2e83;
  color: white;
  margin: 0;
  padding: 14px;
  border: 2px solid #4b2e83;
  min-width: 8vw;
}

.play-button,
.play-button h4 {
  font-weight: 600;
  text-transform:uppercase;
  align-items: center;
  margin: 0;
  margin-right: 0.5em;
  position: relative;
  color:#85754d;
}
.play-button {
  margin-right: 1em;
  display:inline-block;
  vertical-align:middle;
}
.play-button:after {
  font-size: 4em;
  content: " ";
  position: absolute;
  display: block;
  height: 100%;
  top: 0;
  right: 0;
  border-right: 2px solid #85754d;
  transform-origin: bottom left;
  -ms-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0deg);
  transform: skew(-20deg, 0deg);
}

.material-icons {
	color:#85754d;
	display:inline-block;
	vertical-align:middle;
	font-size:calc(2em + 2vw);
}

.vidplay:hover .play-button h4,
.vidplay:hover .play-button:after,
.vidplay:hover .material-icons {
	transition:.2s;
	color:#5b5034;
}

.lity-content:after {
	box-shadow:none;
}

.itconnect .dawgdrops-inner {
	padding:22px 0 0;
}

.itconnect #dawgdrops .dawgdrops-item-itc .mega-wrap {
	height:auto !important;
	width:auto !important;
	border-top-width:4px;
	top:52px;
}

.itconnect #dawgdrops .dawgdrops-item-itc .mega-container {
	column-gap:15px;
}

.itconnect #dawgdrops .dawgdrops-item-itc .section-container li {
	margin:0;
	height:auto;
	word-break:break-word;
}
.itconnect .mega-container > li > a {
	padding: 5px 10px;
}

.itconnect .section-container li a {
	padding: 8px 20px;
	color: #707070;
	text-indent: -4px;
	line-height: 1.2em;
}

.itconnect .section-container li a:before {
	content:"";
}

.itconnect .dawgdrops-item-itc > a {
	padding-right:25px;
	padding-bottom:23px;
	text-transform:uppercase;
	font-weight:800;
}

.itconnect .dawgdrops-item-itc > a.dropdown-toggle:before {
	content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    right: 7px;
    top: 13px;
    background: url(https://www.washington.edu/wp-content/themes/uw-2014/assets/svg/uw-sprite.svg) no-repeat -353px 0;
	 transition:none;
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.itconnect .dawgdrops-item-itc > a.dropdown-toggle:hover:before {
	background: url(https://www.washington.edu/wp-content/themes/uw-2014/assets/svg/uw-sprite.svg) no-repeat -203px -490px;
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	 height: 25px;
    width: 18px;
	 right: 0px;
    top: 3px;
}


.itconnect .dawgdrops-item-itc > a:after {
	top:10px;
	right:-15px;
}

.itconnect #dawgdrops .dawgdrops-item-itc .mega-container.mega-singlecolumn {
	margin:-8px 0;
}

.itconnect .mega-container.mega-singlecolumn > li > a {
	color:#707070;
	font-weight:600;
	padding:5px 30px 5px 10px;
	white-space:nowrap;
	margin:5px 0;
}

.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(1) .mega-wrap,
.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(2) .mega-wrap,
.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(3) .mega-wrap,
.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(4) .mega-wrap,
.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(5) .mega-wrap {
	left:5px !important;
}

.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(4) .mega-wrap {
	max-width:650px !important;
}

.itconnect .dawgdrops-item-itc:last-child > a:before {
	display:none;
}

.itconnect .mega-container li a:hover, .itconnect .mega-container li a:focus {
	background-color:#E7E7E7;
	color:#4b2e83;
}

.itconnect #dawgdrops .dawgdrops-item-itc .mega-container > li {
	border-bottom:1px solid #eee;
	margin:0;
}
.itconnect #dawgdrops .dawgdrops-item-itc:nth-last-child(4) .mega-wrap .mega-container > li {
	border-bottom:0;
}

.itconnect #dawgdrops .dawgdrops-item-itc .mega-container > li:last-of-type {
	border:0;
}

.course-matrix .tile {
	background-color:white;
	padding:1em;
}
.box-outer .course-matrix.box .tile img {
	width:40%;
	margin:1em auto;
}
.box-outer .course-matrix.box .tile h3 {
	font-size:1.1em;
	font-weight:700;
	color:#4b2e83;
}
.box-outer .course-matrix.box .tile p {
	padding:0 1em;
	font-size: 14px;
}

#applybanner {
	background-color:#ddd;
	margin-bottom:-7px;
	margin-top:20px;
}
#applybanner p {
	display:inline-block;
	margin:0 1em 0 0;
}
#applybanner .uw-btn {
	margin-bottom:0;
}

#applybanner .uw-content.col-md-12 {
	padding:1em;
}

ul.uw-select.open {
	height:auto;
	overflow:hidden;
}

/* optional image swap on mobile */
@media (pointer: coarse) and (hover: none) {
	#vid {
		background: url("https://source.unsplash.com/XT5OInaElMw/1600x900") black
			no-repeat center center scroll;
	}
	#vid video {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	.uw-content {
		padding:.5em;
	}
	
	.uw-hero-image.hero-height #hero-container h1 {
		font-size:25px;
		line-height:1.2em;
	}
	
	.uw-homepage-slider-container .uw-homepage-slider .hero-container h3 {
		font-size: calc(30px + 0.5vw);
		line-height: 40px;
		padding-right: 5%;
		margin: 0;
	}
	.uw-thinstrip .uw-wordmark {
		width: 200px;
		height: 40px;
		background-position: 0 -235px;
		left: 78px;
		top: 2px;
		background-size: 500px;
	}
	#mobile-relative.frontpage.bighero #spacer {
		margin-bottom: 0;
	}

	.left__inner {
		min-height:300px;
	}
	.right__inner {
		padding:40px 60px;
	}
	.left__inner,
  .right__inner,
  .left__text,
  .right__text {
    position: relative;
    transform: none;
    width: 100vw;
    align-content: center;
  }
  .left__text {
    margin-left: 0;
  }
  .left__inner:before,
  .left__inner:after {
    position: absolute;
    content: "";
    width: 50%;
    left: 0;
    height: 30px;
    z-index: 5;
    top: 88%;
  }
  .left__inner:after {
    left: 50%;
    right: 0;
  }
	.right__inner:before {
  	 background-image:url('https://www.washington.edu/wp-content/themes/be-boundless/campaign/img/slashes.svg');
	 background-size:100%;
	 position: absolute;
    top: 0;
	 left:-40px;
    height: 40px;
    width: 120%;
    content: "";
    opacity: 1;
}
  .studentstory .outer {
    display: block;
    width: 100vw;
    left: 0;
  }
  .studentstory button {
    width: 20vw;
    padding: 0 auto;
  }
	.nowrap.box-outer .box {
		display: flex;
      flex-flow: row wrap;
      padding: 1em;
	}
	.nowrap.box-outer .box .tile {
      flex: 1 1 40%;
	}
	#applybanner p {
		margin-bottom:.5em;
		font-size:calc(13px + .5vw);
	}
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
	.container {
		width:inherit;
	}
	.uw-thinstrip .uw-wordmark {
		left: 100px;
		-o-transform: scale(0.8, 0.8);
		-webkit-transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		transform: scale(0.8, 0.8);
	}
	.uw-thinstrip {
		height: 90px;
	}
	.uw-thinstrip li {
		margin-top: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.tableResponsive td {
		padding-top:0 !important;
		margin:0 !important;
	}
	.tableResponsive td:first-child {
		padding-top:10px !important;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console