NOTICKET: CLEANUP
This commit is contained in:
parent
3b236b5f28
commit
91a8d7b6d5
2 changed files with 60 additions and 36 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue