a bit more layout
This commit is contained in:
parent
596070044e
commit
650253121c
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 66 KiB |
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user