Lista DropDow

brunorodris · brunorodris · commit 0623b5d84247 · 2022-05-04T17:17:20.000-03:00
Código da lista dropdown (FAQ) que ensinei a fazer no canal Inteliogia lá no Youtube
diff --git a/dropdown-list/index.html b/dropdown-list/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Lista DropDown</title>
+</head>
+<body>
+    <section>
+        <details>
+            <summary>Título 01</summary>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi sit earum facilis voluptate, numquam magni tempore quas illum veritatis aliquam nobis consectetur amet magnam sapiente voluptatibus veniam maxime obcaecati culpa.</p>
+        </details>
+
+        <details>
+            <summary>Título 02</summary>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi sit earum facilis voluptate, numquam magni tempore quas illum veritatis aliquam nobis consectetur amet magnam sapiente voluptatibus veniam maxime obcaecati culpa.</p>
+        </details>
+
+        <details>
+            <summary>Título 03</summary>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi sit earum facilis voluptate, numquam magni tempore quas illum veritatis aliquam nobis consectetur amet magnam sapiente voluptatibus veniam maxime obcaecati culpa.</p>
+        </details>
+    </section>
+</body>
+</html>
diff --git a/dropdown-list/style.css b/dropdown-list/style.css
@@ -0,0 +1,37 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Roboto";
+    color: #fff;
+}
+
+body{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+}
+
+section{
+    width: 70%;
+    max-width: 800px;
+}
+
+section details{
+    font-size: 18px;
+}
+
+section details summary{
+    background-color: #e41952;
+    padding: 2%;
+    border-bottom: 2px solid #282828;
+}
+
+section details p{
+    background-color: #282828;
+    padding: 2%;
+    transition: all .5s;
+}
