FAQ Page

Developer
Arcadio
Size
3,698 Kb
Views
18,216
  1. FAQ Page Previews
  2. FAQ Page HTML Codes
  3. FAQ Page CSS Codes

How do I make an faq page?

FAQs. What is a faq page? How do you make a faq page? This script and codes were developed by Arcadio on 16 October 2022, Sunday.

FAQ Page Previews
IQ Test

FAQ Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FAQ Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <label for="menu"></label> <input type="checkbox" id="menu" /> <ul class="navbar"> <li> <a href="https://codepen.io/arcadiomj/live/PPrvLg/"> <i class="fa fa-home"></i> <br> Home </a> </li> <li><a href="https://veterans.rutgers.edu/events"><i class="fa fa-calendar"></i> <br> Events</a></li> <li><a href="https://veterans.rutgers.edu/news"><i class="fa fa-newspaper-o"></i> <br> News</a></li> <li> <a href="http://ucc.rutgers.edu/veterans"> <i class="fa fa-cogs"></i> <br> Services</a> </li> <li><a href="https://veterans.rutgers.edu/donations"><i class="fa fa-usd"></i> <br> Donate</a></li> <li><a href="https://codepen.io/arcadiomj/live/Vevbwq/"><i class="fa fa-question-circle"></i> <br>FAQ</a></li> <li> <a href="https://codepen.io/arcadiomj/live/XmLwQR/"> <i class="fa fa-phone"></i> <br> Contact Us</a> </li> </ul> <!-- end of navbar list !-->
</div>
<!-- end of header !-->
<div class="body">
<div class='centerplease'> R.U. S.E.R.V.S. Frequently Asked Questions
</div>
<br>
<div class="content">
<div> <input type="checkbox" id="question1" name="q" class="questions"> <div class="plus">+</div> <label for="question1" class="question"> What does R.U. S.E.R.V.S. stand for? </label> <div class="answers"> Rutgers University services, education, and resources for veteran students. </div>
</div>
<div> <input type="checkbox" id="question2" name="q" class="questions"> <div class="plus">+</div> <label for="question2" class="question"> Do I need to be a veteran to join? </label> <div class="answers"> You do not, in fact we encourage all members of the Rutgers community to join in our meetings. </div>
</div>
<div> <input type="checkbox" id="question3" name="q" class="questions"> <div class="plus">+</div> <label for="question3" class="question"> When are the meetings? </label> <div class="answers"> We meet once a month on the first Wednesday of the month, 8 PM at the Veterans House on College Avenue Campus. </div>
</div> <div> <input type="checkbox" id="question4" name="q" class="questions"> <div class="plus">+</div> <label for="question4" class="question"> How do I get in touch with the organization? </label> <div class="answers"> The best way to contact us is by e-mailing us, there is a link to e-mail us at the bottom of the page or you can visit the "Contact Us" page. </div>
</div>
</div>
</div> <!-- end of body !-->
<div class="footer"> <ul class="contact"> <li> RU S.E.R.V.S. </li> <li> <a href="mailto:[email protected]?Subject=Website%20Contact" target="_top">E-mail Us</a> </li> <li> 848-932-VETS </li> </ul> <div class="copyright"> Copyright © 2015, Rutgers, The State University of New Jersey, an equal opportunity, affirmative action institution. </ul> </div> <!-- end of footer !-->
</body>
</html>

FAQ Page - Script Codes CSS Codes

/* import the fonts needed */
@import url("https://fonts.googleapis.com/css?family=Cookie");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
/* reset */
* { margin: 0; padding: 0; box-sizing: border-box;
}
/* header settings */
.header > input { display: none; }
.header > label { display: none; width: 3em; height: 3em; margin-left: 1em; margin-top: .5em; background-size: contain; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5eWhtZzJUaFA0SjA"); background-repeat: no-repeat;
}
.header { width: 100%; height: 4em; background-color: #0C1323; opacity: 0.9; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5YWN3emwyelRyUUE"); background-repeat: no-repeat; background-position: right; background-size: auto 4em; position: fixed; top: 0px; z-index: 1000;
}
.header > .navbar { width: auto;
}
.header > .navbar > li { display: inline-block; width: auto; height: auto; font-size: 130%; padding: 10px 12px 5px 12px; text-align: center;
}
.header > .navbar > li > a { color: white; text-decoration: none; font-family: Trebuchet MS, Charcoal, sans-serif; text-shadow: 2px 2px grey;
}
.header > .navbar > li > a:hover { color: #C21814;
}
/* end header settings */
/* body settings */
.body { margin-top: 3em; z-index: -1000; width: 100vw; height: 100vh; font-family: Trebuchet MS, Charcoal, sans-serif; font-size: 130%; color: #0C1323; background-size: 100%; background-repeat: repeat-y; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5elFiRTlubVZfN0k");
}
.question:hover { color: #C21814;
}
.content { width: 80%; padding: 20px; margin: 0 auto; padding: 0 60px 0 0;
}
.centerplease { margin: 0 auto; width: 100vw; font-size: 150%; text-align: center; margin-top: 3em; padding: 5px;
}
.question { position: relative; background: #0C1323; margin: 0; padding: 10px 10px 10px 50px; display: block; width:100%; cursor: pointer; color: white; text-shadow: 2px 2px grey;
}
.answers { background: #999; padding: 0px 15px; margin: 5px 0; height: 0; overflow: hidden; z-index: 15; position: relative; opacity: 0; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease;
}
.questions:checked ~ .answers{ height: auto; opacity: 1; padding: 15px;
}
.plus { position: absolute; color: white; margin-left: 10px; z-index: 15; font-size: 2em; line-height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
.questions:checked ~ .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.questions { display: none;
}
/* end of body settings */
/* footer settings */
.footer { display: block; width: 100%; color: #242B39; text-align: center; position: fixed; bottom: 0px; background-color: white; padding: 5px; z-index: 10; opacity: .9;
}
.footer > .contact { padding: 0px 0px 5px 0px;
}
.footer > .contact > li > a { text-decoration: none; color: #242B39;
}
.footer > .contact > li > a:hover { text-decoration: underline; text-transform: uppercase; color: #C21814;
}
.footer > .contact > li { display: inline; padding: 0px 8px 0px 8px; border-right: 1px solid #242B39;
}
.footer > .contact > li:last-child{ border-right: 0;
}
/* end of footer settings */
/* <= 600px settings*/
@media (max-width: 600px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 220px; height: 110vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 120vh; font-size: 90%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; }
}
/* 601-759px settings */
@media all and (min-width:601px) and (max-width:749px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 200px; height: 130vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; }
}
/* 750-799px settings */
@media all and (min-width:750px) and (max-width:799px) { .body { height: 100vh; font-size: 100%; }
}
/* 800-1300px settings*/
@media all and (min-width:800px) and (max-width:1300px) { .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; }
}
FAQ Page - Script Codes
FAQ Page - Script Codes
Home Page Home
Developer Arcadio
Username arcadiomj
Uploaded October 16, 2022
Rating 3
Size 3,698 Kb
Views 18,216
Do you need developer help for FAQ Page?

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!

Arcadio (arcadiomj) Script Codes
Name
Ex3Page1
ContactPage
HTML Lab
Online - sci html
Landing Page
Hello World
A Pen by Arcadio
In Class Border Example
RU S.E.R.V.S. Page
Create amazing blog posts 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!