Buat Frequently Asked Questions
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
<styl>
body {
margin: 0;
padding: 0;
font-family: 'arial', sans-serif;
}
.faq-list {
list-style: none;
padding: 0;
}
.faq-list li {
margin: 30px 0;
border: 1px solid rgb(205, 205, 205);
padding: 27px 30px;
margin: 0px auto 30px;
text-align: left;
width: 550px;
position: relative;
}
.faq-list .faq-heading::before {
content: '+';
font-size: 40px;
display: block;
position: absolute;
right: 0;
top: -8px;
color: #c2c2c2;
}
.faq-list .the-active .faq-heading::before {
content: '-';
}
.faq-heading {
position: relative;
cursor: pointer;
font-size: 18px;
font-weight: 400;
margin: 0;
}
.faq-heading:hover {
color: var(--theme-color);
}
.faq-text {
display: none;
}
.container {
width: 1200px;
margin: auto;
}
.art-box svg {
width: 100%;
}
.row {
display: flex;
}
.row .col {
flex-basis: 50%;
}
.read {
color: rgb(100, 100, 100);
font-size: 16px;
line-height: 1.5;
margin-top: 25px;
}
</style>
</head>
<body>
<section>
<div class="container">
<ul class="faq-list">
<li>
<h4 class="faq-heading">Apa itu situs fotografer?</h4>
<p class="read faq-text">
Situs fotografer adalah platform online yang memungkinkan fotografer untuk memamerkan dan menjual karya mereka, serta berinteraksi dengan calon klien dan penggemar fotografi.
</p>
</li>
<li>
<h4 class="faq-heading">Apa manfaat memiliki situs fotografer?</h4>
<p class="read faq-text">
Portofolio Digital: Menampilkan karya fotografer secara profesional.<br>
Akses Lebih Luas: Menjangkau calon klien dari berbagai lokasi.<br>
Pemasaran: Meningkatkan visibilitas dan brand fotografer.<br>
Penghasilan Tambahan: Menjual foto secara online.
</p>
</li>
<li>
<h4 class="faq-heading">Bagaimana cara membuat situs fotografer?</h4>
<p class="read faq-text">
Pilih Platform: Gunakan platform seperti WordPress, Squarespace, atau website builder lainnya.<br>
Desain: Buat desain yang menarik dan sesuai dengan gaya fotografi.<br>
Konten: Unggah foto, tulisan, dan informasi kontak.<br>
Optimalkan SEO: Pastikan situs mudah ditemukan oleh mesin pencari.
</p>
</li>
<li>
<h4 class="faq-heading">Apa yang perlu dipertimbangkan saat membuat situs fotografer?</h4>
<p class="read faq-text">
Kualitas Gambar: Pastikan foto berkualitas tinggi.<br>
Navigasi: Desain yang mudah digunakan dan navigasi yang jelas.<br>
Konten: Tulisan, blog, dan informasi tentang layanan yang ditawarkan.<br>
Kontak: Informasi kontak yang mudah diakses.
</p>
</li>
<li>
<h4 class="faq-heading">Bagaimana cara mempromosikan situs fotografer?</h4>
<p class="read faq-text">
Media Sosial: Gunakan platform seperti Instagram, Facebook, dan Twitter untuk mempromosikan karya.<br>
SEO: Optimalkan konten untuk mesin pencari.<br>
Kolaborasi: Bekerja sama dengan brand atau influencer.<br>
Konten berkualitas: Buat konten yang menarik dan relevan dengan audiens.
</p>
</li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.faq-heading').click(function () {
$(this).parent('li').toggleClass('the-active').find('.faq-text').slideToggle();
});
</script>
</body>
</html>
0 komentar: