diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..687b753 --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + + aufgabe1 + + + + + + + + +

Aufgabe: Article Preview Card

+ +
+ +
+ img +
+

Veröffentlich 24.4.2024

+ avatar1 +

Lian

+
+ +
+ Reisen +
+ +
+
+

Die besten Reisetipps für den Sommer

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et quis nostrud exercitation ullamco laboris + et quis nostrud exercitation ullamco laboris + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris +

+
+ lesen +
+
+ +
+ + + +
+ + img +
+

Veröffentlich 24.4.2024

+ avatar1 +

Railey

+
+
+ Lifestyle + Tips +
+ +
+
+

So wird 2025 dein Jahr

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et quis nostrud exercitation ullamco laboris + et quis nostrud exercitation ullamco laboris + dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris +

+ +
+ lesen +
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8446e5 --- /dev/null +++ b/style.css @@ -0,0 +1,128 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + font-family: sans-serif; + font-size: 1rem; +} + +body { + margin: 2rem; +} +/* preview-card-right*/ + +.preview-card { + display: inline-block; + position: relative; + margin: 5px; + max-width: 400px; + padding: 1rem; + border: 2px solid black; + border-radius: 0.75rem; + box-shadow: 10px 10px blueviolet; +} + +.preview-card > img { + width: 100%; + height: 150px; + object-fit: cover; + border-radius: 0.35rem; + object-position: middle; +} +.author { + display: flex; + margin-block: 1rem 0; + align-items: center; + font-size: 0.75rem; + color: gray; + gap: 0.45rem; +} +.avatar-img { + display: flex; + width: 10%; + border: 2px solid blueviolet; + border-radius: 100%; +} +p:first-child { + flex-grow: 1; +} +.category { + display: flex; + padding: 1rem 0 1rem; + gap: 0.45rem; +} +.category a { + padding: 4px 9px; + background-color: deepskyblue; + color: black; + border-radius: 1rem; + font-size: 14px; +} +h2 { + display: flex; + padding: 0 0 1rem; + margin-block: 0; + font-size: 1.25rem; +} +.butten { + padding: 1rem 0 0.75rem; +} +.a1 { + padding: 8px 16px; + text-decoration: none; + background-color: blueviolet; + color: white; + border-radius: 0.25rem; +} +/* preview-card-left*/ + +.preview-card-2 { + display: inline-block; + position: relative; + margin: 5px; + max-width: 400px; + padding: 1rem; + border: 2px solid black; + border-radius: 0.75rem; + box-shadow: 10px 10px darkorange; +} + +.preview-card-2 > img { + width: 100%; + height: 150px; + object-fit: cover; + border-radius: 0.35rem; + object-position: middle; +} +.author-2 { + display: flex; + margin-block: 1rem 0; + align-items: center; + font-size: 0.75rem; + color: gray; + gap: 0.45rem; +} +.avatar-img-2 { + display: flex; + width: 10%; + border: 2px solid darkorange; + border-radius: 100%; +} + +.content-2 h2 { + display: flex; + padding: 0 0 2.45rem; + margin-block: 0; + font-size: 1.25rem; + align-items: center; +} +.a2 { + padding: 8px 16px; + text-decoration: none; + background-color: darkorange; + color: white; + border-radius: 0.25rem; +}