CodeYourFuture · filkovskyy · Sep 14, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,385 @@
-/* Add your CSS here */
+:root {
+  --red-brown: #a05941;
+  --green-black: #133032;
+  --light-grey: #ededee;
+  --white: #fff;
+  --transparent-white: rgba(255, 255, 255, 0.75);
+  --headings-font: Fjalla One - Regular 400;
+  --subheadings-font: Extra-light 200;
+  --body-font: Extra-light 200;
+}
 
-/* Dont' forget to link this file to your HTML in the <head> */
+body {
+  background-color: var(--light-grey);
+}
+
+header {
+  height: auto;
+  width: 100%;
+}
+
+.nav-mob {
+  text-align: right;
+  padding-top: 50px;
+  position: relative;
+  overflow: hidden;
+  margin-right: 60px;
+}
+
+.header-first {
+  width: 1000px;
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--white);
+  margin: 0 2rem;
+}
+
+.search-logo {
+  width: 1rem;
+  height: auto;
+  padding-top: 15px;
+}
+
+.button {
+  background-color: rgb(255, 255, 255);
+  border: white;
+  border-color: var(--red-brown);
+}
+
+.basket {
+  width: 1.2rem;
+}
+
+.search-field {
+  height: 40px;
+  border: none;
+}
+
+.login-basket {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.login {
+  display: none;
+  justify-content: space-between;
+  margin-right: 2rem;
+  color: var(--red-brown);
+  height: 2rem;
+}
+
+.login img {
+  margin-right: 2rem;
+  color: var(--red-brown);
+}
+
+.header-second {
+  display: none;
+  width: 1000px;
+  justify-content: space-between;
+}
+
+.name-nav {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 25px;
+  color: var(--red-brown);
+  margin-bottom: -40px;
+}
+
+.name-nav p {
+  font-size: 3rem;
+}
+
+.navigation {
+  display: none;
+  justify-content: space-around;
+  list-style: none;
+}
+
+.nav-item {
+  padding: 2px 15px;
+}
+
+.navigation a {
+  text-decoration: none;
+}
+
+.delivery-text {
+  padding-left: 25px;
+  color: var(--red-brown);
+}
+
+.delivery-text p {
+  font-size: 2rem;
+}
+
+.hero {
+  min-height: 800px;
+  text-align: center;
+  background: rgb(148, 168, 148) url("../images/backgr.png") no-repeat;
+  margin: 0 30px 0 25px;
+  background-size: cover;
+  width: 1000px;
+}
+
+.hero p {
+  color: white;
+  font-size: 20px;
+}
+
+.hero h1 {
+  color: white;
+  font-size: 70px;
+}
+
+.logo {
+  margin-top: 60px;
+  color: white;
+  width: 10%;
+}
+
+.button-general {
+  background-color: var(--red-brown);
+  color: white;
+  font-weight: bolder;
+  padding: 10px 45px;
+  margin: 30px 0 20px;
+}
+
+.three-plants {
+  display: grid;
+  grid-column-gap: 20px;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(3, 1fr);
+  margin: 40px 0;
+  margin-left: 25px;
+  height: 400px;
+}
+
+.plant-one,
+.plant-two,
+.plant-three {
+  background-size: cover;
+  text-align: center;
+  margin-bottom: 30px;
+  margin-left: 80px;
+}
+
+.plant-one {
+  background-image: url("../images/plant1.png");
+  grid-column: 1 / -1;
+}
+
+.plant-two {
+  background-image: url("../images/plant2.png");
+  grid-column: 1 / -1;
+}
+
+.plant-three {
+  background-image: url("../images/plant3.png");
+  grid-column: 1 / -1;
+}
+
+.plant-name {
+  color: var(--red-brown);
+  font-size: 1.5rem;
+  padding-top: 20px;
+}
+
+hr {
+  width: 20px;
+  border: 2px solid var(--red-brown);
+  margin-bottom: 20px;
+}
+
+.about-us {
+  display: flex;
+  flex-direction: column;
+  margin: 0 60px;
+  width: 900px;
+}
+
+.paragraph {
+  padding: 70px 90px;
+  min-height: 500px;
+  color: var(--red-brown);
+  text-align: center;
+  background-color: var(--white);
+}
+
+.img-window,
+.img-leaf,
+.img-girl {
+  background-size: cover;
+  min-height: 500px;
+  width: 100%;
+}
+
+.img-window {
+  background-image: url("../images/plants-window.png");
+}
+
+.img-leaf {
+  background-image: url("../images/leaf.png");
+}
+
+.img-girl {
+  background-image: url("../images/plants-girl.png");
+}
+
+.buy-online {
+  background-color: var(--green-black);
+  color: white;
+  min-height: 900px;
+  text-align: center;
+  padding: 50px 0;
+}
+
+.buy-online h2 {
+  font-size: 4rem;
+  font-weight: bolder;
+}
+
+.buy-online button {
+  padding: 10px 50px;
+  background-color: white;
+  color: var(--green-black);
+}
+
+.form {
+  margin-top: 40px;
+  padding-bottom: 20px;
+  margin-bottom: 30px;
+  margin-left: 20px;
+}
+
+.form-backgr {
+  background: url("../images/background-2.png") no-repeat;
+  background-size: cover;
+  opacity: 70%;
+  height: 80vh;
+  margin: 0 35px 0 30px;
+}
+
+fieldset {
+  padding: 3rem;
+  margin: 0 auto;
+  width: 800px;
+  background: var(--transparent-white);
+  height: auto;
+  border: none;
+}
+
+.name {
+  display: flex;
+  flex-direction: row;
+}
+
+.firstname {
+  padding-right: 10px;
+  padding-bottom: 5px;
+}
+
+#firstname,
+#lastname,
+#email,
+#phone {
+  height: 25px;
+  width: 350px;
+  margin-bottom: 10px;
+}
+
+#firstname:hover,
+#lastname:hover,
+#email:hover,
+#phone:hover {
+  border: 3px black solid;
+}
+
+textarea {
+  height: 200px;
+  width: 90%;
+  margin-bottom: 10px;
+}
+
+#textarea:hover {
+  border: 3px black solid;
+}
+
+.input-button {
+  background-color: var(--red-brown);
+  color: var(--white);
+  width: 90%;
+  padding: 8px 20px;
+  margin-bottom: 10px;
+}
+
+.input-button:hover {
+  background-color: rgb(168, 121, 93);
+}
+
+.white-form h2 {
+  text-align: center;
+}
+
+.brown-text {
+  color: var(--red-brown);
+  font-size: 1.2rem;
+  font-family: var(--headings-font);
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+footer {
+  background-color: var(--green-black);
+  color: var(--white);
+  padding: 3rem 5rem;
+  margin: 20px 30px 0 25px;
+  width: 800px;
+}
+
+.info {
+  display: flex;
+  justify-content: space-around;
+  text-align: center;
+  padding: 1rem 5rem;
+}
+
+.footer-h3 {
+  margin: 20px auto;
+  padding-bottom: 2rem;
+}
+
+.subscribe {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.footer-form {
+  display: flex;
+  justify-content: center;
+}
+
+.footer-email {
+  margin-right: 1rem;
+}
+
+#footer-email {
+  background-color: var(--green-black);
+  height: 25px;
+  border: 2px white solid;
+  width: 90%;
+  padding-top: 10px;
+}
+
+.tooter-button {
+  padding: 2px 30px;
+  margin-top: 15px;
+}
+
+.help p {
+  color: white;
+  text-decoration: underline;
+}
diff --git a/images/441-4417531_commercial-properties-west-akron-and-fairlawn-ohio-square.png b/images/441-4417531_commercial-properties-west-akron-and-fairlawn-ohio-square.png
diff --git a/images/713WNlUPYML._AC_SL1000_.jpg b/images/713WNlUPYML._AC_SL1000_.jpg
diff --git a/images/backgr.png b/images/backgr.png
diff --git a/images/background-2.png b/images/background-2.png