1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>PRO Manual, page 7</title>
6
7 <!--
8 File: /Student Resources/PRO_Manual/page07_JMH.html
9 maintained by Jesse M. Heines
10 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
11 copied or excerpted for educational purposes with credit to the author.
12 updated by JMH on October 24, 2022 at 2:53 PM
13 -->
14
15 <style>
16 body { /* rules applied to the entire page body */
17 font-family: Arial ; /* font to use on the entire page */
18 width: 525px ; /* width of the entire page */
19 }
20 #page-head { /* rule for rendering the page head text */
21 color: #7b909d ; /* light blue = RGB( 121, 143, 156 ) */
22 }
23 #page-number { /* rules for rendering the page number, */
24 font-weight: bold ; /* which is inside the page head */
25 color: black ;
26 }
27 #two-boxes { /* these are the two boxes at the right */
28 width: fit-content ; /* set their width to just hold their content */
29 float: right ; /* position them to the right of the text */
30 }
31 #CustomerService { /* this is the top box or the two */
32 border: 2px solid #7b909d ; /* set the border to dark blue */
33 border-radius: 10px ; /* round the corners */
34 padding: 0.5em 1.5em ; /* add space between the text and the border */
35 text-align: center ; /* center the text */
36 }
37 #AutomatedPaymentFee { /* this is the bottom box of the two */
38 background-color: #7b909d ; /* make the background dark blue */
39 color: white ; /* set the text color to white */
40 text-align: center ; /* center the text */
41 padding: 0.5em ; /* add a bit of space (1/2 an M) around the text */
42 border-radius: 10px ; /* round the corners */
43 margin-top: 0.25em ; /* separate this box from the one above it */
44 }
45 #AutomatedPaymentFee p { /* this is the text inside the bottom box */
46 margin: 0 ; /* remove both of its default top and bottom margins */
47 }
48 #DepositorShouldKnow { /* this is the large box in the middle of the page */
49 border: 2px solid #7b909d ; /* make its border dark blue */
50 background-color: #ebf2f4 ; /* make its background light blue */
51 }
52 #DepositorShouldKnow h3 { /* this is the first line of text in the middle box */
53 text-align: center ; /* center the text */
54 margin-top: 0 ; /* remove both of its default top and bottom margins */
55 }
56 #DepositorShouldKnow ul { /* this is the bulleted list in the middle box */
57 margin-bottom: 0.25em ; /* add a bit to the bottom border */
58 }
59 #two-steps { /* this is the two-part box at the bottom of the page */
60 background-color: #7b909d ; /* make its background dark blue */
61 padding: 0.5em ; /* add a bit of space around the elements it contains */
62 }
63 #two-steps .white { /* rules applied to elements inside the two-part box */
64 color: white ; /* that have class="white" (note the .) */
65 font-weight: bold ; /* these rules set the text color to white, the font */
66 text-align: center ; /* boldface, and center the text */
67 }
68 #two-columns table tr { /* rules for rows inside tables inside divs inside */
69 background-color: white ; /* the element whose id="two-columns" (note the #) */
70 }
71 #two-columns table tr#row2 td { /* rules for cells inside the row with id="row2" */
72 background-color: #7b909d ; /* = the blank row in the middle of the table */
73 height: 4px ;
74 }
75 #two-columns table tr td.col1 { /* rules for cells inside the row with class="col1" */
76 color: #7b909d ; /* = the first cells of each row */
77 border-radius: 20px 0 0 20px ; /* remember T R B L: this rounds the left-hand corners */
78 text-align: center ; /* center the text */
79 padding-right: 5px ; /* pad the text to center it horizontally */
80 /* two rules are needed to rotate the text: */
81 writing-mode: vertical-rl ; /* this one writes the text vertially */
82 transform: rotate( 180deg ) ; /* this one flips it the way we want it oriented */
83 /* reference: https://blog.udemy.com/css-rotate-text/ */
84 }
85 #two-columns table tr td.col2 { /* rules for cells inside the row with class="col2" */
86 border-left: 1px solid #7b909d ; /* = the second cells of each row */
87 border-radius: 0 20px 20px 0 ; /* T R B L again, this rounds the right-hand corners */
88 padding: 0.5em ; /* add a bit of space */
89 }
90 .nobottom { /* this is a utility class that removes the bottom margin from */
91 margin-bottom: 0 ; /* any element to which this class is applied */
92 }
93 .notop { /* this is a utility class that removes the top margin from */
94 margin-top: 0 ; /* any element to which this class is applied */
95 }
96 .nowrap { /* this is a utility class that prevents text-wrapping from */
97 white-space: nowrap ; /* any element to which this class is applied */
98 }
99 </style>
100
101 </head>
102
103 <body>
104 <!-- this is the first line on the page -->
105 <p id="page-head"><span id="page-number">7</span> | Tablets: Phone and Messaging</p>
106
107 <!-- this is the first paragraph -->
108 <p>Options to Pay for Trust, Telephone, Tablet Services, Messaging,
109 Restitution & Fines:</p>
110
111 <!-- next we set up the two boxes that will be floated right -->
112 <div id="two-boxes">
113 <!-- this is the top box in the two-box pair -->
114 <div id="CustomerService">
115 <p><strong>Customer Service</strong><br>
116 877-650-4249</p>
117 </div>
118 <!-- this is the bottom box in the two-box pair -->
119 <div id="AutomatedPaymentFee">
120 <p>There is a fee to use<br>
121 automated payment service</p>
122 </div>
123 </div>
124
125 <!-- the text we want to wrap around the floated boxes goes here -->
126 <p><strong>ONLINE:</strong><br>
127 www.connectnetwork.com</p>
128 <p><strong>TOLL-FREE PHONE:</strong><br>
129 AdvancePay Phone: 800-483-8314<br>
130 PIN Debit Phone: 855-706-2445<br>
131 Trust: 888-988-4768</p>
132 <p><strong>MOBILE APP:</strong><br>
133 Search for ConnectNetwork on Apple and Android</p>
134
135 <!-- this is the large box in the middle of the page with a light blue background -->
136 <div id="DepositorShouldKnow">
137 <h3>Depositor Should Know:</h3>
138 <ul>
139 <li>Resident’s First and Last Names</li>
140 <li>Resident’s Date of Birth</li>
141 <li>Resident ID #</li>
142 <li>Site ID #222 (for payments by phone for Trust and PIN Debit only)</li>
143 </ul>
144 </div>
145
146 <!-- this is the paragraph after the middle box and before the bottom box -->
147 <h3 class="notop nobottom">Messaging</h3>
148 <p class="notop">
149 Residents can receive and send email-like messages with friends and
150 family members of the GTL message application. These messages can
151 contain a picture or a 15 second video.</p>
152
153 <!-- and finally we set up the large multi-part box at the bottom of the page -->
154 <div id="two-steps">
155 <!-- note that multiple classes can be applied to an element simultaneously -->
156 <p class="white notop nobottom">Your family or friends can follow these 2 steps<br>
157 to initiate messaging with you:</p>
158
159 <!-- here are the two boxes with white backgrounds, set up as a table -->
160 <div id="two-columns">
161 <table>
162 <!-- this is the top (first) row -->
163 <tr id="row1">
164 <td class="col1">STEP 1</td>
165 <td class="col2">
166 <p class="notop">Go to www.connectnetwork.com or download the ConnectNetwork
167 app from the Apple App Store or Google Play Store.</p>
168 <p class="nobottom">Locate your resident’s correctional facility and add
169 them as a contact using either their inmate ID or first/last name. Draft a
170 message, purchase message credits to send messages, and purchase additional
171 credits to send to your inmate to reply.</p>
172 </td>
173 </tr>
174
175 <!-- this is a blank middle (second) row to allow us to add space between the rows-->
176 <tr id="row2"><td></td><td></td></tr>
177
178 <!-- this is the bottom (third) row -->
179 <tr id="row3">
180 <td class="col1">STEP 2</td>
181 <td class="col2">
182 <p class="notop">Have your resident log into a kiosk or tablet, click on
183 Messaging, and view their inbox. Friends and family members must create and
184 send the first message.</p>
185 <p class="nobottom">If you have any questions, please call us toll-free at
186 <span class="nowrap">877-650-4249.</span></p>
187 </td>
188 </tr>
189 </table> <!-- close the table -->
190 </div> <!-- close the div with id="two-columns" -->
191 </div> <!-- close the div with id="two-steps" -->
192
193 </body>
194 </html>