Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/eigenschaften-der-box-anwenden.markdown

Last active August 1, 2019 16:39
Show Gist options
  • Save jensgro/b0e201c1b8d97031aa7651cd2eef8cc8 to your computer and use it in GitHub Desktop.
Save jensgro/b0e201c1b8d97031aa7651cd2eef8cc8 to your computer and use it in GitHub Desktop.
Download ZIP
Eigenschaften der Box anwenden
Raw
index.html
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem ipsum dolor sit amet.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates vero officiis accusamus tempora sunt! Consectetur assumenda dicta ea, quia quo officiis soluta cupiditate, commodi culpa neque consequuntur veniam voluptatibus amet dolorum sapiente, quidem minima laborum saepe blanditiis quis totam eaque magnam!</p>
<p>Commodi id ipsum voluptatum necessitatibus obcaecati nihil deleniti et dolor vero dignissimos error accusantium, quae officia harum illum ducimus perferendis, ad voluptates consequatur repudiandae reprehenderit eveniet maiores tenetur itaque?</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem, ipsum dolor.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, porro? Officia necessitatibus ipsum ut non doloremque quisquam ex cupiditate eos esse veniam nemo similique earum tempore ab libero porro obcaecati nisi, vel voluptatibus quidem fuga! Corrupti non harum minus nesciunt sunt consequatur vitae commodi impedit, cumque mollitia, voluptatem nihil.</p>
<p>Iste blanditiis veniam harum, esse error sed omnis qui similique quia sapiente natus nemo est deserunt rem minus quibusdam sunt ratione a porro ducimus exercitationem temporibus repudiandae quos possimus. Totam, doloribus impedit assumenda magnam quaerat distinctio ab voluptates ut, animi quos ipsam blanditiis sequi enim at odit facilis cumque esse pariatur. Nesciunt!</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, magnam alias, deserunt consequatur molestias cupiditate ab impedit assumenda adipisci expedita voluptas amet necessitatibus? Perspiciatis dolorum, itaque reiciendis ipsam modi quo possimus, ea dicta exercitationem quibusdam asperiores! Quis iure odit vero, unde quaerat commodi modi accusamus explicabo ut magnam reiciendis voluptatibus accusantium eius sed. Assumenda sequi modi suscipit temporibus eligendi, qui iste fuga laborum! Alias incidunt corrupti, quae cupiditate fugiat doloribus?</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem ipsum dolor sit amet.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque earum facilis pariatur beatae non tenetur, facere quod, ad officia recusandae, similique qui voluptates sequi quo sunt voluptas nisi provident? Illum explicabo sed cupiditate velit dicta unde, animi, aut sint culpa quos delectus pariatur cumque praesentium enim doloremque perspiciatis officiis facilis neque vero impedit repellat similique? Temporibus dolor incidunt fugit aspernatur, suscipit vel, odit aperiam laudantium illo consequatur, quae culpa necessitatibus?</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem ipsum dolor sit.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius molestiae dolorum labore adipisci rerum perferendis quia assumenda esse mollitia, voluptates rem dolor cupiditate fuga reiciendis ratione quas voluptatum provident illo.</p>
<p>Sit iusto, officiis velit optio dignissimos corrupti. Dolores modi adipisci a atque necessitatibus ab itaque labore ipsum, sed sapiente cupiditate cumque voluptates inventore tempore, pariatur laboriosam nostrum perferendis nemo. Laboriosam amet nam illo natus repellat facere in quod nemo laudantium non nobis sunt, culpa ab aspernatur exercitationem explicabo ducimus assumenda impedit atque qui error quo quas! Ducimus ratione cupiditate molestias consequuntur autem deserunt maiores laborum distinctio, tenetur delectus id voluptatum facilis beatae libero odit placeat!</p>
</div>
</div>
<div class="card">
<div class="card__header">
<h3 class="card__headline">Lorem ipsum dolor sit.</h3>
</div>
<div class="card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id itaque reiciendis, consequuntur quidem similique debitis ut deserunt vel maxime exercitationem velit pariatur, quis iusto saepe nemo soluta rerum totam. Quae officiis veniam quas dolore quod? Odit officiis distinctio excepturi delectus consequatur accusamus mollitia veniam dolore quia. Accusamus hic delectus expedita veritatis atque odit doloribus rerum at accusantium, aut unde, soluta a numquam temporibus quasi nisi corporis. Recusandae cumque laboriosam obcaecati. </p>
</div>
</div>
Raw
style.css
.card {
}
.card__header {
}
.card__headline {
color: #a20000;
}
.card__body {
}
/* Kommentar entfernen, um ein kleines Grid zu bekommen! */
/*
body {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
*/
Raw
styles
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment