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

              
                <!-- create a website style guide with SCSS

COLORS

1 color: #fce1e0 (light red)
2 color: #181716 (dark orange)
3 color: #7dc4bd (light green)
4 color: #2a2727 (dark red)

GOOGLE FONTS

Headings

Montserrat

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

font-family: 'Montserrat', sans-serif;

Paragraphs

Lora

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">

font-family: 'Lora', serif;

----------

<!-- COLOR SWATCHES -->

<main>

	<section id="color-swatches">
		<h1>Color Swatches</h1>
		<h2>Website Color Choices and their Hover Effects</h2>
		<div class="swatch-container">
			<div class="swatch">
				<div class="color one"></div>
				<div class="color-info">
					<div class="label">NAME: light red</div>
					<div class="label">HEX: #fce1e0</div>
					<div class="label">RGB: 252, 225, 224</div>
				</div>
			</div>
			<div class="swatch">
				<div class="color two"></div>
				<div class="color-info">
					<div class="label">NAME: dark orange</div>
					<div class="label">HEX: #181716</div>
					<div class="label">RGB: 24, 23, 22</div>
				</div>
			</div>
			<div class="swatch">
				<div class="color three"></div>
				<div class="color-info">
					<div class="label">NAME: light green</div>
					<div class="label">HEX: #7dc4bd</div>
					<div class="label">RGB: 125, 196, 189</div>
				</div>
			</div>
			<div class="swatch">
				<div class="color four"></div>
				<div class="color-info">
					<div class="label">NAME: dark red</div>
					<div class="label">HEX: #2a2727</div>
					<div class="label">RGB: 42, 39, 39</div>
				</div>
			</div>
		</div>
	</section>

	<!-- TYPOGRAPHY EXAMPLES -->

	<section id="typography-examples">
		<h1>Typography Examples (This is an H1 heading.)</h1>
		<h2>Font family Montserrat will be used for all heading sizes. (This is an H2 heading.)</h2>
		<div class="typography-container">
			<div class="example">
				<div class="typography one"></div>
				<h3>This is what a font family Montserrat Header 3 looks like...</h3>
				<h3 class="italics">This is what a font family Montserrat Italicized Header 3 looks like...</h3>
				<h3 class="uppercase">This is what a font family Montserrat Uppercase Header 3 looks like...</h3>
			</div>
			<div class="example">
				<div class="typography two"></div>
				<h4>and this is Header 4</h4>
				<h4 class="italics">and this is Italicized Header 4</h4>
				<h4 class="uppercase">and this is Uppercase Header 4</h4>
			</div>
			<div class="example">
				<div class="typography three"></div>
				<h5>and Header 5</h5>
				<h5 class="italics">and this is Italicized Header 5</h5>
				<h5 class="uppercase">and this is Uppercase Header 5</h5>
			</div>
			<div class="example">
				<div class="typography four"></div>
				<h6>and Header 6</h6>
				<h6 class="italics">and this is Italicized Header 6</h6>
				<h6 class="uppercase">and this is Uppercase Header 6</h6>
			</div>
			<div class="example">
				<div class="typography five"></div>
				<p>Font family Lora will be used for non-heading font sizes.</p>
				<p>This is what a font family Lora paragraph looks like. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptate quos accusantium. Consequatur animi, perferendis ex esse fuga dicta, fugit nemo asperiores officiis tempora illum tenetur facere corporis, expedita quas.</p>
				<p class="bold">This is what a font family Lora bold paragraph looks like. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptate quos accusantium. Consequatur animi, perferendis ex esse fuga dicta, fugit nemo asperiores officiis tempora illum tenetur facere corporis, expedita quas.</p>
				<p class="italics">This is what a font family Lora italicized paragraph looks like. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptate quos accusantium. Consequatur animi, perferendis ex esse fuga dicta, fugit nemo asperiores officiis tempora illum tenetur facere corporis, expedita quas.</p>
				<p class="uppercase">This is what a font family Lora uppercase paragraph looks like. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptate quos accusantium. Consequatur animi, perferendis ex esse fuga dicta, fugit nemo asperiores officiis tempora illum tenetur facere corporis, expedita quas.</p>
			</div>
		</div>
	</section>

	<!-- FOOTER -->
	<footer>
		<p>Raya Bergin LBCC Fall2021 COSW20 &copy; 4|5Dec2021</p>
	</footer>

</main>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");

// VARIABLES (Color Swatches, This web page's colors, Font Families)

// Color Swatches

$lightShades: #fce1e0;
$lightAccent: #181716;
$mainColor: #7dc4bd;
$darkAccent: #2a2727;

// This web page's colors

$backgroundColor: #fefbf3;
$colorInfoBackgroundColor: #fff;
$outline: #ff0075;

// Font Families

$headings: "Montserrat", sans-serif;
$regularText: "Lora", serif;

// MIXINS

@mixin margin {
	margin: 1em auto;
}

šŸ» Bear with us while we compile your code to css 

// MY TEMPLATE

* {
	// Outline to view layout on screen while styling | Remove after styling
	// outline: 1px dashed $outline;
	margin: 0;
	padding: 0;
}
html {
	box-sizing: border-box;
	font-size: 100%;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	color: $lightAccent;
	background-color: $backgroundColor;
	font-family: $regularText;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $headings;
}
#color-swatches,
#typography-examples {
	margin: 1em 10em;
}
#color-swatches h2,
#typography-examples h2 {
	margin: 1em 5em;
	color: $mainColor;
}

// COLOR SWATCHES

.swatch-container {
	display: flex;
	justify-content: space-between;
	width: 60em;
	@include margin;
}
.swatch {
	width: 12em;
	margin-top: 1em;
	margin-bottom: 1em;
	box-shadow: 0.125em 0.125em 0.125em 0.125em rgba(0, 0, 0, 0.1);
}
.color {
	height: 10em;
	width: 100%;
}
.one {
	background-color: $lightShades;
}
.one:hover {
	background-color: darken($lightShades, 15%);
}
.two {
	background-color: $lightAccent;
}
.two:hover {
	background-color: lighten($lightAccent, 15%);
}
.three {
	background-color: $mainColor;
}
.three:hover {
	background-color: darken($mainColor, 15%);
}
.four {
	background-color: $darkAccent;
}
.four:hover {
	background-color: lighten($darkAccent, 15%);
}
.color-info {
	background-color: $colorInfoBackgroundColor;
	padding: 0.5em 1em;
}
.label {
	width: 100%;
	font-size: 0.75em;
	letter-spacing: 0.05em;
	line-height: 1.75em;
}

// TYPOGRAPHY EXAMPLES

.typography-container {
	width: 60em;
	@include margin;
}
.bold {
	font-weight: 700;
}
.italics {
	font-style: italic;
}
.uppercase {
	text-transform: uppercase;
}

// FOOTER

footer {
	text-align: center;
	margin-top: 10em;
	margin-botton: 1em;
}

              
            
!

JS

              
                
              
            
!
999px

Console