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

              
                <div class="centerspan">
  <h1>Ratgeber Baufinanzierung</h1>
<span>Wissen rund um das Thema Baufinanzierung</span>
</div>
<section class="gallery">
  <div class="container">
    <div class="toolbar">
      <div class="search-wrapper">
        <input type="search" placeholder="Artikel suchen...">
        <div class="counter">
          Gesamt: <span>24</span></div>
      </div>
      <ul class="view-options">
        <li class="zoom">
          <input type="range" min="180" max="380" value="280">
        </li>
        <li class="show-grid active">
          <button disabled>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/grid-view.svg" alt="grid view">  
          </button>
        </li>
        <li class="show-list">
          <button>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/list-view.svg" alt="list view">  
          </button>
        </li>
      </ul>
    </div>
    <ol class="image-list grid-view">
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/1.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Baufinanzierung ohne Eigenkapital: Ist das möglich?</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/2.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Haushaltsrechnung: Wie viel Haus kann ich mir leisten?</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/3.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Was kostet ein Haus: Wie viel Deutsche im Schnitt fürs Eigenheim zahlen</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/4.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Mieten oder Kaufen: Was lohnt sich mehr für Sie?</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/5.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Hausfinanzierung: Tipps, Tricks und die wichtigsten Meilensteine der Finanzierung</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/6.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Hauskredit: Wie viel Kredit bekomme ich bei meinem Gehalt?</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/7.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Beste Baufinanzierung: Bei welcher Bank bekomme ich das beste Baudarlehen?</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/8.png" alt="">
          </a>
          <figcaption>
            <p><a href="#" target="_blank">Ablauf einer Baufinanzierung: Schritt für Schritt zum Immobiliendarlehen</a></p>
            <p><a href="#" target="_blank">Mehr lesen...</a></p>
          </figcaption>
        </figure>
      </li>
    

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/9.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Finanzierungsplan: Wie Sie Ihre Finanzierung richtig planen</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>


  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/10.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Beratung Baufinanzierung: Mit dem richtigen Partner das Eigenheim solide finanzieren</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/11.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Immobilienkredit über Vermittler oder Bank: Wer ist der passende Begleiter?</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/12.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Finanzierungsangebote vergleichen: Günstig in die eigenen vier Wände</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/13.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Baufinanzierung Tipps: Mit diesen 20 Tipps solide finanzieren</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/14.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Eigenheimfinanzierung: So vermeiden Sie die 15 häufigsten Fehler</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/15.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Kredit für Hauskauf: Tipps für mehr Eigenkapital</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/16.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Baufinanzierung über Versicherung: Vor- und Nachteile der Anbieter</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/17.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Baufinanzierung zu zweit: Zusammen Kosten teilen</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/18.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Baufinanzierung für junge Familien: Zuschüsse und Förderungen nutzen</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/19.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Niedrigzinsphase: Tipps für einen Baukredit mit niedrigen Zinsen</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/20.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Negativzinsen: Gibt's die Baufinanzierung bald zum Nulltarif?</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/21.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Baufinanzierung für Singles: Eigentumswohnung solide finanzieren</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/22.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Immobilienrechner: Wertvolle Unterstützung beim Hauskauf</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#" target="_blank"><img src="https://www.synusie.de/images/codepen/article/23.png" alt="">
      </a>
      <figcaption>
        <p><a href="#" target="_blank">Zinssatz: 10 Tipps zum Zinsen sparen</a></p>
        <p><a href="#" target="_blank">Mehr lesen...</a></p>
      </figcaption>
    </figure>
  </li>

    </ol>
  </div>
</section>


              
            
!

CSS

              
                /* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --black: #1a1a1a;
  --white: #fff;
  --gray: #ccc;
  --darkgreen: #18846C;
  --lightbrown: antiquewhite;
  --darkblack: rgba(0,0,0,0.8);
  --minRangeValue: 280px;
}

* {
  margin: 0;
  padding: 0;  
  outline: none;
  border: none;
}

button {
  cursor: pointer;
  background: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ol,
ul {
  list-style: none;
}

a {
  color: inherit;
}

body {
  margin: 50px 0;
  color: var(--black);
  font: 1rem/1.3 sans-serif;
}

.gallery {
  padding: 0 2rem;
}

.container {
  max-width: 1030px;
  margin: 0 auto;
}

.d-none {
  display: none;
}


/* TOOLBAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar .search-wrapper {
  position: relative;
}

.toolbar input[type="search"] {
  font-size: 1.1rem;
  border: none;
  border-bottom: 1px solid;
  padding-bottom: 3px;
}

.toolbar ::-moz-placeholder {
  color: var(--gray);
}

.toolbar :-ms-input-placeholder {
  color: var(--gray);
}

.toolbar ::placeholder {
  color: var(--gray);
}

.toolbar .counter {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  font-size: 0.9rem;
  color: var(--gray);
}

.view-options {
  display: flex;
  align-items: center;
}

.view-options li:not(:last-child) {
  margin-right: 1.2rem;
}

.view-options button {
  padding: 2px;
  border: 3px solid transparent;
}

.view-options .active button {
  border-color: var(--darkgreen);
}


/* IMAGE LIST
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.image-list {
  margin: 3rem 0;
}

.image-list li {
  background: var(--lightbrown);
  color: var(--darkblack);
}

.image-list p:first-child {
  font-weight: bold;
  /*font-size: 1.15rem;*/
}

.image-list p:last-child {
  margin-top: 0.5rem;
}


/* GRID VIEW
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid-view {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--minRangeValue), 1fr));
}

.grid-view figcaption {
  padding: 1rem;
}


/* LIST VIEW
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.list-view li + li {
  margin-top: 1.5rem;
}

.list-view figure {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 150px 1fr;
  align-items: center;
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
  font-size: 1rem;
  padding: 0 1.5rem;
  text-align: right;
}

footer span {
  color: #e31b23;
}

/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .toolbar input[type="range"] {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .grid-view li {
    text-align: center;
    padding: 0.3rem;
  }
  
  .grid-view figcaption {
    padding: 0.3rem 0 0;
  }
}

h1, .centerspan{
  text-align: center;
  margin: 2rem;
}

a{
  text-decoration: none;
}

              
            
!

JS

              
                // VARIABLES
const rangeInput = document.querySelector('input[type = "range"]');
const imageList = document.querySelector(".image-list");
const searchInput = document.querySelector('input[type="search"]');
const btns = document.querySelectorAll(".view-options button");
const photosCounter = document.querySelector(".toolbar .counter span");
const imageListItems = document.querySelectorAll(".image-list li");
const captions = document.querySelectorAll(".image-list figcaption p:first-child");
const myArray = [];
let counter = 1;
const active = "active";
const listView = "list-view";
const gridView = "grid-view";
const dNone = "d-none";

// SET VIEW
for (const btn of btns) {
  btn.addEventListener("click", function() {
    const parent = this.parentElement;
    document.querySelector(".view-options .active").classList.remove(active);
    parent.classList.add(active);
    this.disabled = true;
    document.querySelector('.view-options [class^="show-"]:not(.active) button').disabled = false;

    if (parent.classList.contains("show-list")) {
      parent.previousElementSibling.previousElementSibling.classList.add(dNone);
      imageList.classList.remove(gridView);
      imageList.classList.add(listView);
    } else {
      parent.previousElementSibling.classList.remove(dNone);
      imageList.classList.remove(listView);
      imageList.classList.add(gridView);
    }
  });
}

// SET THUMBNAIL VIEW - CHANGE CSS VARIABLE
rangeInput.addEventListener("input", function() {
  document.documentElement.style.setProperty("--minRangeValue",`${this.value}px`);
});

// SEARCH FUNCTIONALITY
for (const caption of captions) {
  myArray.push({
    id: counter++,
    text: caption.textContent
  });
}

searchInput.addEventListener("keyup", keyupHandler);

function keyupHandler() {
  for (const item of imageListItems) {
    item.classList.add(dNone);
  }
  const text = this.value;
  const filteredArray = myArray.filter(el => el.text.includes(text));
  if (filteredArray.length > 0) {
    for (const el of filteredArray) {
      document.querySelector(`.image-list li:nth-child(${el.id})`).classList.remove(dNone);
    }
  }
  photosCounter.textContent = filteredArray.length;
}
              
            
!
999px

Console