<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>project13</title>
<script
src="https://kit.fontawesome.com/cac5ba1843.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="/assets/css/style.css" />
<style>
.course-title {
font-weight: bold;
font-size: 38px;
color: #f6efea;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #e5722b;
}
ul {
list-style: none;
}
.collapse-menu {
margin: 50px auto;
width: 700px;
border: 2px solid #ece4e4;
background-color: #f6ece7;
}
.collapse-heading {
position: relative;
border: 2px solid #ece4e4;
line-height: 2;
padding-right: 5px;
display: block;
width: 100%;
font-size: 16px;
background-color: #8a83f3;
color: #fff;
}
.collapse-triggre {
color: #f3e9e9;
}
.collapse-controll {
position: absolute;
top: 3px;
left: 15px;
}
.collapse-body {
padding: 10px;
color: #5e5959;
line-height: 1.7;
}
.open {
transform: rotate(180deg);
transition: 0.5s;
top: -3px;
}
.collapse-body {
display: none;
}
</style>
</head>
<body>
<p class="course-title">پروژه شماره13</p>
<div class="collapse-menu">
<div class="collapse-panel">
<header class="collapse-heading">
<a href="#" class="collapse-triggre"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</a
>
<span class="collapse-controll"
><i class="fa-solid fa-angle-down"></i
></span>
</header>
<div class="collapse-body">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</div>
</div>
<div class="collapse-panel">
<header class="collapse-heading">
<a href="#" class="collapse-triggre"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</a
>
<span class="collapse-controll"
><i class="fa-solid fa-angle-down"></i
></span>
</header>
<div class="collapse-body">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</div>
</div>
<div class="collapse-panel">
<header class="collapse-heading">
<a href="#" class="collapse-triggre"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</a
>
<span class="collapse-controll"
><i class="fa-solid fa-angle-down"></i
></span>
</header>
<div class="collapse-body">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</div>
</div>
<div class="collapse-panel">
<header class="collapse-heading">
<a href="#" class="collapse-triggre"
>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</a
>
<span class="collapse-controll"
><i class="fa-solid fa-angle-down"></i
></span>
</header>
<div class="collapse-body">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می‌باشد، کتابهای زیادی
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می
طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
صورت می‌توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای
اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده
قرار گیرد.
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$(".collapse-heading").click(function () {
if($('.collapse-body').css('display')=='none'){
$('.collapse-controll').addClass('open');
$('.collapse-body').slideDown();
}else{
$('.collapse-controll').removeClass('open');
$('.collapse-body').slideUp();
}
});
});
</script>
</body>
</html>
۱
با کلیک روی heading تمام آکاردئون‌ها باز می‌شود
ایجاد شده در ۱۴ اسفند ۱۴۰۲
ایجاد شده در ۱۴ اسفند ۱۴۰۲
عباس قلبی هکر زاده
۱۴ اسفند ۱۴۰۲، ۱۵:۳۰
ورود/افزودن پاسخ
مشارکت کنندگان در این تاپیک
