<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
What is Web Development?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Web Development broadly refers to the tasks associated with developing functional websites and applications for the Internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTML?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTML, aka HyperText Markup Language, is the dominant markup language for creating websites and anything that can be viewed in a web browser.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is HTTP?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
What is CORS?
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
h1 {
font-family: 'Montserrat', sans-serif;
text-align: center;
margin: 2rem 0;
font-size: 2.5rem;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
@media(max-width:767px) {
html {
font-size: 14px;
}
}
</style>
