API tools faq
paste
Advertisement
Guest User

CSS Web

a guest
Sep 13th, 2016
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 18.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div.container {
  6.     width: 100%;
  7. }
  8.  
  9. header {
  10.     color: white;
  11.     background-color: #00205c;
  12.     clear: left;
  13.     position: fixed;
  14.     top: 0;
  15.     left: 0;
  16.     right: 0;
  17. }
  18. body {
  19.     font: normal 14px Arial, Helvetica, sans-serif;
  20.     -webkit-text-size-adjust: none;
  21.     color: #414042;
  22. }
  23. h2 {
  24.     margin: 1.1rem 0 .4rem 0;
  25.     font-family: 'Helvetica Neue', Gotham, Arial, Helvetica, sans-serif;
  26.     font-weight: normal;
  27.     margin-top: 0 !important;
  28.     color: #00205c;
  29.     font-size: 1.7rem;
  30.     line-height: 1em;
  31. }
  32. ul.leftside {
  33.     background-color:#6f625a;
  34.     float: left;
  35.      width: 25%;
  36.      padding-left:25%;
  37. }
  38. ul.rightside{
  39.     background-color:#6f625a;
  40.     float: right;
  41.     width: 35%;
  42.     padding-left:7%;
  43.     padding-right:8%;
  44.  
  45. }
  46. div.upper-header
  47. {
  48.     background-color:#6f625a;
  49.    
  50. }
  51. div.lower-header
  52. {
  53.     align-text: center;
  54.     background-color:#ee7624;
  55.    
  56. }
  57.  
  58. div.lower-header ul
  59. {
  60.  margin:0 auto;
  61.  max-width: 960px;
  62. }
  63.  
  64. div.lower-header li
  65. {
  66. width: 25%;
  67. }
  68.  
  69. div.pepperdine
  70. {
  71. width :53%;
  72. margin: 0 auto;
  73. }
  74.  
  75. nav {
  76.     margin-top: 16em;
  77.     float: left;
  78.     max-width: 10em;
  79.     margin-left: 30em;
  80.     padding: 1em;
  81. }
  82.  
  83. nav ul {
  84.     list-style-type: none;
  85.     padding: 0;
  86. }
  87.            
  88. nav ul a {
  89.     text-decoration: none;
  90. }
  91. article {
  92.     margin-top :190px;
  93.     margin-left:0px;
  94.     margin-right:auto;
  95.     padding: 1em;
  96.     overflow: hidden;
  97.     width: 38%;
  98. }
  99. header ul {
  100.     display: block;
  101.     list-style-type: none;
  102.     margin: 0;
  103.     padding: 0;
  104.     overflow: hidden;
  105.     font-size: 16px;
  106.     <!-- background-color:#6f625a; -->
  107. }
  108. header li {
  109.     float: left;
  110. }
  111. header li a {
  112.     display: block;
  113.     color: white;
  114.     text-align: center;
  115.     padding: 10px;
  116.     text-decoration: none;
  117. }
  118. header li a:hover {
  119.     background-color: #111111;
  120.     text-decoration: underline;
  121. }
  122. p {
  123.     display: block;
  124.     -webkit-margin-before: 1em;
  125.     -webkit-margin-after: 1em;
  126.     -webkit-margin-start: 0px;
  127.     -webkit-margin-end: 0px;
  128. }
  129. fieldset legend{
  130.     margin: 1.1rem 0 .4rem 0;
  131.     font-family: 'Helvetica Neue', Gotham, Arial, Helvetica, sans-serif;
  132.     font-weight: normal;
  133.     <!-- position: relative; -->
  134.     float: left;
  135.     display: block;
  136.     <!-- margin-top: -1.25rem; -->
  137.     padding: 0 4px;
  138.     color: #00205c;
  139.     font-size: .92rem;
  140.     font-weight: bold;
  141.     background-color: #fff;
  142. }
  143. footer {
  144.     display: block;
  145.     float: left;
  146.     width: 100%;
  147.     padding: 0 0 0 0;
  148.     background-color: #968c83;
  149. }
  150. .footerheading {
  151.     margin: 1.1rem 0 .4rem 0;
  152.     font-family: 'Helvetica Neue', Gotham, Arial, Helvetica, sans-serif;
  153.     font-weight: normal;
  154.     margin-bottom: 0;
  155.     padding: .3em;
  156.     font-size: 1.12rem;
  157.     color: rgba(255,255,255,0.7);
  158.     border-bottom: 1px solid #ccc;
  159. }
  160. footer.footerlist {
  161.     width: 16.9697%;
  162.     float: left;
  163. }
  164.  
  165. footer.footerlist ul {
  166.     margin: 0;
  167. }
  168.  
  169. footer ul {
  170.     list-style-type: none;
  171.     margin: 0;
  172.     padding: 0;
  173.     overflow: hidden;
  174. }
  175. footer li {
  176.     <!-- float: left; -->
  177. }
  178. footer li a {
  179.     display: inline-block;
  180.     color: white;
  181.     padding: 5px;
  182.     text-decoration: none;
  183. }
  184. footer li a:hover {
  185.     text-decoration: underline;
  186. }
  187.  
  188. input[type="submit"], button[type="submit"] {
  189.   margin-right: 3.0303%;
  190.   padding: .3em .7em;
  191.   color: #fff;
  192.   font-size: 1rem;
  193.   font-weight: bold;
  194.   background-color: #ee7624;
  195.   border: none;
  196.   outline: none;
  197.   transition: all 350ms;
  198. }
  199.  
  200. footer.fullframe {
  201.     max-width: 990px;
  202.     margin: 0 auto;
  203.     margin-top: 0px;
  204.     margin-right: auto;
  205.     margin-bottom: 0px;
  206.     margin-left: auto;
  207. }
  208. p.sitedescription {
  209.     margin-top: 2em;
  210.     color: rgba(255,255,255,0.75);
  211.     font-size: .95em;
  212. }
  213.  
  214. .flex-container {
  215.     display: -webkit-flex;
  216.     display: flex;
  217.     width: 60%;
  218.     height: 300px;
  219.     margin:auto;
  220. }
  221.  
  222. .flex-item {
  223.     width: 25%;
  224.     height: 100px;
  225.     margin: 10px;
  226. }
  227.  
  228. .copyright {
  229.     text-indent: 0;
  230.     text-align: center;
  231.     position: relative;
  232.     display: block;
  233.     float: left;
  234.     width: 100%;
  235.     margin: 0;
  236.     color: #f8f3eb;
  237.     text-indent: 50px;
  238.     background-color: #6f625a;
  239. }
  240. </style>
  241. </head>
  242. <body>
  243.  
  244. <div class="container">
  245. <header>
  246.    <div class="upper-header">
  247.    <ul class="leftside">
  248.     <li><a href="#">Alumni</a></li>
  249.     <li><a href="#">Career Services</a></li>
  250.     <li><a href="#">Giving</a></li>
  251.     </ul>
  252.     <ul class="rightside">
  253.     <li><a href="#">My Community</a></li>
  254.     <li><a href="#">Events</a></li>
  255.     <li><a href="#">Newsroom</a></li>
  256.     <li><a href="#">Social Hub</a></li>
  257.     </ul>
  258.    
  259.    </div>
  260.    <div class="pepperdine">
  261.    <img src="pepperdine.png">
  262.    </div>
  263.    <div class="lower-header">
  264.    <ul >
  265.     <li><a href="#">About Us</a></li>
  266.     <li><a href="#">Academics</a></li>
  267.     <li><a href="#">Admission & Aid</a></li>
  268.     <li><a href="#">Spiritual Life</a></li>
  269.   </ul>
  270.   </div>
  271. </header>
  272.  
  273. <nav>
  274.  <ul>
  275.    <li><a href="#">Parking and Traffic Information</a></li><br>
  276.    <li><a href="#">Department of Public Safety</a></li>
  277.     <li><a href="#">Parking Information</a></li>
  278.     <ul>
  279.         <li><a href="#">Parking Reservation Request</a></li>
  280.         <li><a href="#">Campus Map</a></li>
  281.         <li><a href="#">Special Parking Needs</a></li>
  282.         <li><a href="#">Vehicle Registration</a></li>
  283.     </ul>
  284.     <li><a href="#">Services</a></li>
  285.     <ul>
  286.         <li><a href="#">Lost and Found</a></li>
  287.     </ul>
  288.     <li><a href="#">Department Information</a></li>
  289.     <ul>
  290.         <li><a href="#">Campus Safety Report</a></li>
  291.     </ul>
  292.     <li><a href="#">Safety Information</a></li>
  293.     <ul>
  294.         <li><a href="#">Fire Safety</a></li>
  295.         <li><a href="#">Crime Prevention</a></li>
  296.         <li><a href="#">Personal Safety</a></li>
  297.         <li><a href="#">Emergency Preparedness</a></li>
  298.         <li><a href="#">Related Web Sites</a></li>
  299.     </ul>
  300.     <li><a href="#">Frequently Asked Questions</a></li>
  301.     <li><a href="#">Report a Concern</a></li>
  302.     <li><a href="#">Contact Information</a></li>
  303.  </ul>
  304. </nav>
  305.  
  306. <article>
  307.  <h2>Parking Reservation Request Form</h2>
  308.  <p>It is our intention to facilitate parking for guests by reserving a parking space up to one hour during scheduled arrival time. This allows for the guest to arrive a little early or late, but will not tie up the space if he/she does not arrive at all or chooses to park elsewhere. If your guest will "come and go" during their visit, please indicate this on the reservation form and include the entire time span of the visit </p>
  309.  <form>
  310.  
  311. <fieldset>  
  312. <legend>Personal Information</legend>
  313. <table>
  314.    <tbody>
  315.      <tr>
  316.        <td style="text-align:right;">Your Name: <span aria-required="true" class="required">*</span></td>
  317.         <td><input aria-required="true" name="name" required="" type="text"></td>
  318.       </tr>
  319.       <tr>
  320.         <td style="text-align:right;">Phone: <span aria-required="true" class="required">*</span></td>
  321.         <td><input aria-required="true" name="phone" style="width:100px;" required="" type="text"></td>
  322.       </tr>
  323.       <tr>
  324.         <td style="text-align:right;">E-mail: <span aria-required="true" class="required">*</span></td>
  325.         <td><input aria-required="true" name="email" style="width:200px;" required="" type="email"></td>
  326.       </tr>
  327.       <tr>
  328.         <td style="text-align:right;">Department:</td>
  329.         <td><input name="dpt" style="width:100px;" type="text"></td>
  330.       </tr>
  331.       <tr>
  332.         <td style="text-align:right;">School: <span aria-required="true" class="required">*</span></td>
  333.         <td><select aria-required="true" name="school" required="">
  334.             <option selected="selected" value=""> - Select a School - </option>
  335.             <option value="Seaver College">Seaver College</option>
  336.             <option value="Graduate School of Education and Psychology">Graduate School of Education and Psychology</option>
  337.             <option value="Graziadio School of Business and Management">Graziadio School of Business and Management</option>
  338.             <option value="School of Public Policy">School of Public Policy</option>
  339.             <option value="School of Law">School of Law</option>
  340.             <option value="Campus Wide">Campus Wide</option>
  341.           </select></td>
  342.       </tr>
  343.     </tbody>
  344.   </table></fieldset>
  345.  
  346. <fieldset>
  347.   <legend>Parking Information</legend>
  348.   <p class="small">All parking reservation requests must be submitted at least 72 hours in advance for proper assessment.</p>
  349.   <table>
  350.     <tbody>
  351.       <tr>
  352.         <td style="text-align:right;width:200px;">Parking Reservation Date: <span aria-required="true" class="required">*</span></td>
  353.         <td><input aria-required="true" id="f_date" name="f_date" style="width:80px" class="pep_datepicker hasDatepicker" required="" type="text">
  354.           <a href="#" onclick="$('#multi').slideToggle(); return false;" style="font-size:10px;">Multiple Days?</a></td>
  355.       </tr>
  356.       <tr>
  357.         <td colspan="2" style="margin:0;padding:0;"><table id="multi" style="display:none;margin:0;padding:0;">
  358.             <tbody><tr>
  359.               <td style="text-align:right;width:200px;"><br>
  360.                 End Date:</td>
  361.               <td><span style="color:#666;font-size:11px;"><em>(Only if you require multiple days)</em></span><br>
  362.                 <input id="l_date" name="l_date" style="width:80px" class="pep_datepicker hasDatepicker" type="text">
  363.                 </td>
  364.             </tr>
  365.           </tbody></table></td>
  366.       </tr>
  367.       <tr>
  368.         <td style="text-align:right;">Estimated Time of Arrival</td>
  369.         <td><select name="f_time_hr">
  370.             <option selected="selected" value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>          </select>
  371.           :
  372.           <select name="f_time_min">
  373.             <option selected="selected" value="00">00</option>
  374.             <option value="15">15</option><option value="30">30</option><option value="45">45</option>          </select>
  375.           <select name="f_time_ampm">
  376.             <option selected="selected" value="a.m.">a.m.</option>
  377.             <option value="p.m.">p.m.</option>
  378.           </select></td>
  379.       </tr>
  380.       <tr>
  381.         <td></td>
  382.         <td style="text-align:left;"><input value="Yes" name="comengo" id="comengo" type="checkbox">Guest will "Come and Go"</td>
  383.       </tr>
  384.       <tr style="display:none" id="l_time">
  385.         <td style="text-align:right;">Ending Time</td>
  386.         <td><select name="l_time_hr">
  387.             <option selected="selected" value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>          </select>
  388.           :
  389.           <select name="l_time_min">
  390.             <option selected="selected" value="00">00</option>
  391.             <option value="15">15</option><option value="30">30</option><option value="45">45</option>          </select>
  392.           <select name="l_time_ampm">
  393.             <option selected="selected" value="a.m.">a.m.</option>
  394.             <option value="p.m.">p.m.</option>
  395.           </select></td>
  396.       </tr>
  397.       <tr>
  398.         <td style="text-align:right;">Parking Location: <span aria-required="true" class="required">*</span></td>
  399.         <td><select aria-required="true" name="parking_lot" onchange="if($(this).val() == 'Other'){$('#divOther').slideToggle();}" required="">
  400.             <option selected="selected" value=""> - Select Parking Lot - </option>
  401.             <optgroup label="PARKING LOTS">
  402.             <option value="Visitors lot (adjacent to Main Lot)(B)">Visitors lot (adjacent to Main Lot)(B)</option>
  403.             <option value="TAC Flag Lot (D)">TAC Flag Lot (D)</option>
  404.             <option value="West Chapel lot (C)">West Chapel lot (C)</option>
  405.             <option value="Main Lot (B)">Main Lot (B)</option>
  406.             <option value="Drescher Campus Lot (S)">Drescher Campus Lot (S)</option>
  407.             <option value="Communication/Business Lot (E)">Communication/Business Lot (E)</option>
  408.             <option value="School of Law Lot (G)">School of Law Lot (G)</option>
  409.             <option value="Terrace Lot (I)">Terrace Lot (I)</option>
  410.             <option value="Rho Lot (J)">Rho Lot (J)</option>
  411.             <option value="Track Lot (M)">Track Lot (M)</option>
  412.             <option value="Upper EFS Lot (N)">Upper EFS Lot (N)</option>
  413.             <option value="Lower EFS Lot (O)">Lower EFS Lot (O)</option>
  414.             <option value="Firestone Fieldhouse Lot (P)">Firestone Fieldhouse Lot (P)</option>
  415.             </optgroup>
  416.             <optgroup label="STREET PARKING">
  417.             <option value="Seaver Drive">Seaver Drive</option>
  418.             <option value="Huntsinger Circle">Huntsinger Circle</option>
  419.             <option value="John Tyler Drive">John Tyler Drive</option>
  420.             <option value="Banowsky Blvd">Banowsky Blvd</option>
  421.             <option value="Via Pacifica">Via Pacifica</option>
  422.             <option value="FFH Plaza">FFH Plaza</option>
  423.             </optgroup>
  424.             <optgroup label="Other">
  425.             <option value="Other">Other</option>
  426.             </optgroup>
  427.           </select></td>
  428.       </tr>
  429.       <tr>
  430.         <td colspan="2"><span class="small accent">Parking requests for the MAIN LOT will be reviewed by the office of the Vice President of Administration.</span></td>
  431.       </tr>
  432.       <tr>
  433.         <td colspan="2"><div id="divOther" style="display:none;">
  434.             <table>
  435.               <tbody><tr>
  436.                 <td style="width:200px; text-align:right;">Specify Lot/Street/Area:</td>
  437.                 <td><input name="other" type="text"></td>
  438.               </tr>
  439.             </tbody></table>
  440.           </div></td>
  441.       </tr>
  442.       <tr>
  443.         <td style="text-align:right;">Number of Spaces Requested:</td>
  444.         <td><select name="num_of_spaces">
  445.             <option selected="selected" value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>          </select>
  446.           &nbsp;&nbsp;<a href="#" onclick="$('#contact_info').slideToggle();return false;">10 or more?</a></td>
  447.       </tr>
  448.       <tr>
  449.         <td colspan="2"><div id="contact_info" style="background-color:#EEB2B7;display:none; padding:5px;border:1px solid red;">Please send an email containing the number of spaces and details for your request to Deputy Director <a title="Link to External Site" target="_blank" href="mailto:dawn.emrich@pepperdine.edu" class="emailicon">Dawn Emrich</a></div></td>
  450.       </tr>
  451.       <tr>
  452.         <td style="text-align:left;" colspan="2"><span aria-required="true" class="required">*</span> Name or Group Name <strong>EXACTLY</strong> as it will appear on the sign: <br>
  453.           <span style="color:#666;font-size:11px;"><em>(ex: "Dr. John Smith" or "Waves Associates")</em></span>
  454.           <textarea aria-required="true" name="name_on_sign" rows="3" cols="50" required=""></textarea></td>
  455.         <td></td>
  456.       </tr>
  457.       <tr>
  458.         <td colspan="2"> Provide any special instructions regarding this request: <br>
  459.           <textarea name="special_directions" rows="3" cols="50"></textarea></td>
  460.         <td></td>
  461.       </tr>
  462.        
  463.     </tbody>
  464.   </table>
  465.     <p><em><strong>
  466.         Please check the reCAPTCHA box below to complete the form.
  467.     </strong></em></p>
  468.     </fieldset>
  469.   </form>
  470.  
  471.   <br>
  472.  
  473. </article>
  474.  
  475. <div style="text-align: center">
  476. <input type="submit" value="Submit Request">
  477. <br>
  478. <br>
  479. </div>
  480.  
  481. <footer align="center">
  482.     <div class="flex-container">
  483. <div class="flex-item">
  484.     <div class="footerheading">Opportunities</div>
  485.     <ul style="float:left;">
  486.     <li><a href="/alumni/">Alumni</a></li>
  487.     <li><a href="/giving/">Giving</a></li>
  488.     <li><a href="/career-services/">Career Services</a></li>
  489.     <li><a href="/hr/">Jobs at Pepperdine</a></li>
  490.     <li><a href="/spiritual-life/waves-of-service/">Waves of Service</a></li>
  491.     </ul>
  492. </div>
  493. <div class="flex-item">
  494.     <div class="footerheading">Resources</div>
  495.     <ul style="float:left;">
  496.     <li><a href="/about/locations/">Locations &amp; Maps</a></li>
  497.     <li><a href="/publicsafety/">Public Safety &amp; Parking</a></li>
  498.     <li><a href="/disabilityservices/">Disability Services</a></li>
  499.     <li><a href="http://emergency.pepperdine.edu/">Emergency Information</a></li>
  500.     <li><a href="/contact/">Contact Information</a></li>
  501.     <li><a href="/a-z/">A-Z Index</a></li>
  502.     <li><a href="http://newsroom.pepperdine.edu/rss">RSS Feeds</a></li>
  503.     <li class="wavenet"><a class="noicon" href="https://wavenet.pepperdine.edu">WaveNet</a></li>
  504.     </ul>
  505. </div>
  506.  
  507. <div class="flex-item">
  508.     <img src="Logo.png">
  509. </div>
  510.  
  511. <div class="flex-item">
  512.     <div class="footerheading">Schools</div>
  513.     <ul style="float:left;">
  514.     <li><a href="http://seaver.pepperdine.edu/">Seaver College</a></li>
  515.     <li><a href="http://law.pepperdine.edu/">School of Law</a></li>
  516.     <li><a href="http://bschool.pepperdine.edu/">Graziadio School of Business and Management</a></li>
  517.     <li><a href="http://gsep.pepperdine.edu/">Graduate School of Education and Psychology</a></li>
  518.     <li><a href="http://publicpolicy.pepperdine.edu/">School of Public Policy</a></li>
  519.     </ul>
  520.     </div>
  521.     <div class="flex-item">
  522.     <p class="sitedescription">Pepperdine is a Christian university <br> committed to the highest standards of academic excellence and Christian values,<br> where students are strengthened for lives of purpose, service, and leadership.</p>
  523.     <p class="sitedescription"><a class="icon-home noicon" href="/">PEPPERDINE</a></p>
  524. </div>
  525.     </div>
  526.     </footer>
  527.    
  528.    
  529. <div class="copyright">
  530.          <div class="fullframe">
  531.             <div class="full">
  532.             <br>
  533.                <address>24255 Pacific Coast Highway, Malibu, CA 90263 <span class="phone">Phone: 310.506.4000</span></address>
  534.                <p>Copyright <span id="directedit">©</span>&nbsp;2016&nbsp;<a href="/">Pepperdine University</a> | <a href="/legal/privacy-policy/">Privacy&nbsp;Policy</a> | <a href="/legal/trademarks/">Trademarks</a> | <a href="/legal/terms-of-use/">Terms&nbsp;of&nbsp;Use</a></p>
  535.             </div>
  536.          </div>
  537.       </div><div id="s1" class="stest"></div><!-- BugHerd -->
  538. <div class="feedback-tab">
  539.     <a onclick="_bugHerd.win.bugherd.applicationView.anonymousbar.toggleOptions()">Web Feedback</a>
  540. </div>
  541.  
  542.  
  543. </div> <!-- punya div class container -->
  544. </body>
  545. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!