Hey there, I tried my best to create modern pop-up from scratch based on your tutorials.

Pop-up form - image 1 - student project

I hope you'll like it.

Here's CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap')
* {    margin: 0px;    padding: 0px;    box-sizing: border-box;}
body {    background: linear-gradient(#440099, #12004e);    height: 100vh;    font-family: 'Poppins', sans-serif;}
.container {    position: relative;    width: 900px;    height: 500px;    background-color: white;    margin: 15vh auto;    padding-top: 70px;    border-radius: 20px;    -webkit-box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);-moz-box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);
}
h2 {
}
.tekst {    width: 4500px;}
h2, label, input, button {    position: relative;    top: 20px;    left: 50px;    display: block;}
label {    margin: 40px 0 10px 0;}
.slika {    width: 450px; float: right;    overflow: hidden; }
img {    height: 85%;    position: absolute;    bottom: 40px;    right: -20px;    }
button {    margin-top: 32px;    background: #370086;    padding: 10px 20px;    border: none;    border-radius: 20px;    color: white;    font-weight: 700;    font-family: 'Poppins';}
button:hover {    background: #f6bb07;}

input {    border: none;    border-bottom: 1px solid #f7bc07;    font-size: 15px;    padding-bottom: 5px;    }
input:focus {    outline: 0;    border: none;    border-bottom: 1px solid #46009c;}
.close {    position: absolute;    right: -30px;    top: -30px;    font-size: 10px;    background: #f2b707;    color: white;    padding: 0px 15px 0px 16px;    border-radius: 100px;    -webkit-box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);    -moz-box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);    box-shadow: 2px 0px 63px -4px rgba(0,0,0,0.75);    }