diff --git a/submissions/Cashass/HTML-CSS-Popup/index.html b/submissions/Cashass/HTML-CSS-Popup/index.html
new file mode 100644
index 0000000000..617aca930d
--- /dev/null
+++ b/submissions/Cashass/HTML-CSS-Popup/index.html
@@ -0,0 +1,190 @@
+
+
+
+ Popup-menu
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/submissions/Cashass/HTML-CSS-Popup/style.css b/submissions/Cashass/HTML-CSS-Popup/style.css
new file mode 100644
index 0000000000..80995ead34
--- /dev/null
+++ b/submissions/Cashass/HTML-CSS-Popup/style.css
@@ -0,0 +1,216 @@
+* {
+ padding: 0;
+ margin: 0;
+}
+
+html,
+body {
+ margin: 0;
+ height: 100%;
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 16px;
+ background-color: #ffe6cc;
+}
+
+.wraper {
+ max-width: 100%;
+ margin: 0 auto;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ min-height: 100vh;
+}
+
+.header {
+ max-width: 100%;
+ display: flex;
+ justify-content: end;
+}
+
+.header__lists {
+ display: flex;
+ list-style: none;
+}
+
+.container {
+ max-width: 1280px;
+ width: 100%;
+ justify-content: end;
+ height: 100%;
+}
+
+.header__menu {
+ max-width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin: 0 auto;
+}
+
+.header__lists {
+ display: flex;
+ list-style: none;
+}
+
+.header__list {
+ position: relative;
+ vertical-align: middle;
+ align-items: center;
+ display: flex;
+}
+
+.header__link {
+ display: block;
+ padding: 10px;
+ font-size: 20px;
+ color: #000;
+ border-radius: 5px;
+ text-decoration: none;
+ margin: 10px;
+ border: 1px solid transparent;
+}
+
+.header__link:focus,
+.header__link:focus-within,
+.header__link:hover {
+ border: 1px solid #7a7a52;
+ border-radius: 5px;
+}
+
+.header__input {
+ appearance: none;
+ position: absolute;
+}
+
+.header__logo-menu,
+.sub__check-label {
+ display: block;
+ cursor: pointer;
+}
+
+.popup {
+ position: absolute;
+ display: none;
+ top: 80px;
+ right: -150px;
+ max-width: 380px;
+ max-height: 310px;
+ overflow: auto;
+ overflow-x: hidden;
+ border: 1px solid #7a7a52;
+ border-radius: 5px;
+ padding: 10px 10px 5px 10px;
+ background-color: #ffffe6;
+ object-fit: cover;
+}
+
+.header__input:checked ~ .popup {
+ display: block;
+}
+
+.header__lists-popup {
+ display: grid;
+ grid-template-columns: repeat(3, 110px);
+ grid-template-rows: auto;
+ gap: 15px;
+ padding: 5px;
+ align-items: end;
+ list-style-type: none;
+}
+
+.header__input-label {
+ position: relative;
+}
+
+.popup__list {
+ padding: 5px;
+ width: 110px;
+ height: 60px;
+ text-align: center;
+ font-size: 16px;
+}
+
+.popup-img {
+ display: block;
+ max-width: 90%;
+ max-height: 90%;
+ margin: 0 auto;
+}
+
+.popup__link {
+ display: block;
+ text-decoration: none;
+ color: #000;
+ padding: 3px;
+ border: 1px solid transparent;
+}
+
+.popup__link:focus,
+.popup__link:hover {
+ border: 1px solid #7a7a52;
+ border-radius: 5px;
+}
+
+.sub__check-label {
+ display: block;
+ padding: 0;
+ margin: 30px 0px 0px 0px;
+ font-size: 20px;
+ text-align: center;
+ text-transform: uppercase;
+ background-color: #d6d6c2;
+ border: 1px solid transparent;
+}
+
+.sub__check-input {
+ appearance: none;
+ position: absolute;
+ margin-top: 29px;
+ border: 1px solid transparent;
+ width: 95%;
+ height: 25px;
+}
+
+.sub__check-input:focus,
+.sub__check-input:focus-within,
+.sub__check-input:hover {
+ border: 1px solid #7a7a52;
+}
+.sub__check-input:checked ~ .sub__lists-popup {
+ display: block;
+}
+
+.sub__check-input:checked ~ .sub__check-label {
+ display: none;
+}
+
+.sub__check-input:checked {
+ display: none;
+}
+
+.sub__lists-popup {
+ display: none;
+ padding: 5px;
+}
+
+.sub__lists {
+ display: grid;
+ gap: 15px;
+ align-items: end;
+ list-style-type: none;
+ grid-template-columns: repeat(3, 110px);
+ grid-template-rows: auto;
+ padding-top: 30px;
+ margin-top: 30px;
+ border-top: 1px solid #7a7a52;
+}
+
+.sub__popup-img {
+ display: block;
+ max-width: 90%;
+ max-height: 90%;
+ margin: 0px auto;
+}
+
+.notification,
+.avatar {
+ display: block;
+}