diff --git a/css/main.css b/css/main.css
index aa561706..cad720e3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,145 @@
/* Add your CSS here */
/* Dont' forget to link this file to your HTML in the */
+/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+
+
+
+body {
+ font-family: 'Roboto', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ height: 125vh;
+ background-size: cover;
+ font-family: sans-serif;
+ margin-top: 60px;
+ /* padding: 30px; */
+}
+
+/**
+ * Add your custom styles below
+ *
+ * Remember:
+ * - Be organised, use comments and separate your styles into meaningful chunks
+ * for example: General styles, Navigation styles, Hero styles, Footer etc.
+ *
+ * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
+ */
+
+
+
+/* Add your CSS code here */
+
+
+header {
+ background-color: white;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ box-shadow: 0 0 25px 0 black;
+}
+
+header * {
+ display: inline;
+}
+
+header ul {
+ margin: 20px;
+ right: 0;
+}
+
+header li {
+ margin: 20px;
+ right: 0;
+
+}
+
+header li a {
+ color: black;
+ text-decoration: none;
+ right: 0;
+
+}
+
+.hero {
+ /* Sizing */
+ width: 100vw;
+ height: 100vh;
+
+ /* Flexbox stuff */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ /* Text styles */
+ text-align: center;
+ color: white;
+ /* ADD THIS LINE */
+
+ /* Background styles */
+ background-image: url('/../img/Cactus hero.avif');
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+.hero img {
+ height: 60px;
+ /* margin-left: 40px; */
+ width: 200px;
+ padding: 1em;
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right: auto;
+
+}
+
+.hero h1 {
+ /* Text styles */
+ font-size: 4em;
+
+ /* Margins */
+ margin-top: 0;
+ margin-bottom: 0.5em;
+}
+
+.hero .btn {
+ /* Positioning and sizing */
+ display: block;
+ width: 150px;
+ background-color: rgba(246, 130, 21, 0.969);
+
+ /* Padding and margins */
+ padding: 1em;
+ margin-top: 50px;
+ margin-left: auto;
+ margin-right: auto;
+
+ /* Text styles */
+ color: white;
+ /* CHANGE THIS LINE */
+ text-decoration: none;
+ font-size: 1.5em;
+
+ /* Border styles */
+ border: 0px solid white;
+ /* CHANGE THIS LINE */
+ border-radius: 0px;
+}
+
+
+/* Apply some styles to the footer element */
+footer {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ padding: 10px;
+ border-style: none;
+ background-color: rgb(150, 218, 238);
+ color: rgb(13, 12, 12);
+ text-align: center;
+}
diff --git a/img/Cactus hero.avif b/img/Cactus hero.avif
new file mode 100644
index 00000000..337e92ce
Binary files /dev/null and b/img/Cactus hero.avif differ
diff --git a/img/Cactus logo.jpeg b/img/Cactus logo.jpeg
new file mode 100644
index 00000000..2919b2c1
Binary files /dev/null and b/img/Cactus logo.jpeg differ
diff --git a/img/FFCacti.webp b/img/FFCacti.webp
new file mode 100644
index 00000000..01504664
Binary files /dev/null and b/img/FFCacti.webp differ
diff --git a/img/FFcacti2.webp b/img/FFcacti2.webp
new file mode 100644
index 00000000..57e7e677
Binary files /dev/null and b/img/FFcacti2.webp differ
diff --git a/img/ffscucule .webp b/img/ffscucule .webp
new file mode 100644
index 00000000..58e0101e
Binary files /dev/null and b/img/ffscucule .webp differ
diff --git a/index.html b/index.html
index cd704c69..70a070a8 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,47 @@
+ Cactus shop
+
+
+
+
Responsive grid project
+
+
+
+
+
+
+
+
PRICKLES & CO
+
BRING NATURE INDOORS,
+
+
shop Now
+
