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;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<img
|
||||
class="logo"
|
||||
height="44p"
|
||||
width="227"
|
||||
src="./assets/logo_4x.png"
|
||||
@ -56,35 +58,62 @@
|
||||
"
|
||||
/>
|
||||
|
||||
<nav>
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="#01">Home</a></li>
|
||||
<li><a href="#02">Персонажи</a></li>
|
||||
<li><a href="#03">Локации</a></li>
|
||||
<li><a href="#04">Эризоды</a></li>
|
||||
<li><a class="link" href="#01">Home</a></li>
|
||||
<li><a class="link link__contrast" href="#02">Персонажи</a></li>
|
||||
<li><a class="link link__contrast" href="#03">Локации</a></li>
|
||||
<li><a class="link link__contrast" href="#04">Эризоды</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<header class="card card-main">
|
||||
<div>
|
||||
<h1 class="h1">Персонажи из <br /><span>огурчиковой вселенной</span></h1>
|
||||
<div class="card-text">
|
||||
<h1 class="h1">
|
||||
Персонажи из <br /><span class="brand-text"
|
||||
>огурчиковой вселенной</span
|
||||
>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
На этой странице представлены персонажи из сериала “Rick and Morty”.
|
||||
Этот популярный анимационный сериал, созданный Джастином Ройландом и
|
||||
Дэном Хармоном, рассказывает о приключениях Рика Санчеза,
|
||||
гениального и эксцентричного ученого, и его внука Морти Смита.
|
||||
<p class="p card--text__p">
|
||||
На этой странице представлены персонажи из сериала “<a
|
||||
class="link"
|
||||
href="#"
|
||||
>Rick and Morty</a
|
||||
>”. Этот популярный анимационный сериал, созданный Джастином
|
||||
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
|
||||
Санчеза, гениального и эксцентричного ученого, и его внука Морти
|
||||
Смита.
|
||||
</p>
|
||||
</div>
|
||||
<img src="./assets/cucumber.png" alt="" />
|
||||
<img class="card--img" src="./assets/cucumber.png" alt="" />
|
||||
</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>
|
||||
|
||||
<aside></aside>
|
||||
<footer></footer>
|
||||
<footer class="page-footer"></footer>
|
||||
</body>
|
||||
</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 {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-content: stretch;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
padding-left: 24px;
|
||||
border-bottom: 1px solid var(--brand);
|
||||
min-height: 62px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -34,4 +82,46 @@ body {
|
||||
.h1 {
|
||||
margin-top: 32px;
|
||||
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