diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index aa561706..b1ea80d3 100644 --- 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 */ +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 new file mode 100644 index 00000000..7ab8d763 Binary files /dev/null and b/images/441-4417531_commercial-properties-west-akron-and-fairlawn-ohio-square.png differ diff --git a/images/713WNlUPYML._AC_SL1000_.jpg b/images/713WNlUPYML._AC_SL1000_.jpg new file mode 100644 index 00000000..2723bd5a Binary files /dev/null and b/images/713WNlUPYML._AC_SL1000_.jpg differ diff --git a/images/backgr.png b/images/backgr.png new file mode 100644 index 00000000..243f8082 Binary files /dev/null and b/images/backgr.png differ diff --git a/images/background-2.png b/images/background-2.png new file mode 100644 index 00000000..e001d776 Binary files /dev/null and b/images/background-2.png differ diff --git a/images/background-picture.html b/images/background-picture.html new file mode 100644 index 00000000..46edda6d --- /dev/null +++ b/images/background-picture.html @@ -0,0 +1,317 @@ + + + + + + + + Wix Website Editor + + + + + + + + + + + + + + + + + +
Site
Settings
Dev Mode
Hire a Designer
Help
Upgrade
Home
  • Add
  • Menus & Pages
  • Site Design
  • Add Apps
  • Media
  • Start Blogging
  • My Store
  • Ascend Business Tools
Layers
Column 1
Strip Background
Color
Image
Video
Selected Backgrounds
  • None
x: 0, y: 902W: 1673, H: 665
DragStretch
  • Manage Columns
  • Change Strip Background
About
Contact
Rich Text Editor, editor1
Rich Text Editor, editor2
+ + + + + + + + + + + + +
\ No newline at end of file diff --git a/images/cac1.png b/images/cac1.png new file mode 100644 index 00000000..fbbfec83 Binary files /dev/null and b/images/cac1.png differ diff --git a/images/cac2.png b/images/cac2.png new file mode 100644 index 00000000..7bf92ae6 Binary files /dev/null and b/images/cac2.png differ diff --git a/images/cac3.png b/images/cac3.png new file mode 100644 index 00000000..d8750cea Binary files /dev/null and b/images/cac3.png differ diff --git a/images/cac4.png b/images/cac4.png new file mode 100644 index 00000000..72929f6e Binary files /dev/null and b/images/cac4.png differ diff --git a/images/cac5.png b/images/cac5.png new file mode 100644 index 00000000..a5bd57df Binary files /dev/null and b/images/cac5.png differ diff --git a/images/cac6.png b/images/cac6.png new file mode 100644 index 00000000..8bacb4dc Binary files /dev/null and b/images/cac6.png differ diff --git a/images/cactus.png b/images/cactus.png new file mode 100644 index 00000000..8fb24946 Binary files /dev/null and b/images/cactus.png differ diff --git a/images/cactus2.jpg b/images/cactus2.jpg new file mode 100644 index 00000000..eed58e8e Binary files /dev/null and b/images/cactus2.jpg differ diff --git a/images/flower1.html b/images/flower1.html new file mode 100644 index 00000000..44012f08 --- /dev/null +++ b/images/flower1.html @@ -0,0 +1,317 @@ + + + + + + + + Wix Website Editor + + + + + + + + + + + + + + + + + +
Site
Settings
Dev Mode
Hire a Designer
Help
Upgrade
Home
  • Add
  • Menus & Pages
  • Site Design
  • Add Apps
  • Media
  • Start Blogging
  • My Store
  • Ascend Business Tools
Layers
Column 1
Strip Background
Color
Image
Video
Selected Backgrounds
  • None
x: 0, y: 902W: 1673, H: 665
DragStretch
  • Manage Columns
  • Change Strip Background
About
Contact
Rich Text Editor, editor1
Rich Text Editor, editor2
+ + + + + + + + + + + + +
\ No newline at end of file diff --git a/images/leaf.png b/images/leaf.png new file mode 100644 index 00000000..e06d5c41 Binary files /dev/null and b/images/leaf.png differ diff --git a/images/plant1.png b/images/plant1.png new file mode 100644 index 00000000..67b7f385 Binary files /dev/null and b/images/plant1.png differ diff --git a/images/plant2.png b/images/plant2.png new file mode 100644 index 00000000..485d25ea Binary files /dev/null and b/images/plant2.png differ diff --git a/images/plant3.png b/images/plant3.png new file mode 100644 index 00000000..055eb04f Binary files /dev/null and b/images/plant3.png differ diff --git a/images/plants-girl.png b/images/plants-girl.png new file mode 100644 index 00000000..33fc2cb4 Binary files /dev/null and b/images/plants-girl.png differ diff --git a/images/plants-window.png b/images/plants-window.png new file mode 100644 index 00000000..b3536099 Binary files /dev/null and b/images/plants-window.png differ diff --git a/images/png-clipart-computer-icons-magnifier-symbol-magnifying-glass-magnifying-miscellaneous-logo.png b/images/png-clipart-computer-icons-magnifier-symbol-magnifying-glass-magnifying-miscellaneous-logo.png new file mode 100644 index 00000000..456c0833 Binary files /dev/null and b/images/png-clipart-computer-icons-magnifier-symbol-magnifying-glass-magnifying-miscellaneous-logo.png differ diff --git a/images/search-icon-simple-free-illustration-free-vector.jpg b/images/search-icon-simple-free-illustration-free-vector.jpg new file mode 100644 index 00000000..c4a1fd35 Binary files /dev/null and b/images/search-icon-simple-free-illustration-free-vector.jpg differ diff --git a/index.html b/index.html index cd704c69..4bca61e1 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,231 @@ - + + Responsive grid project - + +
+ + +
+
+ +
+ - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- + +
- \ No newline at end of file +
+
+

PRICKLES & CO.

+ +
+ + + +
+ +
+ + + +
+

We Deliver To Your Doorsite

+
+ + + +
+ + +
+ + +
+
+ +

PRICKLES & CO

+

BRING NATURE INDOORS

+ +
+ +
+ +
+

CACTI

+
+ + +
+ +
+

PLANTS

+
+ +
+ +
+ +

SUCCILENTS

+
+ + +
+ +
+ +
+ +
+

ABOUT US

+
+

I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.


+

This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide.

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+

BUY ONLINE

+

NOW & GET

+

10% OFF !

+ +
+ +
+ + +
+
+
+ +
+ + +

FOR SPECIAL REQUESTS & ORDERS

+
+
+
+
+ +
+ +
+
+ +
+
+ + + +
+
+ +
+ +
+
+ +
+ + + + + +
+ +
+ +
+ +
+ + + +
+ + + + \ No newline at end of file diff --git a/svg/basket.svg b/svg/basket.svg new file mode 100644 index 00000000..137b9390 --- /dev/null +++ b/svg/basket.svg @@ -0,0 +1 @@ +0 \ No newline at end of file diff --git a/svg/data-bbox.svg b/svg/data-bbox.svg new file mode 100644 index 00000000..087e07ea --- /dev/null +++ b/svg/data-bbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/logo.svg b/svg/logo.svg new file mode 100644 index 00000000..2b2ea548 --- /dev/null +++ b/svg/logo.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/svg/search.svg b/svg/search.svg new file mode 100644 index 00000000..a7fce6e9 --- /dev/null +++ b/svg/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/viewBox.svg b/svg/viewBox.svg new file mode 100644 index 00000000..a7fce6e9 --- /dev/null +++ b/svg/viewBox.svg @@ -0,0 +1 @@ + \ No newline at end of file