diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..fe3516e
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a392f42
--- /dev/null
+++ b/index.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Queer</title>
+    <link rel="stylesheet" >
+    <link rel="icon" href="favicon.ico">
+    <style>
+        * {margin: 0;
+    }
+        html {
+            /*scrollbar-color: #aaf #fff;*/
+        }
+        body {
+            height: 100vh;
+            font-family: Rockwell;
+            color: #444444;
+            background: white;
+        }
+        .results {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: auto;
+        }
+        header {
+            background: #b0f;
+            color: white;
+            padding: 20px 30px 15px 30px;
+            font-size: 40px;
+        }
+        .card {
+            background: white;
+            width: 70%;
+            max-width: 400px;
+            max-height: 400px;
+            border: solid 1px #aaa;
+            border-radius: 30px;
+            padding: 40px;
+            margin: 20px 10px auto 10px;
+        }
+        .card:hover {
+            box-shadow: 0 5px 15px #ddf;
+            transition: ease 0.1s ;
+
+        }
+        h2, h5 {
+            margin: 0;
+            font-weight: normal;
+        }
+        h2 { font-size:30px;
+        }
+        h5 { font-size:12px; }
+        h4 {
+            font-weight: bold;
+            font-size: 16px;
+            margin: 20px 0 15px 0;
+        }
+
+        .topo {
+            display: flex;
+            justify-content: space-between;
+        }
+        .extra {
+            position: relative;
+            
+        }
+        .photo {
+            background: blue;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+        }
+        button {
+            border: solid 1px #aaa;
+            border-radius: 7px;
+            background-color: white;
+            font-size: 14px;
+            color: #444;
+            width: 50px;
+            margin-top: 12px;
+            height: 25px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+        button:hover {
+            background: #eef;
+            border: solid 1px blue;
+            color: blue;
+        }
+        button:active {
+            background: #aaf;
+        }
+        .openInfo {
+            position: absolute;
+            top: 0px;
+            right: -2px;
+            display: none;
+            border: 1px solid #aaa;
+            border-radius: 10px;
+            background-color: white;
+            overflow: hidden;
+
+        }
+        .openInfo > p {
+            font-family: Helvetica, sans-serif;
+            font-size: 14px;
+            font-weight: bold;
+            color: #666;
+            border-bottom: solid 1px #aaa;
+            margin: 0px;
+            padding: 8px;
+        }
+        .openInfo > p:hover {
+            background: #eef;
+            color: #55f;
+        }
+        .openInfo > .lastp {
+            border: none;
+        }
+        .descricao {
+            font-family: Helvetica, sans-serif;
+            font-size: 16px;
+            max-height: 200px;
+            overflow: auto;
+            margin: -10px -15px -15px -15px;
+            /* scrollbar-width: thin; thinner scroll bar */
+            border: solid 1px blue;
+            border-radius: 10px;
+            padding: 10px 15px 10px 15px;
+            scrollbar-width: none;
+
+        }
+
+    </style>
+</head>
+<body>
+    <header>Queer Database</header>
+    <div class="results">
+    <div class="card">
+        <div class="topo">
+            <div class="title">
+                <h2 class="name">Alguém Queer</h2>
+                <h5 class="pron">Ela/Dela</h5>
+                <h4 class="job">Designer & Fotógrafa</h4>
+            </div>
+            <div class="extra">
+                <div class="photo"></div>
+                <button class="infoButton" data-target="openInfo1">+ info</button>
+                <div id="openInfo1" class="openInfo">
+                    <p class="contact">name@email.com</p>
+                    <p class="contact">@instagram</p>
+                    <p class="lastp" class="contact">919191919</p>
+                </div>
+            </div>
+        </div>
+        <div class="descricao">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti.
+        </div>
+        
+    </div>
+    <div class="card">
+        <div class="topo">
+            <div class="title">
+                <h2 class="name">Alguém Queer</h2>
+                <h5 class="pron">Ela/Dela</h5>
+                <h4 class="job">Designer & Fotógrafa</h4>
+            </div>
+            <div class="extra">
+                <div class="photo"></div>
+                <button class="infoButton" data-target="openInfo2">+ info</button>
+                <div id="openInfo2" class="openInfo">
+                    <p>name@email.com</p>
+                    <p>@instagram</p>
+                    <p class="lastp">919191919</p>
+                </div>
+            </div>
+        </div>
+        <div class="descricao">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti. Maecenas vehicula, risus vehicula tristique vestibulum, eros ligula laoreet nunc, luctus tristique lorem nibh in lectus. Aliquam nibh neque, auctor non scelerisque ac, tincidunt ac sem. Vestibulum viverra sed enim sed vestibulum. Etiam sed justo ipsum. Cras sed lobortis mi. Integer et tortor a diam auctor vehicula id vel diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti. Maecenas vehicula, risus vehicula tristique vestibulum, eros ligula laoreet nunc, luctus tristique lorem nibh in lectus. Aliquam nibh neque, auctor non scelerisque ac, tincidunt ac sem. Vestibulum viverra sed enim sed vestibulum. Etiam sed justo ipsum. Cras sed lobortis mi. Integer et tortor a diam auctor vehicula id vel diam. 
+
+        </div>
+        
+    </div>
+    <div class="card">
+        <div class="topo">
+            <div class="title">
+                <h2 class="name">Alguém Queer</h2>
+                <h5 class="pron">Ela/Dela</h5>
+                <h4 class="job">Designer & Fotógrafa</h4>
+            </div>
+            <div class="extra">
+                <div class="photo"></div>
+                <button class="infoButton" data-target="openInfo3">+ info</button>
+                <div id="openInfo3" class="openInfo">
+                    <p class="contact">name@email.com</p>
+                    <p class="contact">@instagram</p>
+                    <p class="lastp" class="contact">919191919</p>
+                </div>
+            </div>
+        </div>
+        <div class="descricao">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti. Maecenas vehicula, risus vehicula tristique vestibulum, eros ligula nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti. Maecenas vehicula, risus vehicula tristique vestibulum, eros ligula nunc.
+        </div>
+        
+    </div>
+    <div class="card">
+        <div class="topo">
+            <div class="title">
+                <h2 class="name">Alguém Queer</h2>
+                <h5 class="pron">Ela/Dela</h5>
+                <h4 class="job">Designer & Fotógrafa</h4>
+            </div>
+            <div class="extra">
+                <div class="photo"></div>
+                <button class="infoButton" data-target="openInfo4">+ info</button>
+                <div id="openInfo4" class="openInfo">
+                    <p class="contact">name@email.com</p>
+                    <p class="contact">@instagram</p>
+                    <p class="lastp" class="contact">919191919</p>
+                </div>
+            </div>
+        </div>
+        <div class="descricao">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac massa id mauris porta maximus. Nunc eget nibh massa. Suspendisse potenti. Maecenas vehicula, risus vehicula tristique vestibulum, eros ligula nunc.
+        </div>
+        
+    </div>
+
+    </div>
+    <script>
+        
+            const buttons = document.querySelectorAll(".infoButton");
+            const divs = document.querySelectorAll(".openInfo");
+
+            // Toggle the target div when its button is clicked or touched
+            buttons.forEach(button => {
+                button.addEventListener("click", function(event) {
+                    event.stopPropagation();
+                    toggleDiv(this.getAttribute("data-target"));
+                });
+                button.addEventListener("touchstart", function(event) {
+                    event.stopPropagation();
+                    toggleDiv(this.getAttribute("data-target"));
+                });
+            });
+
+            // Collapse all divs when clicking or touching outside
+            document.addEventListener("click", collapseAllDivs);
+            document.addEventListener("touchstart", collapseAllDivs);
+
+            function toggleDiv(targetId) {
+                const targetDiv = document.getElementById(targetId);
+                divs.forEach(div => {
+                    if (div.id === targetId) {
+                        div.style.display = div.style.display === "none" ? "block" : "none";
+                    } else {
+                        div.style.display = "none";
+                    }
+                });
+            }
+
+            function collapseAllDivs(event) {
+                let isButtonOrDiv = false;
+                buttons.forEach(button => {
+                    if (button.contains(event.target)) {
+                        isButtonOrDiv = true;
+                    }
+                });
+                divs.forEach(div => {
+                    if (div.contains(event.target)) {
+                        isButtonOrDiv = true;
+                    }
+                });
+
+                if (!isButtonOrDiv) {
+                    divs.forEach(div => {
+                        div.style.display = "none";
+                    });
+                }
+            }
+        ;
+    </script>
+
+</body>
+</html>
\ No newline at end of file
