dfghjk
[s
Сообщений 1 страница 2 из 2
Поделиться22022-04-21 14:49:18
[hideprofile][html]<link href="https://fonts.googleapis.com/css?family=Gentium+Basic|Open+Sans+Condensed:300" rel="stylesheet">
<div id="gwrapper">
<section id="content">
<header id="image">
<img src="https://forumupload.ru/uploads/001b/66/80/2/900913.png" alt="CHARACTER ICON">
</header>
<main>
<h2 class="entry-title">Main Title Here</h2>
<article class="entry">
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
</article>
</main>
</section>
<section id="sidebar">
<p>set of your favorite lyrics go here</p>
</section>
</div>
<style>
div#gwrapper {
max-width: 700px;
width: 100%;
height: 500px;
max-height: 500px;
overflow: hidden;
display: flex;
padding: 2em;
background-color: #d9ead3;
margin: 1em auto;
letter-spacing: 0;
line-height: 1.3em;
color: #000;
}
#gwrapper section#content {
width: 100%;
display:inline-block;
padding-right: 1em;
line-height: 1.25em;
}
#gwrapper section#sidebar {
width: 30%;
display: inline-block;
font-family: 'Gentium Basic', serif;
font-size: .90em;
font-style: italic;
padding: 2em 0 0 2em;
border-left: 1px solid #000;
position: relative;
line-height: 1.25em;
}
#content header#image {
height: 40%;
width: auto;
min-width: 0;
padding: 0;
text-align: left;
}
div#gwrapper #content header#image img {
border-radius: 0 50px;
}
#content main {
height: 60%;
overflow: auto;
font-family: 'Gentium Basic', serif;
font-size: 11px;
padding-right: 1em;
}
#content h2.entry-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
border-bottom: 3px solid #000;
-webkit-box-shadow: inset 0 -4px 0 #000;
box-shadow: inset 0 -4px 0 #000;
}
main::-webkit-scrollbar {
width: .25em;
border: 0;
background: transparent;
}
main::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
main::-webkit-scrollbar-thumb {
background-color: #f1f1f1;
outline: 1px solid white;
border: 0;
}
#gwrapper p::-moz-selection { background: #C6C11F; }
#gwrapper p::selection { background: #C6C11F; }
span.credit {
position: absolute;
bottom: 0;
}
span.credit a {
text-decoration: none;
font-style: normal;
color: #666;
-webkit-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
-o-transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
transition: background .15s cubic-bezier(0.33, 0.66, 0.66, 1);
border-bottom: 3px solid #C6C11F;
-webkit-box-shadow: inset 0 -4px 0 #C6C11F;
box-shadow: inset 0 -4px 0 #C6C11F;
}
span.credit a:hover {
background-color: #C6C11F;
color: #000;
}
</style>[/html]