[f2u] pay per view (code)

Zylphide

Info


Created
2 years, 8 months ago
Creator
Zylphide
Favorites
1

Profile


  
<!-------------------------------------------
    |           PAY PER VIEW           | 
    |           by Zylphide            | 
---------------------------------------------

image credits: Zylphide (if anyone cares they're Diplodia pinea spores under 40x magnification, isolated from infected Austrian pine needles)

------------------------->

<div class="row justify-content-center">

<!---- page background --->
<div class="col-lg-10 bg-faded p-5">
    
    <!--- header --->
    <div class="row">
        
        <!--- header left info ---->
        <div class="col-lg-8">
            <span class="display-4" style="font-size: 1.4rem">Journal Title</span>
        </div>
        <!--- header left info END ---->
        
        <!--- header right info ---->
        <div class="col-lg-4" align="right">
            Volume xx, Issue x, Month Year, Pages ###-###
        </div>
        <!--- header right info END ---->
    </div>
    <!--- header END ---->
    
    <hr class="mt-2">
    
    <!--- title info ---->
    <p class="mb-0"><i>Article/Review/Whatever</i></p>
    
    <p class="display-4"><b>Title of article goes here: usually it is very long and overly specific and probably takes up at least two lines of text or else you are not a real scientist</b></p>
    <!--- title info END ----></p>
    
    <!--- author info ----->
    <p style="font-size: 1.1rem">by 
        <a href="#">Firstname Lastname</a>, 
        <a href="#">Firstname Lastname</a>, and
        <a href="#">Firstname Lastname</a>
    
    </p>
    <!--- author info END ----->
    
    <!--- abstract ---->
    <div class="row">
    
        <!---- left section text ---->
        <div class="col-lg-2 my-auto">
            <p class="my-1"><i>Article history:</i></p>
            <p class="my-0" style="font-size: 0.85rem">Received:</p>
            <p class="my-0" style="font-size: 0.85rem">dd Month yyyy</p>
            <p class="my-0" style="font-size: 0.85rem">Accepted:</p>
            <p class="my-0" style="font-size: 0.85rem">dd Month yyyy</p>
            <p class="my-0" style="font-size: 0.85rem">Published:</p>
            <p class="my-0" style="font-size: 0.85rem">dd Month yyyy</p>
            
        </div>
        <!---- left section text END ---->
        
        <!---- right section text ----->
        <div class="col-lg-10">
            
            <p class="display-4 mt-3 mb-2" style="font-size: 1.4rem">Abstract</p>
            
            <div class="card p-3 rounded-0 border-0" style="text-align: justify; text-justify: inter-word;">
            Academics who want to show their research to the world can either pay a publisher $1600-$5000 to publish their results in a free, open-access journal, or have their results be hidden by a paywall of $30-$100 per article. Considering that academic labs are funded by taxpayer dollars, the academic publishing industry is essentially forcing the taxpayers to pay twice to see the research they funded and contributing to the growing inaccessiblity of science.  In this HTML I will–
            </div>
            
            <p class="my-2"><b>Keywords:</b> keyword one; keyword two; keyword three; keyword four</p>
        </div>
        <!---- right section text END ----->
    </div>
    <!--- abstract END ---->
    
    <hr class="mb-3">
    
    <!--- main text area ---->
    
    <!---- section 1 ---->
    <div class="container px-3 my-4">
        <p class="display-4 mb-1" style="font-size: 1.1rem"><b>1. Introduction</b></p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum sed arcu non odio euismod. Aenean sed adipiscing diam donec adipiscing tristique. Diam vulputate ut pharetra sit amet aliquam id. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Quisque id diam vel quam. Morbi leo urna molestie at. Magnis dis parturient montes nascetur ridiculus mus. Bibendum ut tristique et egestas. Eget mi proin sed libero.
        </p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Eget velit aliquet sagittis id consectetur. Nec nam aliquam sem et tortor. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Dolor morbi non arcu risus quis varius quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Tempus urna et pharetra pharetra. Amet est placerat in egestas. Leo vel orci porta non pulvinar neque laoreet. Donec adipiscing tristique risus nec feugiat in. Tristique senectus et netus et. Laoreet sit amet cursus sit amet. Diam phasellus vestibulum lorem sed risus ultricies.
        </p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Habitant morbi tristique senectus et netus et malesuada fames ac. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Sit amet mauris commodo quis imperdiet massa tincidunt. Interdum consectetur libero id faucibus. Sed vulputate mi sit amet mauris commodo quis. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Diam donec adipiscing tristique risus nec feugiat in fermentum. Vel risus commodo viverra maecenas accumsan lacus vel. Semper viverra nam libero justo. Ut sem viverra aliquet eget sit amet tellus. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Fermentum posuere urna nec tincidunt praesent semper. Lobortis feugiat vivamus at augue eget arcu. Faucibus et molestie ac feugiat. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Ultrices gravida dictum fusce ut. Morbi leo urna molestie at elementum eu facilisis sed. Duis at consectetur lorem donec massa. Risus feugiat in ante metus. Ultricies tristique nulla aliquet enim tortor at auctor urna.
        </p>
    </div>
    <!---- section 1 END ---->
    
    <!---- section 2 ---->
    <div class="container px-3 my-4">
        
        <p class="display-4 mb-1" style="font-size: 1.1rem"><b>2. Methods and Materials</b></p>
        
        <p class="display-4 mb-1" style="font-size: 1rem"><i>2.1 Subsection One</i></p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum sed arcu non odio euismod. Aenean sed adipiscing diam donec adipiscing tristique. Diam vulputate ut pharetra sit amet aliquam id. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Quisque id diam vel quam. Morbi leo urna molestie at. Magnis dis parturient montes nascetur ridiculus mus. Bibendum ut tristique et egestas. Eget mi proin sed libero.
        </p>
        
        <p class="display-4 mb-1" style="font-size: 1rem"><i>2.2 Subsection Two</i></p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Eget velit aliquet sagittis id consectetur. Nec nam aliquam sem et tortor. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Dolor morbi non arcu risus quis varius quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Tempus urna et pharetra pharetra. Amet est placerat in egestas. Leo vel orci porta non pulvinar neque laoreet. Donec adipiscing tristique risus nec feugiat in. Tristique senectus et netus et. Laoreet sit amet cursus sit amet. Diam phasellus vestibulum lorem sed risus ultricies.
        </p>
    </div>
    <!---- section 2 END ---->
    
    <!---- section 3 ---->
    <div class="container px-3 my-4">
        <p class="display-4 mb-1" style="font-size: 1.1rem"><b>3. Results</b></p>
        
        <!---- image and description ---->
        <div class="row my-3 justify-content-center">
            <div class="col-lg-9">
            <div class="card p-3 border-0 rounded-0"> 
            
                <!---- image ----->
                <img src="https://i.imgur.com/gCrtQl8.png">
                <!---- image END ---->
                
                <!--- image description ---->
                <p class="mt-1"><b>Figure 1</b>. Lorem ipsum dolor sit amet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Id neque aliquam vestibulum morbi blandit. Mauris augue neque gravida in fermentum. Posuere ac ut consequat semper.</p>
                <!--- image description END ---->
                
            </div>    
            </div>
        </div>
        <!---- image and description END ---->
        
        <p style="text-align: justify; text-justify: inter-word;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum sed arcu non odio euismod. Aenean sed adipiscing diam donec adipiscing tristique. Diam vulputate ut pharetra sit amet aliquam id. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Quisque id diam vel quam. Morbi leo urna molestie at. Magnis dis parturient montes nascetur ridiculus mus. Bibendum ut tristique et egestas. Eget mi proin sed libero.
        </p>
        
        <!---- data table ---->
        <div class="row my-3 justify-content-center">
            <div class="col-lg-9">
            <div class="card p-3 border-0 rounded-0">
                
                <!---- description ---->
                <p class="mb-1"><b>Table 1.</b> Lorem ipsum dolorsit amet.</p>
                <!---- description END ---->
                
                <table class="text-center" style="width:100%">
                  
                  <!--- add more entries in this section to get more columns ---->
                  <tr>
                    <th style="text-align: center">title</th>
                    <th style="text-align: center">title</th>
                    <th style="text-align: center">title</th>
                    <th style="text-align: center">title</th>
                  </tr>
                  <!---- columns END --->
                  
                  <!----- row 1 data ------>
                  <tr>
                    <td>data 1</td>
                    <td>data 2</td>
                    <td>data 3</td>
                    <td>data 4</td>
                  </tr>
                  <!---- row 1 data END ---->
                  
                  <!----- row 2 data ---->
                  <tr>
                    <td>data 5</td>
                    <td>data 6</td>
                    <td>data 7</td>
                    <td>data 8</td>
                  </tr>
                  <!----- row 2 data END ---->
                  
                  <!----- add more <tr> sections above this line for more rows ----->
                </table> 
            </div>
            </div>
        </div>
        <!---- data table END --->
        
        <p style="text-align: justify; text-justify: inter-word;">
            Eget velit aliquet sagittis id consectetur. Nec nam aliquam sem et tortor. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Dolor morbi non arcu risus quis varius quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Tempus urna et pharetra pharetra. Amet est placerat in egestas. Leo vel orci porta non pulvinar neque laoreet. Donec adipiscing tristique risus nec feugiat in. Tristique senectus et netus et. Laoreet sit amet cursus sit amet. Diam phasellus vestibulum lorem sed risus ultricies.
        </p>
    </div>
    <!---- section 3 END ---->
    
    <!---- section 4 ---->
    <div class="container px-3 my-4">
        <p class="display-4 mb-1" style="font-size: 1.1rem"><b>4. Conclusion</b></p>
        
        <p style="text-align: justify; text-justify: inter-word;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi. Duis ultricies lacus sed turpis. Dictum fusce ut placerat orci nulla. Vitae auctor eu augue ut. Tincidunt nunc pulvinar sapien et. Tempor orci dapibus ultrices in iaculis nunc. Auctor elit sed vulputate mi sit amet. Lobortis feugiat vivamus at augue eget. Pellentesque habitant.
        </p>
        
    </div>
    <!---- section 4 END ---->    
    
    
    <!---- section 5 ------>
    <div class="container px-3 my-4">
        <p style="font-size: 0.85rem">
            <b> Acknowledgements:</b> Huge shoutout to the creator of sci-hub for making scientific articles more accessible to everyone. Highly recommend whether you're a college student or not.
        </p>
    </div>
    
    <!---- section 5 END ------>
    
    <!--- main text area END ---->
    
    <hr>
    
    <!--- footer --->
    <div class="row">
        
        <!---- footnote left info ---->
        <div class="col-lg-8">
            https://doi.org/something-idk-journals-wont-be-caught-dead-without-a-doi-link
        </div>
        <!---- footnote left info END ---->
        
        <!---- footnote right info ---->
        <div class="col-lg-4" align="right">
            https://journaldomain.com
        </div>
        <!---- footnote right info END ---->
    </div>
    <!--- footer END ---->
</div>
<!---- page background END ---->
</div>

<!--- credits, do not remove! --->
 <div class="col justify-content-center">
    <a class="text-center pt-2" style="font-size:12px;" href="https://toyhou.se/~forums/16.htmlcss-graphics/181004.-zyl-kamuiia-s-organic-html-new-12-8-"><i class="fa fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
    </div>
</div>