*{ font-family: 'Anton', sans-serif; font-family: 'Russo One', sans-serif; font-family: 'Signika', sans-serif; } body { background-color: beige; } .wrapper { max-width: 1000px; margin: auto; } .wrapper h1 { padding: 20px; text-align: center; font-style: italic; } .project { display: flex; } .shop { flex: 75%; } .box { display: flex; width: 100%; height: 200px; margin-bottom: 20px; background: rgb(211, 208, 208); transition: all 0.s ease; box-shadow: 0.5px 0.5px 2.5px 2.5px rgb(105, 105, 105); } .box:hover { border: none; /* transform: scale(1.01); */ } .box img { width: 300px; height: 200px; object-fit: cover; } .content { padding: 20px; width: 100%; position: relative; } .content h3 { margin-bottom: 30px; } .content h4 { margin-bottom: 50px; } .btn-area { position: absolute; bottom: 20px; right: 20px; padding: 10px 25px; color:white; background-color: rgb(173, 14, 14); cursor: pointer; border-radius: 5px; } .btn-area:hover { background-color: #5b25b3; color: whitesmoke; font-weight: 600; } .unit input { width: 40px; padding: 5px; text-align: center; } .btn-area i { margin-right: 5px; } .right-bar { flex: 25%; margin-left: 20px; padding: 20px; height: 400px; border-radius: 5px; background: rgb(211, 208, 208); box-shadow: 0.5px 0.5px 1.5px 1.5px rgb(129, 129, 129); } .right-bar hr { margin-bottom: 25px; background-color: #5b25b3; } .right-bar p { display: flex; justify-content: space-between; margin-bottom: 30px; font-size: 20px; } .right-bar a { background-color: #5b25b3; color: whitesmoke; display: block; text-align: center; height: 30px; line-height: 30px; font-weight: 900px; border-radius: 35px; font-size:25px; margin-top: 25px; } .right-bar i { margin-right: 15px; } .right-bar a:hover { box-shadow:0 3px rgb(77, 55, 55) ; transition: 0.8s; border-radius: 25; padding: 15px; line-height: 20px; transition: .45s; background-color: rgb(173, 14, 14); color:aliceblue; }