<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< title > I2P Styleguide< / title >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/static/open-iconic-bootstrap.css" / >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/static/bootstrap.min.css" >
< link rel = "stylesheet" href = "/i2p-styleguide/assets/styles/main.css" >
< link rel = "shortcut icon" type = "image/png" href = "/i2p-styleguide/assets/images/favicon.png" / >
< link href = "/i2p-styleguide/assets/fonts/sourcesans.css" rel = "stylesheet" >
< link href = "/i2p-styleguide/assets/fonts/sourcecode.css" rel = "stylesheet" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< / head >
< body >
< nav class = "navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top" >
< a class = "navbar-brand" href = "https://geti2p.net/" >
< img src = "/i2p-styleguide/assets/images/horizontal_color.png" class = "my-2" height = "40" width = "auto" alt = "" > < / img >
< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse " id = "navbarSupportedContent" >
< ul class = "navbar-nav mr-auto display-xs" >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/getting-started" > Getting Started< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/visuals/" > Visuals< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/components/" > Components< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "/i2p-styleguide/copywriting/" > Copywriting< / a >
< / li >
< / ul >
< / div >
< / nav >
< div class = "row" >
< div class = "col-md-3 col-sm-4 col-xs-4 p-0" >
< div class = "row" style = "height: 100%" >
< div class = "col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill" >
< div class = "sidebar rb-sidebar__1" id = "sidebar1" >
< ul id = "sidebar-left" class = "col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill" >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/i2p-styleguide/" class = "sidebar__link__light" > About< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/i2p-styleguide/getting-started/" class = "sidebar__link__light" > Getting Started< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/i2p-styleguide/visuals/" class = "sidebar__link__light" > Visuals< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/i2p-styleguide/components/" class = "sidebar__link__light" > Components< / a >
< / li >
< li class = "list-group-item rb-main-sidebar" >
< a href = "/i2p-styleguide/copywriting/" class = "sidebar__link__light" > Copywriting< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-7 col-xs-12 col-sm-12 p-0" >
< main role = "main" class = "content-scroll p-5" data-spy = "scroll" data-target = "#components-nav" data-offset = "0" >
< div class = "row" >
< div class = "col-12 p-0" >
< div class = "page-header mb-4" >
< h3 > About< / h3 >
< p class = "text-muted" > I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other. The network itself is strictly message based (a la IP), but there is a library available to allow reliable streaming communication on top of it (a la TCP).< / p >
< / div >
< p > This guide aims to provide standards, principles and components to design consistent views related to the I2P. These pages are a living document and we welcome contributions, feedback and suggestions.< / p >
< / p >
< br >
< h5 > Contact< / h5 >
< div class = "row mt-5" >
< div class = "col-md-6 p-0" >
< div class = "bg-box p-5 mb-3" >
< h6 > I2P< / h6 >
< a class = "btn btn-lg btn-link p-0" title = "I2P Repo" href = "https://lists.reproducible-builds.org/listinfo/rb-general" target = "_blank" > Mailing List< / a > < / div >
< / div >
< / div >
< / div >
< div class = "col-12 p-0" >
< div class = "page-header mb-4 mt-5" >
< h5 > Identihub< / h5 >
< p class = "text-muted" > The I2P brand assets are included in this Identihub project page.< / p >
< / div >
< div class = "row mt-5" >
< div class = "col-md-6 p-0" >
< div class = "bg-box p-5 mb-3 text-left" >
< h6 > Styleguide Mirror on Identihub< / h6 >
< p class = "m-0" > < / p >
< a class = "btn btn-lg btn-link p-0" href = "https://demo.identihub.co/project/securedrop" target = "_blank" > Project Page< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "page-header mb-4 mt-5 d-none d-sm-none" >
< h3 > Scrollspy< / h3 >
<!-- p class="text - muted">Some Description about scrollspy.</p -->
< / div >
< div class = "row p-0 pt-5 bg-light d-none d-sm-none" >
< div class = "bd-example" >
< div class = "row" >
< div class = "col-4" >
< div id = "list-example" class = "list-group" >
< a class = "list-group-item list-group-item-action active" href = "https://securedrop.org/" > SecureDrop< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-2" > Second Link< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-3" > Third Link< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-4" > Forth Link< / a >
< / div >
< / div >
< div class = "col-8" >
< div data-spy = "scroll" data-target = "#list-example" data-offset = "0" class = "scrollspy-example" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "dropdown-divider mt-5 wi" > < / div >
< div class = "row" >
< div class = "col-12 p-0" >
< p class = "mt-5 mb-5" >
< span class = "text-muted small" > Styleguide code licensed under < a href = "https://opensource.org/licenses/MIT" class = "rb-link" title = "MIT" target = "_blank" > MIT< / a > , documents licensed under a < a href = "https://creativecommons.org/licenses/by/3.0/us/" title = "CC 3.0" target = "_blank" > Creative Commons Attribution 3.0 United States License< / a > . I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.< br > Templates and styles based on the < a href = "https://reproducible-builds.org/style" target = "_blank" > Reproducible Builds styleguide< / a > .< / span >
< / p >
< / div >
< / div >
< / main >
< / div >
< / div >
< script src = "/i2p-styleguide/assets/javascript/modernizr.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/jquery-3.3.1.slim.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/popper.min.js" > < / script >
< script src = "/i2p-styleguide/assets/javascript/bootstrap.min.js" > < / script >
<!-- <script src="/i2p - styleguide/assets/javascript/run_prettify.js"></script> /* -->
< script type = "text/javascript" src = "/i2p-styleguide/assets/javascript/index.js" > < / script >
< / body >
< / html >
