Suzunari_Code

[nobr]



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


[comment]--------------------CS Details--------------------[/comment]

[div class="root"]
     [div class="flexcontainer"]
          [div class="flexbox"]
               [div class="seikamainL"]
                    [div class="seikaIMG" style="background: url('https://dl.dropboxusercontent.com/s/yg07rosap2zk9yb/SeikaMain.jpg') 50% 25%/400px 600px no-repeat;"]
                    [/div]
               [/div]
          [/div]
          [div class="flexbox"]
               [div class="scrollbox"]
                    [div class="JP" style="margin-top: 25px;"]
                         鈴鳴盛夏
                    [/div]
                    [div class="EN"]
                         suzunari seika
                    [/div]
                    [div class="indented"]
                         [div class="accentheader"]
                              location
                         [/div]
                              blep[br][/br]
                         [div class="accentheader"]
                              tags
                         [/div]
                              blep
                    [/div]
                    [div class="bodytext"]
                         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.

                         [br][/br][br][/br]

                         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.

                         [br][/br][br][/br]

                         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.
                    [/div]
               [/div]
          [/div]
     [/div]
[/div]
[div=display: block; margin: -60px auto 60px; width: 100%; max-width: 820px; font-size: 9px; color: #aaaaaa;]code by [USER=20950]@Nano[/USER][/div]

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

[comment]--------------------CSS--------------------[/comment]

[class name="root"]
     --bg: #fefefe;
     --accent: #b54434;
     --grey1: #656765;
     --grey2: #aaaaaa;
     --grey3: #e8e8e8;
     --text: #878787;
     --s1: 45px;
     --s2: 35px;
     --s3: 25px;
     --s4: 1.0em;
     --s5: 0.9em;
     --JP: 'Sawarabi Mincho', sans-serif;
     --EN: 'Work Sans', sans-serif;
     --LH: 125%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin: 0 auto;
     padding: 50px 0;
     background-color: var(--bg);
     font-size: initial;
[/class]

[class name="flexcontainer"]
     flex: 1 0 100%;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     margin-left: -20px;
     width: 100%;
     max-width: 840px;
[/class]

[class name="flexbox"]
     flex: 1 0 300px;
     margin-top: 10px;
     margin-bottom: 10px;
     margin-left: 20px;
     width: 100%;
     max-width: 400px;
     height: 70vh;
     max-height: 650px;
     background-color: var(--bg);
     overflow: hidden;
     position: relative;
[/class]

[class name="seikamainL"]
     box-sizing: border-box;
     padding: 25px;
     border: 1px solid var(--grey3);
     background-color: var(--bg);
[/class]

[class name="seikaIMG"]
     display: flex;
     flex-flow: column-reverse nowrap;
     width: 100%;
     max-width: 348px;
     height: calc(70vh - 52px);
     max-height: 598px;
     background: url('') 50% 25%/400px 600px no-repeat;
[/class]

[class name="JP"]
     font-size: var(--s1);
     font-family: var(--JP);
     font-weight: 500;
     color: var(--accent);
     line-height: 100%;
[/class]

[class name="EN"]
     font-size: var(--s2);
     font-family: var(--EN);
     font-weight: 900;
     color: var(--grey1);
     line-height: 100%;
[/class]

[class name="scrollbox"]
     padding-right: 18px;
     width: 100%;
     max-width: 400px;
     height: 70vh;
     max-height: 650px;
     background-color: var(--bg);
     overflow-y: auto;
[/class]

[class name="bodytext"]
     margin-top: 25px;
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="indented"]
     margin-top: 25px;
     margin-left: 20px;
     width: calc(100% - 20px);
     font-family: var(--EN);
     font-size: var(--s4);
     text-align: justify;
     color: var(--text);
     line-height: var(--LH);
[/class]

[class name="accentheader"]
     display: inline-block;
     font-family: var(--EN);
     font-size: var(--s4);
     line-height: (--LH);
     color: var(--accent);
     text-transform: uppercase;
[/class]



[/nobr]