dsx-folder-templates-client/src/components/Main/main.module.css

A use case of the Dropbox Solutions Accelerators project. This solution creates folder structures from pre-defined templates. This is the frontend app.

.taglineContainer {
  position: relative;
  display: flex;
  width: 100%;
  height: 20vh;
  justify-content: center;
  align-items: center;
  background-color: #0156fe;
}

.tagline {
  font-size: 3em;
  color: #f6f3f0;
}

.controlsContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 80vh;
  justify-content: center;
  align-items: center;
  row-gap: 2em;
}

.selectContainer {
  position: relative;
  width: 19vw;
  height: 5vh;
  border: 2px solid grey;
  border-radius: 0.5em;
  font-size: 1.5em;
}

.select__control {
  background-color: red;
}

.input {
  position: relative;
  width: 18vw;
  height: 4vh;
  padding-left: 1vw;
  border: 2px solid grey;
  border-radius: 0.5em;
  font-size: 1.5em;
}
.input:hover {
  border: 2px solid #2971fe;
}

.button {
  position: relative;
  width: 20vw;
  height: 5vh;
  background-color: #0156fe;
  border: none;
  border-radius: 0.5em;
  font-size: 1.5em;
  color: #f6f3f0;
}
.button:hover {
  cursor: pointer;
  background-color: #2971fe;
}

.horizontalLine {
  position: relative;
  width: 10vw;
  height: 1px;
  margin: 2em 0;
  background-color: #0156fe;
}