问题描述
我正在研究这个项目并使用 Bootstrap Accordion。我的手风琴物品似乎相互重叠，有时在容器内，有时在其他容器的顶部。
有谁知道如何解决这个问题？谢谢。
我曾尝试添加容器，但它似乎弄乱了手风琴。
我还想在手风琴下方添加空间，但不确定在其下方添加边距或间隔是否会降低响应速度。
截图： Accordion 1 `[
*{margin:0;padding:0;}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143,25,154,1),rgba(200,5,158,0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right:0;
color: rgb(224,16,176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224,176);
}
.accordion-button:not(.collapsed) {
color: rgb(224,176) !important;
background-color: rgb(254,183,238,.8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
}
a {
color: #73C3E8;
}
img {
position: absolute;
}
.backgroundElipse {
position:center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn{
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- required Meta tags -->
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
<!--title and favicon-->
</head>
<body>
<div class="container">
<div class="col-12">
<!--section1-->
<div class="sectionOne">
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">RaspBerry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The RaspBerry Pi may be a computer smaller than a deck of cards,but you’ll be
surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<a id="learnMore">
<div class="accordion-item"></a>
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapSEOne" aria-expanded="false" aria-controls="flush-collapSEOne" onclick="about"
()>
About
</button>
</h2>
<div id="flush-collapSEOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body about">
<p><strong>RaspBerry Pi is a</strong> fully featured,low cost,tiny Linux computer that is an easy
way to learn programming and computing.</p>
</div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="col-md-12">
<div class="col"><img src="" class="img-fluid" alt="raspBerry pi icon" width="100" height="100">
</div>
</div>
</h2>
<div class="col">
<h3>RaspBerry Pi</h3>
</div>
</div>
<p>Go with models 3 and higher.</p>
</div>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Set up your SD card.</h4>
<p>Install the operating system onto the SD card. </p>
<a href="https://www.raspBerrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
Operating
System </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel"
data-interval="false">
<div class="carousel-inner">
<div class="video-container item active">
<div class="youtube-video" id='AO89eXKO0c4'></div>
<div class="carousel-caption">Video 1</div>
</div>
<div class="video-container item">
<div class="youtube-video" id='6MjRVkm9CF0'></div>
<div class="carousel-caption">Video 2</div>
</div>
<div class="video-container item ">
<div class="youtube-video" id='R8poo-zCK9g'></div>
<div class="carousel-caption">Video 3</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#random_number1" data-slide="prev">
<div class="left-button">
<div class="glyphicon glyphicon-chevron-left"></div>
</div>
</a>
<a class="right carousel-control" href="#random_number1" data-slide="next">
<div class="right-button">
<div class="glyphicon glyphicon-chevron-right"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your RaspBerry Pi </p>
<a href="url"> Link to see what you can do with Python </a>
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Camera</h5>
<p>Take some photos with your raspBerry pi.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Touch Screen</h5>
<p>Have a fully handheld experience with this screen addition.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.adafruit.com/product/2707" class="d-block w-100"
alt="Pimironi Picade Game Controller">
<div class="carousel-caption d-none d-md-block">
<h5>Pimoroni Picade Console Controller</h5>
<p>For a retro gaming experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">PrevIoUs</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
r = (255,0)
p = (230,255)
b = (0,255,247)
O = (0,0)
X = (255,0)
# Get your SenseHat to give you a kiss
kiss = [
O,X,O,b,p,r,O
]
# display these colours on the LED matrix
sense.set_pixels(kiss)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
RaspBerry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine"
data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet" />
<script src="script.js"></script>
</html>]2`
解决方法
您混合使用了 Bootstrap 3、4 和 5 文件。您应该只有一组 Bootstrap 文件。因为你有 bootstrap-5 的代码，我假设这就是你想要使用的（不支持 IE11）。您在 DOCTYPE 之前和正文结束标记之后有文件。您的某些组件与其他组件重叠，因为您对所有图像使用绝对位置，并为至少一个（backgroundElipse）使用较大的上边距。
我稍微清理了您的文件（删除了您的 img 样式并隐藏了 backgroundElipse）。
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!--title and favicon-->
<style>
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143,25,154,1),rgba(200,5,158,0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right: 0;
color: rgb(224,16,176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224,176);
}
.accordion-button:not(.collapsed) {
color: rgb(224,176) !important;
background-color: rgb(254,183,238,.8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
a {
color: #73C3E8;
}
.backgroundElipse {
display: none;
position: center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn {
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}
</style>
</head>
<body>
<div class="container">
<div class="col-12">
<!--section1-->
<div class="sectionOne">
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">Raspberry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards,but you’ll be
surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<a id="learnMore">
<div class="accordion-item">
</a>
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about" ()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body about">
<p><strong>Raspberry Pi is a</strong> fully featured,low cost,tiny Linux computer that is an easy
way to learn programming and computing.</p>
</div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="col-md-12">
<div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
</div>
</div>
</h2>
<div class="col">
<h3>Raspberry Pi</h3>
</div>
</div>
<p>Go with models 3 and higher.</p>
</div>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Set up your SD card.</h4>
<p>Install the operating system onto the SD card. </p>
<a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
Operating
System </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="video-container item active">
<div class="youtube-video" id='AO89eXKO0c4'></div>
<div class="carousel-caption">Video 1</div>
</div>
<div class="video-container item">
<div class="youtube-video" id='6MjRVkm9CF0'></div>
<div class="carousel-caption">Video 2</div>
</div>
<div class="video-container item ">
<div class="youtube-video" id='R8poo-zCK9g'></div>
<div class="carousel-caption">Video 3</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#random_number1" data-slide="prev">
<div class="left-button">
<div class="glyphicon glyphicon-chevron-left"></div>
</div>
</a>
<a class="right carousel-control" href="#random_number1" data-slide="next">
<div class="right-button">
<div class="glyphicon glyphicon-chevron-right"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
<a href="url"> Link to see what you can do with Python </a>
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Camera</h5>
<p>Take some photos with your raspberry pi.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Touch Screen</h5>
<p>Have a fully handheld experience with this screen addition.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.adafruit.com/product/2707" class="d-block w-100" alt="Pimironi Picade Game Controller">
<div class="carousel-caption d-none d-md-block">
<h5>Pimoroni Picade Console Controller</h5>
<p>For a retro gaming experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
r = (255,0)
p = (230,255)
b = (0,255,247)
O = (0,0)
X = (255,0)
# Get your SenseHat to give you a kiss
kiss = [
O,X,O,b,p,r,O
]
# Display these colours on the LED matrix
sense.set_pixels(kiss)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>