Subscribe Form by admin

1 Add to Favorites

HTML Code
CSS Code

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
* {
  font-family: "Open Sans", sans-serif;
}

body {
  background: linear-gradient(45deg, #fb4764, #f88d5f) no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.submit {
  background: linear-gradient(45deg, #fb4764, #f88d5f) no-repeat;
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
  padding: 11px 35px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
}

.input-main input {
  height: 26px;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: #a2a2a2;
  font-size: 1rem;
}

.input-main input::placeholder {
  color: #a2a2a2;
}

.input-main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  background-color: #ebebeb;
  border-radius: 100px;
  margin-right: 15px;
}

.input-main svg {
  width: 30px;
  height: auto;
  fill: #a2a2a2;
  margin-right: 10px;
}

.form-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  margin-top: 39px;
}

.description {
  font-size: 1.1rem;
  color: #636363;
  margin-top: 10px;
}

.title {
  text-transform: uppercase;
  font-weight: 900;
  color: #4a4a4a;
}

.img-head {
  width: 100%;
  height: auto;
  margin-top: 45px;
}

.container {
  background-color: white;
  text-align: center;
  width: 90%;
  padding: 20px 0;
  border-radius: 50px;
  margin: 50px auto;
}

@media only screen and (max-width: 500px) {
  body {
    margin: 0 15px;
  }
  .img-head {
    margin-top: 75px;
  }
  .form-box {
    display: grid;
  }
  .input-main {
    margin-right: 0;
  }
  .submit {
    margin-top: 16px;
  }
  .description {
    font-size: 1rem;
    margin: 0 35px;
  }
  .title {
    font-size: 1.5rem;
  }
  .form-box {
    margin-top: 25px;
  }

.container {
    border-radius: 15px;
    width: 100%;
  }
}

Uploaded: 13th July 2024

Tags: #newsletter, #subscription, #gradient, #letter, #form

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 24 CSS properties used in the above example. Click to view and learn about each property.

font-family background background-size border outline cursor color padding font-size font-weight border-radius height width input display justify-content align-items background-color margin-right fill margin margin-top text-transform text-align