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

              
                <!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<header id="header">
			<nav>
				<div id="page-logo">
					<img src="data:image/jpeg;base64,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" alt="logo" id="header-img">
					<a href="#" id="instrument-store">Instrument Store</a>
				</div>
				<ul id="nav-right">
					<li><a class="nav-link" href="#info">Info</a></li>
					<li><a class="nav-link" href="#prices">Precios</a></li>
					<li><a class="nav-link" href="#more">Más</a></li>
				</ul>
			</nav>
		</header>
		<main>
			<!--I didn't code this <iframe>. I copyed the code from youtube, and I have done that by right-clicking the video I wanted to embeed and selecting the option 'copy code of inserction' (or at least that's what it says in spanish)-->
			<div id="youtube">
				<iframe id="video" width= "100%" height= "100%" src="https://www.youtube.com/embed/7qPp0njnWhk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
			</div>
			<h1 id="title">Encuentre aquí los mejores instrumentos</h1>
			<section if="info">
				<p>Desde el maestro hasta los aprendices, de generación en generación: cada STEINWAY se fabrica con décadas de experiencia; desde los apasionados artesanos que unen a mano las piezas del instrumento para darle alma e introducen así innovaciones y mejoras continuamente. Gracias al desarrollo de 125 patentes, STEINWAY está considerado como el creador de los pianos modernos. El tiempo denota una alta calidad en un piano de cola: Dos años de media para secar y dejar madurar las maderas, hasta que permiten un tratamiento óptimo, y casi otro año más de duración hasta obtener definitivamente un STEINWAY. Cada piano de cola y piano vertical de STEINWAY & SONS es una obra maestra de artesanía y una obra de arte en sí misma. Cada STEINWAY se compone de más de 12.000 piezas y tiene su propio carácter musical, lo que lo convierte en único, como la persona que lo toca.</p>
				<p>Fender es particularmente conocida por llevar las guitarras eléctricas de cuerpo macizo a las masas. Fender creó la primera guitarra eléctrica de cuerpo sólido de venta masiva, la Telecaster (originalmente llamada 'Broadcaster'; 'Esquire' es el modelo original con una sola pastilla), el primer bajo de producción masiva, el Precision Bass o 'P-Bass', y la mundialmente conocida Stratocaster o Strat. Otras compañías y luthiers fabricaban guitarras eléctricas, pero todas eran de cuerpo hueco o guitarras especiales, como la Lap Steel hawaiana de Rickenbacker. Otros modelos conocidos de Fender son las guitarras Mustang, Jazzmaster, Fender Jaguar, Musicmaster y Duo-Sonic y los bajos Jazz Bass, Precision, Mustang Bass y Bajo Telecaster, una línea de lap steels y el famoso piano eléctrico Fender Rhodes. Además de esto, también fabrica amplificadores de guitarra como el Twin Reverb o el Jazz Junior.</p>
				<p>Roland Corporation es el líder en fabricación y distribución de instrumentos musicales electrónicos, incluyendo teclados, sintetizadores, productos para guitarra, kits de percusión electrónica, equipo de grabación digital, amplificadores, y procesadores de audio. Con más de 35 años en el desarrollo de los instrumentos musicales, Roland establece el estándar en la tecnología musical a seguir por el mundo. Desde pianos digitales hasta baterías, Roland tiene una amplia gama de productos de alta calidad que harán que disfrutes más que nunca el tocar tus piezas favoritas</p>
			</section>
			<h2>Nuestro catálogo</h2>
			<div id="#prices">
				
				<div id="item-1" class="items">
					<img src="https://i.ytimg.com/vi/Ny3zTQbyrrE/maxresdefault.jpg" alt="Un piano Steinway">
					<h3>Steinway Model D</h3>
					<p>Con 274 centímetros de largo, El Steinway D es un majestuoso instrumento y la mejor opción para las salas de concierto para todo el que requiera el más alto nivel de expresividad musical</p>
				</div>
				<div id="item-2" class="items">
					<img src="https://promocionmusical.es/wp-content/uploads/2017/01/iNYg2Mm.jpg" alt="Una guitarra Fender">
					<h3>Fender Stratocaster Thinline</h3>
					<p>Dando vida a la visión de uno de los guitarristas más respetados del mundo, la Eric Johnson Signature Stratocaster Thinline es el matrimonio perfecto entre un cuerpo semi-hueco y una Stratocaster tradicional</p>
				</div>
				<div id="item-3" class="items">
					<img src="https://i.pinimg.com/originals/49/a2/1d/49a21dea61e5b188cc4c5aecdc14ec69.jpg" alt="Un teclado Roland">
					<h3>Roland RD300NX</h3>
					<p>Este piano de escenario con tecnología-de-punta, porta el avanzado motor de sonidos SuperNatural Piano, sonidos de Piano eléctrico basados en tecnología SuperNATURAL, teclado de nuevo desarrollo con Sensibilidad de Marfil (Ivory Feel-G) con escape de fuga, peculiar función "Sound Focus", y mucho mas.</p>
				</div>
			</div>
		</main>
		<footer id="#more">
			<form id="form">
				<label for="email">Escriba su email aquí: </label>
				<input type="email" id="email" placeholder="Así recibirá correos sobre nuevos productos">
				<!--I used <formaction> because I copyed part of this line from: https://css-tricks.com/separate-form-submit-buttons-go-different-urls/ -->
				<input type="submit" name="Enviar" formaction="https://www.freecodecamp.com/email-submit">
			</form>
		</footer>
	</body>
</html>
              
            
!

CSS

              
                @media (min-width: 750px) {
	#info {
		display: inline-block;
		background: #7a442a;
		color: white;
		width: 90%;
		font-size: 24px;
		align: center;
		padding: 0 5%;
	}
	#info-2 {
		display: inline-block;
		background: #7a312a;
		color: white;
		width: 90%;
		font-size: 24px;
		align: center;
		padding: 0 5%;
	}
	#info-3 {
		display: inline-block;
		background: #7a592a;
		color: white;
		width: 90%;
		font-size: 24px;
		align: center;
		padding: 0 5%;
	}
	.price-info {
		margin-right: auto;
		margin-left: auto;
		width: 90%;
	}
	.price-content {
		position: relative;
		width: 100%;
	}
	.price-img {
		width: 100%
	}
	main img {
	  	 width: 100%;
	  	 height: auto;
	}
	main p {
		padding: 25px 0 25px 0;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	a {
		padding-right: 12px;
		color: black;
		text-decoration: none;
	}
	h2 {
		padding: 0 0 0 0;
		font-size: 24px;
		padding-top: 25px;
		margin-top: 50px;
	}
	footer {
		background: #2a627a;
		color: white;
		text-align: center;
		font-size: 18px;
	}
	#left {
		padding: 25px 0;
		
	}
	#right {
		display: flex;
		justify-content: center;
		align-content: center;
		padding: 50px 0;
		font-size: 18px;
	}
	#email {
		border: none;
		border-bottom: 2px solid white;
		background: transparent;
		font-size: 18px;
		color: white;
	}
	#submit {
		background: #518094;
		border: none;
		border-radius: 25px;
		height: 50px;
		width: 150px;
		color: white;
		font-size: 18px;
	}	
}
body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto', serif;
}
#iframe-div {
	position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
#header {
	display: flex;
	position: fixed;
	width: 100%;
	height: 50px;
	top: 0;
	align-items: center;
	justify-content: space-between;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	z-index: 1;
}
#logo {
	display: flex;
	align-items: center;
	height: 100%;
}
#header-img {
	padding-left: 12px;
	height: 50%;
}
#logo-text {
	font-size: 20px;
	padding-left: 5px;
}
#main {
	text-align: center;
	width: 100%;
	font-weight: 300px;
}
@media (max-width: 751px) {
	#info {
		display: inline-block;
		background: #7a442a;
		color: white;
		width: 90%;
		font-size: 16px;
		align: center;
		padding: 0 5%;
	}
	#info-2 {
		display: inline-block;
		background: #7a312a;
		color: white;
		width: 90%;
		font-size: 16px;
		align: center;
		padding: 0 5%;
	}
	#info-3 {
		display: inline-block;
		background: #7a592a;
		color: white;
		width: 90%;
		font-size: 16px;
		align: center;
		padding: 0 5%;
	}
	.price-info {
		margin-right: auto;
		margin-left: auto;
		width: 90%;
	}
	.price-content {
		position: relative;
		width: 100%;
	}
	.price-img {
		width: 100%
	}
	main img {
	  	 width: 100%;
	  	 height: auto;
	}
	main p {
		padding: 25px 0 25px 0;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	a {
		padding-right: 12px;
		color: black;
		text-decoration: none;
	}
	h2 {
		padding: 0 0 0 0;
		font-size: 24px;
		margin-top: 50px;
	}
	footer {
		background: #2a627a;
		color: white;
		text-align: center;
		font-size: 30px;
	}
	#left {
		padding: 25px 0;
		
	}
	#right {
		display: flex;
		justify-content: center;
		align-content: center;
		padding: 50px 0;
		font-size: 24px;
	}
	#email {
		border: none;
		border-bottom: 2px solid white;
		background: transparent;
		font-size: 24px;
		color: white;
	}
	#submit {
		background: #518094;
		border: none;
		border-radius: 25px;
		height: 50px;
		width: 150px;
		color: white;
		font-size: 24px;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console