a bit more layout

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-03-24 00:40:18 +03:00
parent 596070044e
commit 650253121c
3 changed files with 136 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -34,12 +34,14 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
} }
</style> </style>
</head> </head>
<body> <body>
<header id="header"> <header id="header">
<img <img
class="logo"
height="44p" height="44p"
width="227" width="227"
src="./assets/logo_4x.png" src="./assets/logo_4x.png"
@ -56,35 +58,62 @@
" "
/> />
<nav> <nav class="nav">
<ul> <ul>
<li><a href="#01">Home</a></li> <li><a class="link" href="#01">Home</a></li>
<li><a href="#02">Персонажи</a></li> <li><a class="link link__contrast" href="#02">Персонажи</a></li>
<li><a href="#03">Локации</a></li> <li><a class="link link__contrast" href="#03">Локации</a></li>
<li><a href="#04">Эризоды</a></li> <li><a class="link link__contrast" href="#04">Эризоды</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="main"> <main class="main">
<header class="card card-main"> <header class="card card-main">
<div> <div class="card-text">
<h1 class="h1">Персонажи из <br /><span>огурчиковой вселенной</span></h1> <h1 class="h1">
Персонажи из <br /><span class="brand-text"
>огурчиковой вселенной</span
>
</h1>
<p> <p class="p card--text__p">
На этой странице представлены персонажи из сериала “Rick and Morty”. На этой странице представлены персонажи из сериала “<a
Этот популярный анимационный сериал, созданный Джастином Ройландом и class="link"
Дэном Хармоном, рассказывает о приключениях Рика Санчеза, href="#"
гениального и эксцентричного ученого, и его внука Морти Смита. >Rick and Morty</a
>”. Этот популярный анимационный сериал, созданный Джастином
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
Санчеза, гениального и эксцентричного ученого, и его внука Морти
Смита.
</p> </p>
</div> </div>
<img src="./assets/cucumber.png" alt="" /> <img class="card--img" src="./assets/cucumber.png" alt="" />
</header> </header>
<article class="card card__toRight">
<div class="card-text">
<h1 class="h1">
Персонажи из <br /><span class="brand-text"
>огурчиковой вселенной</span
>
</h1>
<article class="card"></article> <p class="p card--text__p">
На этой странице представлены персонажи из сериала “<a
class="link"
href="#"
>Rick and Morty</a
>”. Этот популярный анимационный сериал, созданный Джастином
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
Санчеза, гениального и эксцентричного ученого, и его внука Морти
Смита.
</p>
</div>
<img class="card--img" src="./assets/cucumber.png" alt="" />
</article>
</main> </main>
<aside></aside> <aside></aside>
<footer></footer> <footer class="page-footer"></footer>
</body> </body>
</html> </html>

View File

@ -1,15 +1,63 @@
:root {
--dark-link: #2E81FF;
--main: #43888C;
--main-transparent: #44898d66;
--brand: #4D7F1E;
--accent: #6A1072;
--bg-main: #cee6e9;
--text: #000000;
--text-contrast: #ffffff;
}
html { height: 100%; }
body { body {
font-family: "PT Sans", sans-serif; font-family: "PT Sans", sans-serif;
background-color: rgb(206, 230, 233); background-color: var(--bg-main);
color: var(--text);
font-size: 24px;
height: 100%;
}
.brand-text {
color: var(--brand);
}
.link {
font-weight: 400;
text-decoration: underline;
text-decoration-skip-ink: none;
color: var(--dark-link);
}
.link__contrast {
color: var(--text-contrast);
}
.p {
font-size: 24px;
} }
#header { #header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: stretch;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 32px; margin-bottom: 32px;
padding-left: 24px;
border-bottom: 1px solid var(--brand);
min-height: 62px;
align-items: flex-start;
}
.logo {
margin: auto 0;
} }
.main { .main {
@ -34,4 +82,46 @@ body {
.h1 { .h1 {
margin-top: 32px; margin-top: 32px;
margin-bottom: 24px; margin-bottom: 24px;
font-size: 47px;
} }
.card--text {
display: flex;
flex-direction: column;
margin-right: auto;
}
.card__toRight {
flex-direction: row-reverse;
}
.card__toRight .card--img {
margin-left: 0;
margin-right: auto;
}
.card--text__p {
max-width: 630px;
}
.card--img {
margin-left: auto;
}
.nav ul {
display: flex;
gap: 12px;
}
.nav {
background-color: var(--main-transparent);
padding: 16px 64px 16px 33px;
border-bottom-left-radius: 20px;
font-size: 16px;
}
.page-footer {
min-height: 100px;
background-color: var(--accent);
margin-top: 64px;
}