NOTICKET: CLEANUP

This commit is contained in:
Snoweuph 2024-02-19 21:54:29 +01:00
parent 3b236b5f28
commit 91a8d7b6d5
Signed by: Snoweuph
GPG key ID: A494330694B208EF
2 changed files with 60 additions and 36 deletions

View file

@ -1,10 +1,14 @@
/*#region Colors*/ /*#region Variables*/
:root { :root {
--black: black; --black: black;
--trancelucent: rgba(0, 0, 0, 0.5);
--white: white; --white: white;
--blue: #007ea7; --blue: #007ea7;
--navy-blue: #003459; --navy-blue: #003459;
--ice_blue: #c2eafc; --ice_blue: #c2eafc;
--spacing-small: 4px;
--spacing-big: 16px;
} }
/*#endregion*/ /*#endregion*/
/*#region Base Styling*/ /*#region Base Styling*/
@ -16,24 +20,30 @@ body {
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: var(--ice_blue); background-color: var(--ice_blue);
color: #00171f; color: var(--black);
} }
button { button {
background-color: var(--blue); background-color: var(--blue);
padding: 10px 20px; padding: var(--spacing-small);
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
background-color: #003459; background-color: var(--navy-blue);
} }
/*#endregion*/ /*#endregion*/
header { header {
position: sticky;
background-color: var(--navy-blue); background-color: var(--navy-blue);
outline: 5px solid var(--black); box-shadow: 0 var(--spacing-small) var(--spacing-small) var(--trancelucent);
color: var(--white); color: var(--white);
padding: 1px; height: 64px;
text-align: center; display: flex;
justify-content: center;
align-items: center;
}
header > h1 {
margin: 0;
} }
/*#region Entries*/ /*#region Entries*/
ul { ul {
@ -42,41 +52,48 @@ ul {
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px; gap: var(--spacing-big);
} }
li { li {
background-color: var(--white); background-color: var(--white);
padding: 10px; margin: 0;
margin-bottom: 30px; padding: var(--spacing-big);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
li :nth-child(3) { li :nth-child(3) {
flex-grow: 1; flex-grow: 1;
} }
li > img { li > figure{
width: 100%; position: relative;
padding: 0;
margin: 0;
}
li > figure > img {
aspect-ratio: 5/2; aspect-ratio: 5/2;
object-fit: cover; object-fit: cover;
width: 100%;
height: 100%;
} }
li > img:before { li > figure::before {
z-index: 10; content: "";
display: block;
content: "hello";
position: absolute; position: absolute;
width: 100px; width: 100%;
height: 100px; height: 100%;
left: 0px; box-shadow: inset 0 0 16px 2px var(--trancelucent);
right: 0px;
background-color: red;
box-shadow: inset 0 0 64px 8px red;
} }
/*#endregion*/ /*#endregion*/
footer { footer {
background-color: var(--blue); background-color: var(--blue);
outline: 5px solid var(--black); outline: 5px solid var(--black);
color: var(--white); color: var(--white);
padding: 10px 0; height: 64px;
text-align: center;
width: 100%; width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
footer > p {
margin: 0;
height: min-content;
} }

View file

@ -15,10 +15,13 @@
<main> <main>
<ul> <ul>
<li> <li>
<figure>
<img <img
src="img/ferienwohnung_am_see.jpg" src="img/ferienwohnung_am_see.jpg"
alt="Ferienwohnung am See" alt="Ferienwohnung am See"
/> />
</figure>
<h2>Ferienwohnung am See</h2> <h2>Ferienwohnung am See</h2>
<p> <p>
Genießen Sie einen erholsamen Aufenthalt in unserer charmanten Genießen Sie einen erholsamen Aufenthalt in unserer charmanten
@ -30,10 +33,12 @@
<button>Buchen</button> <button>Buchen</button>
</li> </li>
<li> <li>
<figure>
<img <img
src="img/luxusvilla_berge.jpg" src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen" alt="Luxusvilla in den Bergen"
/> />
</figure>
<h2>Luxusvilla in den Bergen</h2> <h2>Luxusvilla in den Bergen</h2>
<p> <p>
Entfliehen Sie dem Alltag und verbringen Sie Ihren Urlaub in unserer Entfliehen Sie dem Alltag und verbringen Sie Ihren Urlaub in unserer
@ -45,10 +50,12 @@
<button>Buchen</button> <button>Buchen</button>
</li> </li>
<li> <li>
<figure>
<img <img
src="img/luxusvilla_berge.jpg" src="img/luxusvilla_berge.jpg"
alt="Luxusvilla in den Bergen" alt="Luxusvilla in den Bergen"
/> />
</figure>
</li> </li>
</ul> </ul>
</main> </main>