debugg repo

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "lint",
+			"problemMatcher": [],
+			"label": "npm: lint",
+			"detail": "eslint .js"
+		}
+	]
+}

css/modal.css

@@ -0,0 +1,128 @@
+/*MODAL style */
+
+#contact__modal {
+    display: none;
+    border-radius: 5px;
+    background-color: #DB8876;
+    width: 50%;   
+    flex-direction: column;
+    align-items: center;   
+    padding: 35px;
+    margin: 180px auto;
+}
+.modal__form  {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 100%;
+    min-height: 900px;
+}
+.modal__form--header{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 100%;
+    margin: 0;
+}
+
+.modal__form--BtnClose{
+    background-color: #DB8876;          
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+}       
+.modal__form--BtnClose:hover, .modal__form--BtnClose:focus{
+    transform: scale(1.1);
+    outline: 2px solid #901C1C;
+}
+.modal__form--BtnClose:before{
+    display: flex;
+    justify-content: center;
+    content: "\f659";
+    font-family: 'bootstrap-icons';
+    color: white;
+    background-color: #DB8876;
+    font-size: 50px;
+    height: 100%;
+    width: 100%;
+}
+
+.modal__form--title{
+    font-size: 64px;
+    font-weight: 400;
+    text-align: center;
+    margin: 0;
+}
+.modal__form--photographerName{
+    font-size: 64px;
+    font-weight: 400;
+    margin: 0;
+}
+
+form {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+form label {
+    color: #312E2E;
+    font-size: 36px;
+}
+
+form div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: self-start;
+    margin-bottom: 26px;
+}
+
+form input {
+    width: 100%;
+    height: 68px;
+    border: none;
+    border-radius: 5px;
+}
+form textarea{
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+}
+::placeholder{
+    font-size: 24px;
+    font-family: "DM Sans", sans-serif;
+    color: black;
+}
+.formData[data-error-visible]::after{
+    content: attr(data-error);
+    font-size: 24px;
+    font-weight: bold;
+    text-decoration: underline 2px double #901C1C;
+    font-family: "DM Sans", sans-serif;
+    color: #0B0D0D;
+
+    opacity: 0;    
+}
+.formData[data-error-visible="true"]::after{
+    opacity: 1;
+}
+.text-control[data-error-visible="true"]{
+    border: 5px solid #901C1C;
+}
+.contact__form--submitBtn{
+    background-color: #901C1C;
+    color: white;
+    font-size: 18px;
+    font-weight: 700;
+    border: none;
+    border-radius: 5px;
+    width: 42%;
+    height: 68px;
+    cursor: pointer;
+}
+.contact__form--submitBtn:hover, .contact__form--submitBtn:focus{
+    border: #312E2E 2px solid;    
+    transform: scale(1.1);
+}