Procedures

In this example below you will see how to do a Procedures with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dret, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dret ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Procedures</title>
  
  
  
  
  
</head>

<body>

  

<textarea name="editor1" id="editor1" rows="90" cols="80">
      <html>
<head>
	<style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* TEXT FORMATTING */

html {
  font-size: 10px;
  line-height: 1.5rem;
  font-family: Lato, sans-serif;
}

body {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

h1 {
  font-size: 5.4rem;
  line-height: 7.2rem;
  margin-bottom: 2.4rem;
  text-align:center;
}

h2 {
  font-size: 3.3rem;
  line-height: 4.4rem;
  margin-top: 0;
  margin-bottom: 5.4rem;
}

h3 {
  font-size: 2.4rem;
  line-height: 3rem;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

h4 {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}

/* STYLE */

body {
  text-align:left;
  background:white;
  padding:4.4rem;
  margin: 0 auto;
  color: #333;
    counter-reset:section-counter;
}
    
    ul, ol {
    padding-left:7rem;
    }

li {
  position:relative;
  margin-bottom: 2.4rem;
}

ul li:before {
  content:'●';
   position:absolute;
    left:-2rem;
  top:0;
}
    
ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:before {
    content: counter(list, lower-alpha) '.';
  position:absolute;
    left:-2rem;
  top:0;
}
    

    
.procedure-header {
   margin-bottom:3rem;
    overflow:hidden;
    } 
    
.procedure-header h1 {text-align:left;
    }    
    
    .procedure-header img {
    float:right;
    margin-left:4rem;
    width:15rem;
    height:auto;
    }    

.procedure-section {
  background:#e7e8e8;
  border-left:2rem solid;
  border-right:2rem solid;
  padding:2.5rem;
  margin-bottom:3rem;
  page-break-after: always;
}

h3 {margin:0 1rem 0 0;line-height:2.4rem}
    
    h3:before {
    counter-increment: sub-section-counter;
    content: counter(section-counter) '.' counter(sub-section-counter) ' ';
    
    }
    
    section h2 {
 counter-increment: section-counter;
    counter-reset: sub-section-counter;
}    

section h2:before {
  content: counter(section-counter);
  color:white;
  float:left;
  padding:2.2rem 3.4rem 2.2rem 1rem;
  margin:-2.5rem 2.5rem 0 -2.5rem;
  font-size:3.3rem;
  text-align:left;
}

section h3 {
  line-height: 3rem;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}
    
section h4 {
  line-height: 3rem;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}    
 
    
   .procedure-footer {
   margin-top:8rem;
    }
    
    .procedure-footer div {
    display:inline-block;
    vertical-align:middle;
    width:33.3%;
    padding:0 2rem; 
    text-align:center;
    }

    .procedure-footer div:first-child {
    padding-left:0; 
    text-align:left;
    }
    
        .procedure-footer div:last-child {
    padding-right:0;
    text-align:right;
    }

/* COLORS */
      

/* SECTION 1 */

.section-1 {
  border-color:#333;
}

.section-1 h2:before {
  background:#333;
}

.section-1 h2, .section-1 h3, section-1 ul li:before, .section-1 ol li:before,.section-1 h4  {
   color:#333; 
}

/* SECTION 2 */

.section-2 {
  border-color:#662d71;
}

.section-2 h2:before {
  background:#662d71;
}

.section-2 h2, .section-2 h3, .section-2 ul li:before, .section-2 ol li:before,.section-2 h4 {
   color:#662d71; 
}

/* SECTION 3 */

.section-3 {
  border-color:#946c9c;
}

.section-3 h2:before {
  background:#946c9c;
}

.section-3 h2, .section-3 h3, .section-3 ul li:before, .section-3 ol li:before, .section-3 h4 {
   color:#946c9c; 
}

/* SECTION 4 */

.section-4 {
  border-color:#25408f;
}

.section-4 h2:before {
  background:#25408f;
}

.section-4 h2, .section-4 h3, .section-4 ul li:before, .section-4 ol li:before,.section-4 h4 {
   color:#25408f; 
}

/* SECTION 5 */

.section-5 {
  border-color:#59aeef;
}

.section-5 h2:before {
  background:#59aeef;
}

.section-5 h2, .section-5 h3, .section-5 ul li:before, .section-5 ol li:before,.section-5 h4 {
   color:#59aeef; 
}

/* SECTION 6 */

.section-6 {
  border-color:#0c5437;
}

.section-6 h2:before {
  background:#0c5437;
}

.section-6 h2, .section-6 h3, .section-6 ul li:before, .section-6 ol li:before,.section-6 h4 {
   color:#0c5437; 
}

/* SECTION 7 */

.section-7 {
  border-color:#672c2e;
}

.section-7 h2:before {
  background:#672c2e;
}

.section-7 h2, .section-7 h3, .section-7 ul li:before, .section-7 ol li:before,.section-7 h4 {
   color:#672c2e; 
}
	</style>
	<title></title>
</head>

<header class="procedure-header">
  
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Wikimedia-logo.png" />
  
  <h1>Procedure 1.01</h1>
  
  <p>
    Home: Thomas Street Care Home<br/>
Licensed to: TSCH Ltd, 145 Thomas Street, ABC 12 AB London, UK
  </p>
  
  <img class="header-logo" src=""
/>  
        </header>
        
<body>
<h1 class="procedure-h1-title">Provision Information</h1>

<section class="procedure-section section-1">
<h2 >Legal</h2>

<p>Regulation 9 of the Health and Social Care Act 2008 (Regulated Activities) Regulations 2014</p>

</section>

<section class="procedure-section section-2">
<h2>Outcome Statement</h2>

<h3>Service users:</h3>

<ul>
	<li>Understand the care, treatment and support choices available to them.</li>
	<li>Can express their views, so far as they are able, and are involved in making decisions about their care, treatment and support.</li>
	<li>Have their privacy, dignity and independence respected.</li>
	<li>Have their views and experiences taken into account in the way their care and treatment is provided and delivered.</li>
</ul>

<h3 class="procedure-h3-title">Service users are supported to make informed choices about their care, treatment and support because they are:</h3>
  
  

<ul>
	<li>Understand the care, treatment and support choices available.</li>
	<li>Can represent the views of the service user and are involved in making decisions about their care, treatment and support.
    
    <ol>
	<li>Understand the care, treatment and support choices available.</li>
	<li>Can represent the views of the service user and are involved in making decisions about their care, treatment and support.</li>
</ol>
  
  
  </li>
</ul>
  
  <h3 >Service users are supported to make informed choices about their care, treatment and support because they are:</h3>

<ol>
	<li>Understand the care, treatment and support choices available.</li>
	<li>Can represent the views of the service user and are involved in making decisions about their care, treatment and support.</li>
</ol>

<h3>This is because we comply with the regulations and will:</h3>

<ul>
	<li>Recognise the diversity, values and human rights of service users</li>
	<li>Maintain the privacy, dignity and independence of service users</li>
	<li>Put service users at the centre of their care, treatment and support by enabling</li>
</ul>

<p>We will ensure that service users are provided with clear information about the home so that they are able to decide whether the home is able to meet their needs and fulfil their expectations.</p>

<p>We will produce information about the home in a format and language that is suitable for the person receiving it.</p>

<h3>Titolo del Paragrafo</h3>

<p>The manager is responsible for producing a Statement of Purpose for the home. It should meet the requirements of Regulation 12 and Schedule 3 of the Care Quality Commission (Registration) Regulations 2009.</p>

<h3>Titolo del Paragrafo</h3>

<p>The manager is responsible for producing a Statement of Purpose for the home. It should meet the requirements of Regulation 12 and Schedule 3 of the Care Quality Commission (Registration) Regulations 2009.</p>

<h3>Titolo del Paragrafo</h3>

<p>The manager may also produce a range of information documents which provide information to current service users, prospective service users, their representatives or staff which further clarify or explain the home&rsquo;s aims and objectives, the services available or other information. These documents may include:</p>

<ul>
	<li>Service Users Guide to Services</li>
	<li>Welcome booklet</li>
	<li>Brochure</li>
	<li>Service specific leaflets</li>
</ul>

<h3>Titolo del Paragrafo</h3>

<p>Where appropriate, sample or &ldquo;template documents&rdquo; have been provided as part of the reqsys resource.</p>

<h3>Titolo del Paragrafo</h3>

<p>The manager is responsible for adapting these &ldquo;template documents&rdquo; to suitably reflect the facilities and services that are provided by the home. If the home, for example, says it provides care to meet the needs of people with dementia, the manager must be able to clearly show how these needs are met (e.g. through small group living, activities, d&eacute;cor, reminiscence therapies and signage etc.)</p>
</section>

<section class="procedure-section section-3">
<h2>Titolo</h2>
</section>

<section class="procedure-section section-4">
<h2>Titolo</h2>
</section>

<section class="procedure-section section-5">
<h2>Titolo</h2>
</section>

<section class="procedure-section section-6">
<h2>Titolo</h2>
</section>

<section class="procedure-section section-7">
<h2>Titolo</h2>
</section>
  
  <footer class="procedure-footer">
 <div> Issue date: 15/3/2015<br/>
Version: 10.3
  </div>
  <div> Pagina 15/15</div>
<div>©Reqsys<br/>
All Rights Reserved
  </div>
</footer>
  
</body>
</html>

    </textarea>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dret/procedures-rVNMVQ */


        CKEDITOR.replace('editor1', {
     /*      extraPlugins: 'dialogadvtab,autogrow,colordialog',
 */
           format_tags: 'p;h1;h2;h3;h4',
           fullPage: true,
           allowedContent: true
        });

Comments