cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <header id="header">
	<div id="img-div">
		<!--
		<img id="header-img" src="http://vipinjeetsandhu.com/images/MedVIP-combined-banner-logo-1276x196.png">
		-->
		<img id="header-img" src="https://via.placeholder.com/1276x196">
	</div>
	<nav id="nav-bar">
		<a href="#features" class="nav-link">Features</a>
		<a href="#how" class="nav-link">How it Works</a>
		<a href="#pricing" class="nav-link">Pricing</a>
	</nav>
</header>
<main>
	<section id="contact" class="nav-target">
		<h2 id="description">Personalized Learning guided by an AI tutor</h2>
		<form id="form" action="https://www.freecodecamp.com/email-submit" target="_blank">
			<input id="email" type="email" name="email" placeholder="Enter your email address" required><br>
			<input id="submit" type="submit" value="GET STARTED">
		</form>
	</section>
	<section id="features" class="nav-target">
		<div class="feature-row">
			<div class="feature-icon">
				<i class="fas fa-user-md"></i>
			</div>
			<div class="feature-description">
				<h2 class="feature-description-heading">Train to Win</h2>
				You gotta be able to answer questions about the content. We're all about that. Our system tests your understanding <em>during</em> content review.
			</div>
		</div>
		<div class="feature-row">
			<div class="feature-icon">
				<i class="fab fa-connectdevelop"></i>
			</div>
			<div class="feature-description">
				<h2 class="feature-description-heading">Interdisciplinary Connections</h2>
				The AAMC wants you to memorize less and understand more. We will show you every connection you are supposed to make so you have the keys to unlock the MCAT.
			</div>
		</div>
		<div class="feature-row">
			<div class="feature-icon">
				<i class="fas fa-crosshairs"></i>
			</div>
			<div class="feature-description">
				<h2 class="feature-description-heading">Targeted Review</h2>
				Don't waste your time. Our content all falls into two categories: high-yield foundations for everyone, or in-depth granular review for those seeking a 528.
			</div>
		</div>
		<div class="feature-row">
			<div class="feature-icon">
				<i class="fas fa-graduation-cap"></i>
			</div>
			<div class="feature-description">
				<h2 class="feature-description-heading">Automated AI tutoring</h2>
				Every time you interact with our system, our machine-learning algorithm infers <em>why you missed questions</em> , which will suggest lessons you need to complete or review.
			</div>
		</div>

		<div class="feature-row">
			<div class="feature-icon">
				<i class="far fa-money-bill-alt"></i>
			</div>
			<div class="feature-description">
				<h2 class="feature-description-heading">More Bang for the Buck</h2>
				Let's get real: Classes and tutors are expensive, and offer one-size-fits-all solutions. Join the MedVIP revolution and disrupt the test-prep industry.
			</div>
		</div>
	</section>

	<section id="how" class="nav-target">
		<h2 class="section-heading">How it Works</h2>
		<div class="section-content">
			<p>TODO: Discuss B is not a B Concept.</p>
			<p>TODO: Discuss Staged Recall</p>
			<p>TODO: Discuss gamification, mental gym vs. decathlon</p>
			<p><strong>Note to Self:</strong> Swap out this video with an example Socratic Video once made, or an intro video explaining and demonstrating the data structure/AI concept</p>

			<div class="video-container">
				<iframe id="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/m5yj34LrJHI?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
			</div>
		</div>
	</section>

	<section id="pricing" class="nav-target">
		<h2 class="section-heading">Pricing</h2>
		<div id="pricing-section" class="section-content">
			<div class="price-plan">
				<div class="price-plan-header">
					ONE TOPIC
				</div>
				<h2>$10</h2>
				<em>For Example:</em><br> Gas Laws<br> Passage Mapping<br> Child Development<br>
				<button type="button">LEARN MORE</button>
			</div>

			<div class="price-plan">
				<div class="price-plan-header">
					ONE SECTION
				</div>
				<h2>$75</h2>
				Physical Sci<br> Biological Sci<br> Behavioral Sci<br> CARS
				<br>
				<button type="button">LEARN MORE</button>
			</div>

			<div class="price-plan">
				<div class="price-plan-header">
					WHOLE TEST
				</div>
				<h2>$250</h2>
				Best Value<br> Unleash the AI<br> See all the Connections<br> Total Prep<br>
				<button type="button">LEARN MORE</button>
			</div>
		</div>
	</section>
</main>

<footer>
	<div id="footer-links">
		<a href="#" class="nav-link">Privacy</a>
		<a href="#" class="nav-link">Terms</a>
		<a href="#contact" class="nav-link">Contact</a>
	</div>
	Written & coded by Vipatron<br> TODO: Update with © Info<br>
</footer>
            
          
!
            
              /*PAGE-SPECIFIC MEASUREMENTS CUSTOM CSS PROPERTIES DECLARATION*/
/*SHORTHAND EXPLAINED: vp=viewport, v-offset=vertical offset*/
/*REQUIRES SASS OR LESS: Let it go for now.
:root{
	--desktop-v-offset: 49px;
	--tablet-vp-width: 768px;
	--tablet-v-offset: 99px;
	--mobile-vp-width: 601px;
	--mobile-v-offset: 148px;
	--pricing-collapse-width: 692px;
}*/

/*BRAND COLOR CUSTOM CSS PROPERTIES DECLARATION*/
:root {
	--brand-blue-darkest: #0041a8;
	--brand-blue-darker: #004ecc;
	--brand-blue: #3380ff;
	--brand-blue-lighter: #5294ff;
	--brand-blue-pale: #d6e4ff;
	--brand-brown-darkest: #414c29;
	--brand-brown-darker: #505b33;
	--brand-brown: #99aa66;
	--brand-brown-lighter: #bc8;
	--brand-brown-pale: #dee9ce;
}

body {
	font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: var(--brand-blue-pale);
	color: var(--brand-brown-darkest);
}

#header {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	position: fixed;
	width: 100%;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: linear-gradient(0deg, var(--brand-blue-lighter), white);
}

#img-div {
	flex: 0 1 319px;
}
#header-img {
	max-width: 100%;
	display: block;
	height: auto;
}

#nav-bar {
	flex: 0 1 40%;
	display: flex;
	flex-flow: row wrap;
	padding: 5px 16px;
	justify-content: space-around;
	align-items: center;
}

/*The following two media queries make the navbar responsive*/
@media (max-width: 768px) {
	#header {
		align-items: center;
	}
	#nav-bar {
		flex-flow: column nowrap;
	}
}
@media (max-width: 601px) {
	#header {
		justify-content: center;
	}
	#img-div {
		min-width: 118px;
	}
	#nav-bar {
		flex-flow: column nowrap;
		align-items: center;
	}
}

.nav-link {
	padding: 4px 16px;
	text-align: center;
	text-decoration: none;
}
a.nav-link:link,
a.nav-link:visited {
	color: var(--brand-blue-darkest);
}
a.nav-link:hover,
a.nav-link:active {
	color: var(--brand-brown-darker);
	text-decoration: underline;
}

main {
	margin-top: 50px;
}
@media (max-width: 767px) {
	main {
		margin-top: 104px;
	}
}
@media (max-width: 601px) {
	main {
		margin-top: 150px;
	}
}

#contact {
	text-align: center;
}

input,
button {
	padding: 10px 16px;
	margin: 6px;
	box-sizing: border-box;
	width: 250px;
	border: 1px solid slateblue;
	border-radius: 4px;
}

input:focus {
	outline: 1.5px solid mediumslateblue;
}

input[type="submit"] {
	font-weight: 900;
	font-size: 1.2em;
	background-color: var(--brand-blue-darker);
	color: var(--brand-brown-lighter);
}

.feature-row {
	display: flex;
	width: 100%;
}

.feature-icon {
	color: var(--brand-brown);
	font-size: 50px;
	flex: 1 0 100px;
	max-width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.feature-description {
	flex: 1 1 500px;
	max-width: 700px;
}

.feature-description-heading {
	margin: 0px;
}

/*The following two media queries account for scaling up the feature description and making the icons in each feature row disappear on smaller viewports.
(NOTE: The icons still reappear when phones are held sideways)
*/
@media (min-width: 602px) {
	.feature-row {
		max-width: 900px;
		margin: 20px auto;
	}
}
@media (max-width: 601px) {
	.feature-icon {
		display: none;
	}
	.feature-description {
		text-align: center;
		margin: 20px 8px;
	}
}

.section-heading{
	text-align: center;
}

.section-content{
	text-align: center;
	width: 100%;
	max-width: 900px;
	margin: auto;
}

/*Youtube Embed Responsivity*/
.video-container {
	position: relative;
	padding-bottom: 50%;
	padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*CODE FOR PRICING SECTION, INCLUDING RESPONSIVE LAYOUT OF PLAN BLOCKS*/
#pricing-section{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-bottom: 8px;
}
.price-plan{
	flex: 1 1 200px;
	margin: auto 10px;
	background-color: var(--brand-brown-lighter);
	outline: 1px solid var(--brand-blue-darkest);
}
@media (max-width: 692px){
	#pricing-section{
		flex-flow: column nowrap;
		align-items: center;
	}
	.price-plan{
		width: 300px;
		margin: 8px;
	}
}
.price-plan-header{
	background-color: var(--brand-blue);
	font-size: 1.5em;
	font-weight: 500;
}
button{
	font-weight: 600;
	font-size: 1em;
	background-color: var(--brand-blue-darker);
	color: var(--brand-brown-pale);
}

/*footer code, incuding responsivity*/
footer{
	display: flex;
	flex-flow: column nowrap;
	background-color: var(--brand-blue-lighter);
	padding: 8px;
	align-items: flex-end;
}
#footer-links{
	display: flex;
}

/*nav-target gets applied to <section>s that are anchor targets to accomodate the menu being fixed.*/
.nav-target::before {
	content: "";
	display: block;
	height: 49px;
  margin: -51px 0 0;
}
@media(max-width:768px){
	.nav-target:before {
		height: 99px;
		margin: -101px 0 0;
	}
}
@media(max-width:601px){
	.nav-target:before {
		height:148px;
		margin: -150px 0 0;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console