Footnote concept

Developer
Matt Gross
Size
3,056 Kb
Views
36,432
  1. Footnote concept Previews
  2. Footnote concept HTML Codes
  3. Footnote concept CSS Codes
  4. Footnote concept JS Codes

How do I make an footnote concept?

Working out a non-intrusive method of making footnotes in long articles. What is a footnote concept? How do you make a footnote concept? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.

Footnote concept Previews
IQ Test

Footnote concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Footnote concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
<article> <h1>On the Raging Compendium</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis justo. Donec venenatis lacinia pretium. Sed pretium quam quam, vel fringilla velit condimentum ac. Praesent nisl libero, adipiscing vitae hendrerit et, varius vitae ante. Praesent semper, dui id gravida porttitor, leo justo tempus leo, ac viverra lacus neque vitae neque. Duis pellentesque quam vel fringilla eleifend. Donec semper convallis sem, tincidunt porttitor elit facilisis id. Duis pharetra magna justo, vitae porttitor justo vehicula fermentum. Nullam ligula augue, tempor sit amet nisi id, aliquam cursus ipsum. Nulla ultrices tristique placerat. Nunc scelerisque risus vitae nisi vestibulum, quis iaculis dui lobortis. Mauris sit amet tortor vel arcu consequat consectetur a et ipsum. Fusce nec urna luctus, venenatis leo a, ultrices orci.<span class="note note-1">1.</span></p> <aside class="footnote footnote-1"> <div class="container"> <p>This is a footnote</p> </div> </aside> <p>Integer vel nunc id dui dictum ornare. Donec odio lorem, aliquet eget pharetra vitae, fermentum ut lacus. Proin porta lacinia consectetur. Nullam vehicula, felis at condimentum molestie, tellus sapien pellentesque mauris, sed posuere ligula dolor sit amet ante. Ut tincidunt est mauris, vel scelerisque dolor aliquet tristique. Proin justo metus, condimentum quis purus id, posuere sollicitudin orci. Vivamus sit amet urna volutpat, elementum eros vitae, tempor neque. Nunc eu odio sit amet augue condimentum mattis sed ac tortor. Vivamus commodo, libero quis varius auctor, nunc dolor sollicitudin lorem, eu mattis nibh sapien eget augue. Maecenas feugiat imperdiet dui, sit amet commodo justo iaculis eget. In hac habitasse platea dictumst. Proin ante nisi, lacinia sit amet commodo sit amet, convallis et erat. Nullam viverra accumsan enim eget interdum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at iaculis justo. Donec venenatis lacinia pretium. Sed pretium quam quam, vel fringilla velit condimentum ac. Praesent nisl libero, adipiscing vitae hendrerit et, varius vitae ante. Praesent semper, dui id gravida porttitor, leo justo tempus leo, ac viverra lacus neque vitae neque. Duis pellentesque quam vel fringilla eleifend. Donec semper convallis sem, tincidunt porttitor elit facilisis id. Duis pharetra magna justo, vitae porttitor justo vehicula fermentum. Nullam ligula augue, tempor sit amet nisi id, aliquam cursus ipsum. Nulla ultrices tristique placerat. Nunc scelerisque risus vitae nisi vestibulum, quis iaculis dui lobortis. Mauris sit amet tortor vel arcu consequat consectetur a et ipsum. Fusce nec urna luctus, venenatis leo a, ultrices orci.</p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Footnote concept - Script Codes CSS Codes

body { font-size: 18px; text-rendering: optimizeLegibility; color: #333; padding: 0 40px;
}
article { margin: 100px auto; max-width: 700px; line-height: 1.5;
}
h1 { font-family: 'Libre Baskerville', serif; font-weight: 300; text-align: center;
}
h1:before,
h1:after { content: ''; display: inline-block; vertical-align: middle; border-bottom: 1px solid #ccc; margin: 0 10px; width: 50px;
}
span.note { cursor: pointer; display: inline-block; vertical-align: middle; height: 1.2em; width: 1.2em; line-height: 1.3; text-align: center; margin: 0 10px; color: #87AACF; border: 1px solid #87AACF; -webkit-transition: .2s ease; transition: .2s ease;
}
span.note:hover { background: #87AACF; color: #fff;
}
aside { overflow: hidden; height: 0px; margin: 0 30px; padding-left: 1.2em; font-family: 'Libre Baskerville', serif; font-style: italic; color: #999; background: #fff; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-shadow: 0 0 0 0 #eee; -webkit-transition: .3s ease; transition: .3s ease;
}
aside.active { height: 60px;
/* border-color: #87AACF; */ box-shadow: -15px -15px 0 -10px #eee;
}
div.container { overflow: visible;
}

Footnote concept - Script Codes JS Codes

$( 'span.note-1' ).click(function() { $( 'aside.footnote-1' ).toggleClass( "active" );
});
Footnote concept - Script Codes
Footnote concept - Script Codes
Home Page Home
Developer Matt Gross
Username mattgrosswork
Uploaded August 28, 2022
Rating 3
Size 3,056 Kb
Views 36,432
Do you need developer help for Footnote concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Gross (mattgrosswork) Script Codes
Name
Easy Lines Around a Subtitle
Super Basic Inline Menu
EvenVision Branded Ajax Loader
Circle Hovers
Working on a Volusion version of a Drupal Theme
Basic Flexbox Layout
Playing with transition timing
Super Basic Menu with Best Practices
JS Input Selector
Simple Skewed Image Container
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!