reSuzunari.Code

[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.

[font=Sawarabi Mincho].[/font]
[font=Work Sans].[/font]
[/comment][comment]

// accents

[/comment][border=0; padding: 0;
     --bgcolor: #fefefe;
     --accent: #b54434;
     --text: #878787;
     --mainimg: url('https://dl.dropboxusercontent.com/s/yg07rosap2zk9yb/SeikaMain.jpg') center/cover no-repeat;

     width: 100%;
     font-size: initial;
][border=0px; display: flex; flex-flow: row wrap; justify-content: center; margin: 0 auto; padding: 50px 0; background: var(--bgcolor); font-size: initial;][border=0px; flex: 1 0 100%; display: flex; flex-flow: row wrap; justify-content: center; margin-left: -20px; padding: 0; width: 100%; max-width: 840px;][comment]

// left side //

[/comment][border=0px; flex: 1 0 300px; margin: 10px 0 10px 20px; padding: 0; width: 100%; max-width: 400px; height: 70vh; max-height: 650px; min-height: 400px; background: var(--bgcolor); overflow: hidden; position: relative;][border=1px solid #e8e8e8; box-sizing: border-box; padding: 25px; background: var(--bgcolor);][border=0px; display: flex; flex-flow: column-reverse nowrap; padding: 0; width: 100%; max-width: 348px; height: calc(70vh - 52px); max-height: 598px; min-height: 348px; background: var(--mainimg);][/border][/border][/border][comment]

// right side //

[/comment][border=0px; flex: 1 0 300px; margin: 10px 0 10px 20px; padding: 0; width: 100%; max-width: 400px; height: 70vh; max-height: 650px; min-height: 400px; background: var(--bgcolor); overflow: hidden; position: relative;][border=0px; padding: 0; padding-right: 18px; width: 100%; max-width: 400px; height: 70vh; max-height: 650px; min-height: 400px; background: var(--bgcolor); overflow-y: auto;][comment]

// header //

[/comment][border=0; top: 0; padding: 25px 0 15px; width: 100%; background: var(--bgcolor); position: sticky;][border=0px; padding: 0; font-family: 'Sawarabi Mincho', sans-serif; font-size: 45px; font-weight: 500; color: var(--accent); line-height: 100%;]鈴鳴盛夏[/border][border=0px; padding: 0; font-family: 'Work Sans', sans-serif; font-size: 35px; font-weight: 900; color: #656765; line-height: 100%;]suzunari seika[/border][/border][comment]

// location + tags //

[/comment][border=0px; margin-top: 10px; margin-left: 20px; padding: 0; width: calc(100% - 20px); font-family: 'Work Sans', sans-serif; font-size: 1.0em; text-align: justify; color: var(--text); line-height: 125%;][border=0px; display: inline-block; padding: 0; color: var(--accent); text-transform: uppercase;]location[/border] blep
[border=0px; display: inline-block; padding: 0; color: var(--accent); text-transform: uppercase;]tags[/border] blep[/border][comment]

// body text //

[/comment][border=0px; margin-top: 25px; padding: 0; font-family: 'Work Sans', sans-serif; font-size: 1.0em; text-align: justify; color: var(--text); line-height: 125%;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie dictum risus, vel tincidunt urna iaculis id. Morbi sit amet augue finibus, viverra velit in, egestas tellus. Vivamus quis scelerisque mi, at ornare odio. Donec eget cursus nisl. Aenean suscipit, purus nec fringilla imperdiet, massa arcu malesuada turpis, quis consequat justo odio nec velit. Vestibulum dui ante, aliquet ut nisl nec, vulputate efficitur justo. Cras eros arcu, ultrices ac scelerisque accumsan, posuere vitae nisi. Donec eleifend porta vehicula. Morbi et aliquam justo, facilisis luctus elit. Suspendisse vel lacus rhoncus, tincidunt leo ut, maximus sem. Sed id quam non nisl vehicula finibus. Nullam eleifend sit amet purus id pulvinar. In hac habitasse platea dictumst. Donec gravida neque ac dolor bibendum varius porta at urna. Nullam lacinia tempor augue, at iaculis urna posuere quis. Praesent quis tellus malesuada, malesuada mi at, consequat libero.

Ut malesuada dignissim risus non congue. Suspendisse tristique sapien enim, ut rutrum urna interdum et. Sed feugiat orci sed nulla ultricies rhoncus sed eu tellus. Maecenas gravida porttitor turpis eget dapibus. Mauris ac tortor mauris. Ut posuere non magna in eleifend. Nunc a mauris vulputate, facilisis lectus eu, ultricies augue. Aenean eget rhoncus magna, nec interdum velit. Cras vel urna ut ligula condimentum venenatis. Praesent posuere urna non ullamcorper viverra. Fusce aliquam, ante nec facilisis commodo, urna turpis tincidunt neque, ac fringilla ipsum nunc sit amet tortor.

Fusce in dolor elementum, euismod tellus et, placerat diam. Nam scelerisque ante sed odio mattis, at placerat lorem rutrum. Nullam in lacinia nisi. Aenean varius commodo arcu, sed laoreet neque tempor auctor. Vestibulum lobortis tincidunt neque. Quisque fringilla metus eget rutrum ornare. Maecenas euismod urna libero, et blandit leo pulvinar et.[/border][/border][/border][/border][/border][/border][border=0px; display: block; margin: -60px auto 60px; padding: 0; width: 100%; max-width: 820px; font-size: 9px; color: #aaaaaa;]code by [USER=20950]@Nano[/USER][/border]