the top and bottom are actually the same colour, it's like a really cool optical illusion!

here's the CSS code (i did change the HTML a bit, but I just added a div element so it doesn't count)

body { margin: 0; padding: 0; background-color: #f5f5f5; background-image:url(0bd162d9f2d3572c03d4a3348113632762d0c327.gif); background-size:cover;background-repeat: no-repeat;}

nav { border-bottom-width: 2px; border-bottom-color: #ccc; border-bottom-style: solid; padding: 10px; margin-bottom: 15px; background-color: #fff;}

button:hover{ background-color: #ccc; border: beige;}

form{ width: 338px;height: 408px; margin: 50px auto; margin-top: 50px; border: 0px solid white; border-radius: 8%; background-color: #eae4e0; padding: 37px; box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.15); font-family: Helvetica; margin-top: 100px;
}

label, input, textarea{ display: block; margin:0,auto; border: 5px #cca; border-radius: 30px; border-top-left-radius: 0px; opacity:100%; }

textarea:hover{ background-color: #ccc; border: 3px #f5f5f5; border-radius: 25px; border-top-left-radius: 0px;
}

textarea{ border-top-left-radius: 0px; opacity:100%;}button{ width: 279px; height: 41px; margin-top: 30px; border-top-left-radius: 30px; border:30px #c4b987; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; opacity:100%;
}

input:hover{ background-color: #ccc; border: 3px #f5f5f5; border-radius: 25px; border-top-left-radius: 0px;
}

div{ background-color: #dddbd0; position: absolute; bottom: 0; text-align: center; width: 100%; height: 10%; border:#cca; border-top-left-radius: 10px; border-top-right-radius: 10px;}

#second{ background-color: #dddbd0;position: absolute;text-align: center;width: 100%;height: 10%;border: #cca;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;top: 0;}

p { font-family: Helvetica; font-size: 25px; padding-top: 15px; padding-left: 35px; color: Black; }

label{ margin: 10px 10px 0px 10px;}

edit: Second project. Aint much but its honest work

Project - image 1 - student project

body { margin: 0;

padding: 0;

background-color: #f5f5f5;

font-family: 'Roboto', Arial, sans-serif;

background-color: rgb(243, 234, 199,1);}

nav { border-bottom-width: 2px;

border-bottom-color: #ccc;

border-bottom-style: solid;

padding: 10px;

margin-bottom: 15px;

background-color: #fff;

font-family: 'Shrikhand', cursive;}

nav a { color: #000;

text-decoration: none;}

tbody :hover{background-color: rgb(247, 205, 129)}

td:hover{background-color: rgb(235, 211, 132);

text-decoration: underline;}

table{border:5px solid #5a6061;

text-align: left;

word-spacing: 1px;

height:150px;

border-radius: 20px;

box-shadow: 25px 20px 15px rgb(0 0 0 / 15%);

width: 477px;

height: 50px;

align-items: center;

margin: 50px auto;

background-color: rgba(255,221,144,1);
}

td{

width: 59px;

max-width: 129px;

word-spacing: 6px
}

Min Li

just a guy who is interested in stuff

--

3