Add to cart feature for ticket using JAVA

Quest camp/style.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); :root { --primary-color: #047aed; --secondary-color: #1c3fa8; --dark-color: #002240; --light-color: #f4f4f4; } *{ box-sizing: border-box; padding: 0; margin: 0; } body{ font-family: "Lato", san-serif; color: #333; line-height: 1.6; } ul{ list-style-type: none; } a{ text-decoration: none; color: #333; } h1, h2 { font-weight: 300; line-height: 1.2; margin: 10px 0; } p{ margin: 10px 0; } img{ width: 100%; } h4 { margin: 16px 0; border-left: 5px solid #e74c3c; padding-left: 16px; font-size:30px; } .container .group { padding: 8px 48px; margin: 8px; } input[type="checkbox"] { display: none; } label { position: relative; } label::before { content: ""; background: url("img/check-circle.svg"); background-position: center; background-size: contain; width: 32px; height: 32px; position: absolute; left: -44px; top: -8px; transform: scale(0) rotateZ(180deg); transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49); } input[type="checkbox"]:checked + label::before { transform: scale(1) rotateZ(0deg); } label::after { content: ""; border: 2px solid #27ae60; width: 24px; height: 24px; position: absolute; left: -42px; top: -6px; border-radius: 50%; } a input[type=Submit] {padding:12px 25px; background:#ccc; border:0 none; cursor:pointer; -webkit-border-radius: 5px; border-radius: 5px; text-align: right; font-size:13px; padding: 12px 30px; margin: 165px; width: px; height: 40px; } /* Navbar Styling*/ .navbar{ background-color: var(--primary-color); color: #fff; height: 70px; } .navbar ul{ display: flex; } .navbar a{ color: #fff; padding: 10px; margin: 0 5px; } .navbar a:hover { border-bottom: 2px #fff solid; } .navbar .flex { justify-content: space-between; } /* Showcase Styling */ .showcase{ height: 300px; background-color: var(--primary-color); color: #fff; position: relative; } .showcase h1{ font-size: 40px; } .showcase p{ margin: 30px 0; } .showcase .grid { overflow: visible; grid-template-columns: 55% 45%; gap: 30px; } .showcase-form{ position: relative; top: 60px; height: 350px; width: 400px; padding: 40px; z-index: 100; } .showcase-form .form-control{ margin: 30px 0; } .showcase-form input[type='text'], .showcase-form input[type='email'] { border: 0; border-bottom: 1px solid #b4becb; width: 100%; padding: 3px; font-size: 16px; } .showcase-form input:focus { outline: none; } .showcase::before, .showcase::after{ content: ''; position: absolute; height: 100px; bottom: -70px; right: 0; left: 0; background: #fff; transform: skewY(-3deg) ; -webkit-transform: skewY(-3deg); -moz-transform: skewY(-3deg); -ms-transform: skewY(-3deg); } /* Stats */ .stats { padding-top: 100px; } .stats .grid h3{ font-size: 35px; } .stats .grid p{ font-size: 20px; font-weight: bold; } /* CLI */ .cli .grid{ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } .cli .grid > *:first-child{ grid-column: 1 /span 2; grid-row: 1 /span 2; } /* Banner */ .cloud .grid{ grid-template-columns: 4fr 3fr; } /* Footer */ .footer .social a { margin: 0 10px; } .fa-facebook:hover { color: #1773EA; } .fa-instagram:hover { color: #B32E87; } .fa-twitter:hover { color: #1C9CEA; } /* Animations */ @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes slideInFromRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } @keyframes slideInFromTop { 0% { transform: translateY(-100%); } 100% { transform: translateX(0); } } @keyframes slideInFromBottom { 0% { transform: translateY(100%); } 100% { transform: translateX(0); } } /* Tablets and under */ @media (max-width: 768px) { .grid, .showcase .grid, .stats .grid, .cli .grid, .cloud .grid, .features-main .grid, .docs-main .grid { grid-template-columns: 1fr; grid-template-rows: 1fr; } .showcase { height: auto; } .showcase-text { text-align: center; margin-top: 40px; animation: slideInFromTop 1s ease-in; } .showcase-form { justify-self: center; margin: auto; animation: slideInFromBottom 1s ease-in; } .cli .grid > *:first-child { grid-column: 1; grid-row: 1; } .aboutus-head, .aboutus-sub-head, .docs-head { text-align: center; } .aboutus-head img, .aboutus-sub-head img, .docs-head img { justify-self: center; } .aboutus-main .grid > *:first-child, .aboutus-main .grid > *:nth-child(2) { grid-column: 1; } } /* Mobile */ @media (max-width: 500px) { .navbar { height: 110px; } .navbar .flex { flex-direction: column; } .navbar ul { padding: 10px; background-color: rgba(0, 0, 0, 0.1); } .showcase-form { width: 300px; } } .contact-us{ width: 80%; margin: auto; } .contact-col{ flex-basis: 48%; margin-bottom: 30px; } .contact-col div{ display: flex; align-items: center; margin-bottom: 40px; } .contact-col div .fas{ font-size: 28px; color: #000000; margin: 10px; margin-right: 30px; } .contact-col div h5{ font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; } .contact-col div p{ padding: 0; } .contact-col input, .contact-col textarea{ width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border:1px solid black }