<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JOIN EMPOWERED CONSUMERISM</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<style type="text/css">
body{
background: #f6f6f6;
}
.box{
width: 100%;
margin: 10px auto;
background: #fff;
border-radius: 7px;
box-shadow: 1px 2px 4px rgba(0,0,0,.3);
}
.box .heading{
background: #7800CF;
border-radius: 7px 7px 0px 0px;
padding: 10px;
color: #fff;
text-align: center;
font-family: "Rubik";
}
.faqs{
padding: 0px 20px 20px;
}
::-webkit-details-marker{
float: right;
margin-top: 3px;
}
details{
background: #f6f6f6;
padding: 10px 20px;
border-radius: 7px;
margin-top: 20px;
font-family:sans-serif;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
}
details summary{
outline: none;
}
#slider {
overflow: hidden;
}
@keyframes slider {
0% { left: 0; }
30% { left: 0; }
33% { left: -100%; }
63% { left: -100%; }
66% { left: -200%; }
95% { left: -200%; }
100% { left: 0; }
}
#slider figure {
width:300%;
position: relative;
animation: 9s slider infinite;
}
#slider figure:hover {
}
#slider figure img {
width: 34%;
height : 250px;
float: left;
border-radius: 10px;
}
.container{
width: 100%;
height: 300px;
margin: 15px auto;
background: #fff;
border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0,0,0,.3);
}
iframe {
border-radius:10px;
}
</style>
<body>
</div>
<div class="container" >
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5gOvacawGqA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="box" >
<img src="pixlr.png" width="100%" alt="Empowered Comsumerism">
<div id="slider">
<figure>
<img src="pixlr.jpg">
</figure>
</div>
<p class="heading">FAQs</p>
<div class="faqs">
<details>
<summary>What is Lorem ipsum?</summary>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</details>
<details>
<summary>What is Lorem ipsum?</summary>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</details>
<details>
<summary>What is Lorem ipsum?</summary>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</details>
</div>
</div>
</div>
</body>
</html>