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 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

              
                <body>
  <div id="main">
    <div class="header-container">
      <header>
        <h1 id="title"><a href="#poem">My tribute to coffee</a></h1>
      </header>
    </div>
    <div class="poem-container" id="poem">
      <main>
        <div class="image" id="img-div">
          <img alt="coffee" height="400px" id="image" src="https://source.unsplash.com/XS3ivs2dlSo/400x400" width="auto" />
          <p id="img-caption">One of life's pleasures</p>
        </div>
        <div class="poem">
          <p>It is drunk when hot, it's drunk when cold</p>
          <p>It is drunk by those, young and old</p>
          <p>It is perfect in the morning, it can be consumed at night</p>
          <p>It is sometimes had black, but also, on occasion, white</p>
          <p>Sugar is added, if too bitter is the flavour</p>
          <p>However it's taken, it's a taste to savour</p>
          <p>Espresso, mocha, grande or cappuccino</p>
          <p>Coffee is the best liquid tonic we know!</p>
          <a href="#facts">Read some facts about coffee</a>
        </div>
      </main>
    </div>
    <div class="facts-container" id="facts">
      <section>
        <div class="facts">
          <h2>Did you know?</h2>
          <ul id="tribute-info">
            <li>Coffee dates back to the 9th century</li>
            <li>Coffee dates back to the 9th century</li>
            <li>The word ‘coffee’ originated from ‘wine’</li>
            <li>Around 10 million tonnes of coffee are produced every year</li>
            <li>Espresso comes from the Italian word for “pressed out”</li>
            <li>People once tried to ban coffee</li>
            <li>The most expensive coffee in the world is Kopi Luwak</li>
            <li>The largest ever cup of coffee was over 11 feet tall</li>
            <li>Finnish people consume the most coffee</li>
            <li>Coffee can help you live longer</li>
          </ul>
          <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Coffee">Read more</a>
          </p>
        </div>
      </section>
    </div>
    <div class="footer-container">
      <footer>
        <p>Built by <a href="https://michaelgainford.co.uk">Michael</a></p>
      </footer>
    </div>
  </div>
</body>
              
            
!

CSS

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --clr1: #402218;
  --clr2: #865439;
  --clr3: #c68b59;
  --clr4: #d7b19d;
}

html {
  scroll-behavior: smooth;
}

body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  font-family: "Staatliches", cursive;
  font-size: 10px;
  min-height: 100vh;
}

p {
  font-size: 1.2rem;
}

#main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#main > * {
  display: flex;
  justify-content: center;
}

header,
main,
section,
footer {
  display: flex;
  height: 100%;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
}
a {
  color: var(--clr1);
}

/** All stuff header related **/
.header-container {
  background: var(--clr1);
  background-blend-mode: multiply;
  background-image: url("https://source.unsplash.com/TD4DBagg2wE/1920x1464");
  background-size: cover;
  padding: 4rem 0;
}
header {
  padding: 2rem 4rem;
}
@media (min-width: 900px) {
  header {
    padding: 5rem 10rem;
  }
}
h1 {
  align-content: center;
  display: flex;
  margin: auto;
  width: 100%;
}
h1 a {
  align-items: center;
  border: 4px solid var(--clr3);
  color: var(--clr3);
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  margin: auto;
  padding: 1rem 1rem;
  text-decoration: none;
  transition: background-color 1s, color 1s;
}
@media (min-width: 900px) {
  h1 a {
    font-size: 1.8rem;
    padding: 2rem;
  }
}
h1 a:hover {
  background-color: var(--clr3);
  color: var(--clr1);
}

/** All stuff intro related **/
main {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 4rem;
}
@media (min-width: 900px) {
  main {
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-start;
  }
}
.poem-container {
  background-color: var(--clr3);
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .poem-container {
    flex-direction: row;
    padding: 2rem;
  }
}
.image {
  align-content: center;
  display: grid;
  justify-content: center;
  justify-items: center;
  max-width: 500px;
  padding: 0;
}
.image img {
  border: 20px solid var(--clr1);
  height: auto;
  max-width: 100%;
}

.image p {
  background-color: var(--clr1);
  color: var(--clr3);
  margin-top: -1rem;
  padding: 1rem;
  text-align: center;
  width: 100%;
}
.poem {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 3rem 0 0 0;
  text-align: center;
  width: 70%;
}
@media (min-width: 900px) {
  .poem {
    padding: 0 1rem 0 6rem;
  }
}
.poem p {
  color: var(--clr1);
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.8rem;
  text-align: center;
  width: 100%;
}
@media (min-width: 900px) {
  .poem p {
    text-align: left;
  }
}
.poem p:nth-child(even) {
  padding-bottom: 1.6rem;
}
.poem a {
  align-self: flex-start;
  border: 5px solid var(--clr1);
  color: var(--clr1);
  display: flex;
  font-size: 1.2rem;
  letter-spacing: 0.25rem;
  margin-top: 1.6rem;
  padding: 1rem;
  text-decoration: none;
  transition: background-color 1s, color 1s;
}
.poem a:hover {
  background-color: var(--clr1);
  color: var(--clr3);
}
/** All stuff facts related **/

.facts {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.facts > * {
  display: flex;
}
.facts-container {
  background-color: var(--clr1);
}
section {
  margin: auto;
  padding: 6rem;
}
.facts h2 {
  align-items: center;
  border-bottom: 3px dotted var(--clr1);
  color: var(--clr4);
  display: flex;
  flex-direction: column;
  font-size: 1.6rem;
  letter-spacing: 0.3rem;
  padding-bottom: 1.2rem;
  text-align: center;
}
@media (min-width: 600px) {
  .facts h2 {
    text-align: center;
  }
}
.facts h2:after {
  background-color: var(--clr2);
  color: var(--clr2);
  content: "";
  height: 5px;
  width: 40px;
}

.facts ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 3rem 0;
}
@media (min-width: 600px) {
  .facts ul {
    padding: 1rem 1rem 6.4rem 1rem;
  }
}
.facts ul li {
  color: var(--clr4);
  font-size: 1.2rem;
  list-style: none;
  padding: 1rem 3rem 1rem 1rem;
  text-align: center;
  width: 100%;
}
@media (min-width: 600px) {
  .facts ul li {
    text-align: left;
    width: 50%;
  }
}
.facts a {
  border: 5px solid var(--clr3);
  color: var(--clr4);
  display: flex;
  font-size: 1.2rem;
  justify-content: center;
  letter-spacing: 0.05rem;
  max-width: 300px;
  padding: 1rem 0;
  text-align: center;
  text-decoration: none;
  transition: background-color 1s, color 1s;
  width: 100%;
}
.facts a:hover {
  background-color: var(--clr3);
  color: var(--clr1);
}
/** All stuff footer related **/
.footer-container {
  background-color: var(--clr3);
  padding: 2rem;
}

.footer-container p {
  color: var(--clr1);
}
.footer-container a {
  color: var(--clr1);
}
.footer-container a:hover {
  text-decoration: none;
}

              
            
!

JS

              
                
              
            
!
999px

Console