diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c8ec17d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..92a0163
--- /dev/null
+++ b/main.js
@@ -0,0 +1,48 @@
+const contacts = document.querySelectorAll('.contact-info');
+const overlay = document.getElementById('overlay');
+const contactContainer = document.getElementById('phone-contact-container');
+const sort = document.getElementById('sort');
+
+overlay.addEventListener('click', e => {
+ e.stopPropagation();
+ e.target.classList.remove('show');
+ contacts.forEach(e => {
+ e.parentElement.classList.remove('selected');
+ Array.from(e.children).forEach((child, index) => {
+ if(index !== 0){
+ child.classList.add('hidden');
+ }
+ if(child.classList.contains('contact-email')){
+ const strippedString = child.innerHTML.replace(/(<([^>]+)>)/gi, "");
+ child.innerHTML = strippedString;
+ }
+ });
+ });
+})
+
+contactContainer.addEventListener('click', e => {
+ const contact = e.target.closest('.phone-contact');
+ const contactInfo = contact.querySelector('.contact-info');
+ overlay.classList.add('show');
+ contact.classList.add('selected');
+ Array.from(contactInfo.children).forEach(child => {
+ child.classList.remove('hidden');
+ if(child.classList.contains('contact-email')){
+ const innerHtml = child.innerHTML;
+ child.innerHTML = `${innerHtml}`;
+ }
+
+ });
+});
+
+sort.addEventListener('change', selectEvent => {
+ contacts.forEach(e => {
+ if(!e.firstElementChild.classList.contains(`contact-${selectEvent.target.value}`)){
+ let target = e.querySelector(`.contact-${selectEvent.target.value}`);
+ target.classList.remove('hidden');
+ target.remove();
+ e.insertAdjacentElement('afterbegin', target);
+ e.children[1].classList.add('hidden');
+ }
+ });
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..3358828
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,187 @@
+:root {
+ --header-grey: #313131;
+ --row-light-grey: #212121;
+ --row-dark-grey: #1A1A1A;
+ --green: #07FD1C;
+ --red: #FF020A;
+ --yellow: #FFF801;
+ --blue-font: #05EDF9;
+ --muted-font: gray;
+ --selected-background: dimgray;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ width: 100vw;
+ color: #fff;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+a {
+ color: var(--blue-font);
+}
+
+.phone-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ border-radius: 12px;
+ max-width: 320px;
+ width: 100%;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+ -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
+ box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+ position: relative;
+}
+
+.phone-container .overlay{
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.6);
+ z-index: 0;
+}
+
+.phone-container .overlay.show{
+ z-index: 2;
+}
+
+.phone-container .phone-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ background-color: var(--header-grey);
+ width: 100%;
+ border-top-right-radius: 12px;
+ border-top-left-radius: 12px;
+ padding: 0px 24px;
+ height: 60px;
+}
+
+.phone-container .phone-header .phone-title {
+ font-size: 24px;
+}
+
+.phone-container .phone-contact-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ width: 100%;
+ position: relative;
+ overflow-x: hidden;
+ background-color: var(--row-dark-grey);
+}
+
+.phone-container .phone-contact-container .phone-contact {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ align-items: flex-start;
+ justify-content: space-between;
+ border-top: solid 1px black;
+ position: relative;
+ z-index: 1;
+}
+
+.phone-container .phone-contact-container .phone-contact.selected {
+ z-index: 3;
+ background-color: var(--selected-background);
+}
+
+.phone-contact-container .phone-contact:nth-child(even) {
+ background: var(--row-light-grey);
+}
+.phone-contact-container .phone-contact:nth-child(odd) {
+ background: var(--row-dark-grey);
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-name {
+ padding: 8px 16px 8px 16px;
+ border-right: solid 1px black;
+ width: 50%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ font-size: 15px;
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-name::before {
+ width:8px;
+ height:8px;
+ border-radius:50%;
+ content: "";
+ margin-right: 12px;
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-name.red::before {
+ background: var(--red);
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-name.green::before {
+ background: var(--green);
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-name.yellow::before {
+ background: var(--yellow);
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-info {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ align-items: flex-start;
+ justify-content: center;
+ padding: 8px 0px 8px 16px;
+ color: var(--muted-font);
+ font-size: 14px;
+}
+
+.phone-container .phone-contact-container .phone-contact.selected .contact-info {
+ position: absolute;
+ top: 0px;
+ left: 35%;
+ background-color: dimgray;
+ color: white;
+ background-color: var(--selected-background);
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-info .contact-email {
+ margin-bottom: 8px;
+}
+
+.phone-container .phone-contact-container .phone-contact .contact-info .contact-phone {
+ margin-bottom: 8px;
+}
+
+.phone-footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ align-items: center;
+ background-color: var(--header-grey);
+ width: 100%;
+ height: 50px;
+ border-bottom-right-radius: 12px;
+ border-bottom-left-radius: 12px;
+ padding: 0px 24px;
+}
+
+.hidden {
+ display: none;
+}
\ No newline at end of file