flower-article / flower-styling.css
flower-styling.css
Raw
.body {
  background: #c9fdd7;
  text-align: center;
}

h1 {
  font-size: 55px;
  font-family: "Sacramento", cursive;
  margin: 0px auto;
}

h2 {
  font-size: 20px;
  font-family: "Delius", cursive;
}

p {
  font-family: "Delius", cursive;
}

.firstF {
  border-radius: 15px;
  margin: 20px 0px 20px 0px;
  width: 250px;
  transition: all 200ms ease-in-out;
}

.firstF:hover {
  filter: brightness(75%) contrast(75%) invert(5%);
  margin: 50px auto 50px auto;
  opacity: 55% white;
  transform: scale(1.15, 1.16);
}

.flowers img {
  display: block;
  width: 100%;
  border-radius: 11px;
  transition: all 250ms ease-in-out;
}

.flowers {
  margin: 0px 0px 20px 0px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.flowers img:hover {
  margin: 55px 60px 55px auto;
  transform: scale(1.95, 1.96);
}

form {
  display: inline;
}
button {
  margin: 15px 30px 30px 30px;
  padding: 10px;
  border-radius: 25px;
  border: 1px solid #79d1c3;
  background: #f8fcfb;
}

button:hover {
  cursor: pointer;
  background: #f2b3d5ff;
  color: #f8fcfb;
  border: 1px solid #f8fcfb;
}

footer {
  font-family: "Times New Roman", Times, serif;
}

.gitLink {
  color: black;
}
.fence {
  font-family: Helvetica, sans-serif;
  border-radius: 25px;
  margin: 50px auto;
  padding: 50px 90px;
  text-align: center;
  max-width: 600px;
  background: #f8fcfb;
}

.ptheme {
  background: #ffc0d0;
  color: white;
}
.ptheme button {
  background: white;
  color: black;
  border: 1.3px solid rgb(52, 160, 97);
}

.ptheme button:hover {
  background: #c9fdd7;
  color: black;
  border: 1.5px solid white;
}

.ptheme hr {
  height: 0.1px;
  background-color: black;
  color: black;
}
.bptheme {
  background: #42b883;
}