Body copy
@@ -160,53 +152,46 @@
Body copy
Hodor! Hodor hodor, hodor; hodor hodor... Hodor hodor hodor. Hodor. Hodor! Hodor hodor, hodor hodor hodor? Hodor hodor HODOR! Hodor hodor - hodor; hodor hodor. Hodor hodor HODOR! Hodor hodor - hodor... Hodor hodor hodor; hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor hodor hodor, hodor. Hodor hodor?!
Hodor. Hodor hodor hodor hodor... Hodor hodor hodor. Hodor hodor - hodor; hodor HODOR hodor, hodor hodor?! Hodor hodor, hodor. Hodor hodor; hodor hodor hodor hodor. Hodor. Hodor HODOR hodor, hodor hodor hodor? Hodor! Hodor hodor, hodor, hodor. Hodor hodor? Hodor. Hodor hodor; hodor hodor, hodor. Hodor hodor. Hodor! Hodor hodor, hodor - HODOR hodor, hodor hodor; hodor hodor, hodor, hodor hodor.
Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor; hodor hodor - hodor? Hodor! Hodor hodor, hodor... Hodor hodor hodor hodor! Hodor, hodor. Hodor. Hodor, hodor... Hodor hodor hodor hodor; hodor hodor - hodor, hodor, hodor hodor. Hodor hodor HODOR! Hodor hodor... Hodor hodor HODOR hodor, hodor hodor; hodor hodor, hodor. Hodor hodor?! Hodor, hodor. Hodor. Hodor, hodor; hodor hodor; hodor hodor. Hodor. Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor, hodor. Hodor hodor hodor.
+
+
-
Lead body copy
-
+
+
+ Addresses
-
Make a paragraph stand out by adding .vast-lead.
+
Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>.
-
Post-ironic shoreditch chambray whatever fixie, butcher crucifix cronut migas vexillologist microdosing flannel beard. Vinyl cold-pressed echo park pickled, venmo paleo kogi whatever. Organic pitchfork drinking vinegar, microdosing pinterest stumptown live-edge. Chambray green juice fingerstache drinking vinegar. Waistcoat truffaut mlkshk scenester, fingerstache vape yuccie single-origin coffee flannel quinoa man braid polaroid four dollar toast deep v. Glossier cardigan franzen slow-carb kombucha banh mi. Vexillologist mixtape stumptown small batch vinyl, intelligentsia snackwave synth thundercats af unicorn fap ramps seitan.
-
-
-
-
- <p
- class="vast-lead">...</p>
-
-
-
-
-
- Addresses
-
-
-
Present contact information in our default style by using the <address> tag. Preserve your formatting by ending all lines with <br>.
-
-
Learners Guild
@@ -214,79 +199,71 @@ Addresses
Oakland, CA 94607
P: (123) 456-7890
-
Full Name
first.last@example.com
-
-
-
+
+
+
+ <address>
+ <strong>Learners Guild</strong><br>
+ 492 Ninth Street (Garden Level)<br>
+ Oakland, CA 94607<br>
+ <abbr
+ title="Phone">P:</abbr>
+ (123) 456-7890
+ </address>
+ <address>
+ <strong>Full Name</strong><br>
+ <a
+ href="mailto:#">first.last@example.com</a>
+ </address>
+
+
+
Sizes
diff --git a/style.css b/style.css
index ee5701f..5e29898 100644
--- a/style.css
+++ b/style.css
@@ -4,57 +4,8 @@ body {
background-image: url("https://www.transparenttextures.com/patterns/tileable-wood.png");
}
-.body-content {
- margin: 0px 100px 50px;
-}
-
-#main-header {
- background-color: #f78671;
- color: #f6e5d7;
- width: 100%;
- position: fixed;
- top: 0px;
- display: flex;
- justify-content: center;
- flex-direction: row;
- align-items: flex-end;
- padding-bottom: 20px;
-}
-
-#title {
- font-size: 55px;
- font-family: 'Raleway', sans-serif;
-}
-
-#sub-title {
+code {
font-family: 'Open Sans Condensed', sans-serif;
- font-size: 30px;
-}
-
-#headings-section {
- margin-top: 220px;
- background-color: rgba(246, 299, 215, 0.3);
-}
-
-#body-copy {
- background-color: rgba(246, 299, 215, 0.3);
-}
-
-#address {
- background-color: rgba(246, 299, 215, 0.3);
-}
-
-small, .small {
- color: #6d7370;
- font-size: 0.8em;
-}
-
-#blockquotes {
- background-color: rgba(246, 299, 215, 0.3);
-}
-
-#buttons {
- background-color: rgba(246, 299, 215, 0.3);
}
p {
@@ -64,24 +15,31 @@ p {
margin-bottom: 10px;
}
-code {
- font-family: 'Open Sans Condensed', sans-serif;
+.body-content {
+ margin: 0px 100px 50px;
}
-address {
- font-size: 20px;
- line-height: 1.5;
- margin-bottom: 7px;
- font-style: normal;
- font-family: 'Open Sans Condensed', sans-serif;
+.sections {
+ border: 2px solid #2f3733;
+ border-radius: 5px;
+ margin-top: 50px;
}
-blockquote {
- font-family: 'Open Sans Condensed', sans-serif;
- font-size: 75%;
- margin: 0 0 20px;
- padding: 10px 20px;
- border-left: 7px solid #f78671;
+.secondary-section {
+ margin-top: 20px;
+}
+
+.section-title {
+ font-family: 'Raleway', sans-serif;
+ color: #2f3733;
+ background-color: #86baaa;
+ text-align: center;
+ margin-top: 0px;
+ border-radius: 5px;
+}
+
+.breakdown {
+ padding: 0px 200px;
}
.flex-container.sample-text {
@@ -97,13 +55,14 @@ blockquote {
flex-direction: row;
}
-.section-title {
- font-family: 'Raleway', sans-serif;
- color: #2f3733;
- background-color: #86baaa;
- text-align: center;
- margin-top: 0px;
- border-radius: 5px;
+.sample-code {
+ background-color: rgba(47, 55, 51, 0.8);
+ color: #f6e5d7;
+ padding: 0px 200px 5px 200px;
+}
+
+.tab {
+ margin-left: 40px;
}
.element-color {
@@ -123,9 +82,48 @@ blockquote {
color: #c9d2cb;
}
+#body-copy {
+ background-color: rgba(246, 299, 215, 0.3);
+}
-.tab {
- margin-left: 40px;
+#address {
+ background-color: rgba(246, 299, 215, 0.3);
+}
+
+#blockquotes {
+ background-color: rgba(246, 299, 215, 0.3);
+}
+
+#buttons {
+ background-color: rgba(246, 299, 215, 0.3);
+}
+
+#main-header {
+ background-color: #f78671;
+ color: #f6e5d7;
+ width: 100%;
+ position: fixed;
+ top: 0px;
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ align-items: flex-end;
+ padding-bottom: 20px;
+}
+
+#title {
+ font-size: 55px;
+ font-family: 'Raleway', sans-serif;
+}
+
+#sub-title {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-size: 30px;
+}
+
+#headings-section {
+ margin-top: 220px;
+ background-color: rgba(246, 299, 215, 0.3);
}
h1, .vast-h1 {
@@ -170,16 +168,31 @@ h6, .vast-h6 {
font-size: .67em;
}
+small, .small {
+ color: #6d7370;
+ font-size: 0.8em;
+}
+
.vast-lead {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 27px;
color: #828784;
}
-.sample-code {
- background-color: rgba(47, 55, 51, 0.8);
- color: #f6e5d7;
- padding: 0px 200px 5px 200px;
+address {
+ font-size: 20px;
+ line-height: 1.5;
+ margin-bottom: 7px;
+ font-style: normal;
+ font-family: 'Open Sans Condensed', sans-serif;
+}
+
+blockquote {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-size: 75%;
+ margin: 0 0 20px;
+ padding: 10px 20px;
+ border-left: 7px solid #f78671;
}
button.vast-btn, input.vast-btn {
@@ -225,17 +238,3 @@ a {
padding-right: 5px;
padding-top: 15px;
}
-
-.breakdown {
- padding: 0px 200px;
-}
-
-.sections {
- border: 2px solid #2f3733;
- border-radius: 5px;
- margin-top: 50px;
-}
-
-.secondary-section {
- margin-top: 20px;
-}