Technigo · carina90kaarli-png · Sep 19, 2025 · Sep 19, 2025 · Sep 19, 2025 · Sep 19, 2025
diff --git a/Gold-Mummy-Mask-of-King-Tutankhamun-1.jpg b/Gold-Mummy-Mask-of-King-Tutankhamun-1.jpg
diff --git a/README (1).md b/README (1).md
@@ -0,0 +1 @@
+# js-project-business-site
diff --git a/backgrounds/back1.jpg b/backgrounds/back1.jpg
diff --git a/backgrounds/hero1.jpg b/backgrounds/hero1.jpg
diff --git a/carved.css b/carved.css
@@ -0,0 +1,117 @@
+*{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    background-image: url(backgrounds/back1.jpg);
+}
+
+header{
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(12, 1fr);
+    background-color: black;
+    color: #18a7a7;
+}
+
+button{
+    grid-column: 12/12;
+    grid-row: 1/1
+
+}
+
+h2{
+    grid-column: 6/7;
+    grid-row: 1/3;
+    padding-bottom: 5px;
+
+
+}
+
+p{
+    grid-column: 6/7;
+    grid-row: 3/4;
+}
+
+a{
+    color:  #18a7a7;
+    text-decoration:  none;
+}
+
+
+.container{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+}
+
+.card{
+     background-color: rgb(135, 219, 219);
+     width: 220px;
+     height: 500px;
+     margin: 50px;
+     border-radius: 90px;
+     box-shadow: 5px 20px 20px;
+
+
+}
+
+.card-image{
+    background-color: yellowgreen;
+    height: 200px;
+    margin-bottom: 15px;
+    background-size: cover;
+}
+
+
+.rab{
+    background-image: url(carved/Malachite.jpg);
+}
+.uni{
+    background-image: url(carved/oceanjasper.jpg);
+}
+
+.bust{
+ background-image: url(carved/rose.jpg);
+}
+
+.skull{
+    background-image: url(carved/QuartzSkul.jpg);
+}
+
+.kya{
+    background-image: url(carved/kyanite.jpg);
+}
+
+.moss{
+    background-image: url(carved/mossagate.jpg);
+}
+
+.phoe{
+    background-image: url(carved/phoenix.jpg);
+}
+
+.tur{
+    background-image: url(carved/turmaline.jpg);
+}
+
+.sel{
+    background-image: url(carved/selenite.jpg);
+}
+
+.card h4{
+   text-align: center;
+}
+
+.card p{
+    padding: 20px;
+}
+
+.card:hover{
+    background-color: white;
+    cursor: pointer;
+    transform: scale(1.1);
+}
diff --git a/carved.html b/carved.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="carved.css">
+</head>
+<body>
+
+
+<header>
+    <h2>Carved Stones</h2>
+    <p> Handcarved stones</p>
+    <button style=" font-size:15px; font-family: cursive; background-color: #93fcfc; border-radius: 5px;">    <!--working on it-->
+       <a href="index.html">Back</a>
+    </button>
+</header> 
+
+  <section class="container">
+
+      <div class="card">
+        <div class="card-image rab"></div>
+         <h4>Malachite rabbit</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse qui rem temporibus praesentium itaque quas fugiat? Saepe voluptatem aliquid eveniet ex, reiciendis quis laudantium corrupti id deleniti eum incidunt neque?</p>
+      </div>
+
+      <div class="card">
+        <div class="card-image uni"></div>
+        <h4>Ocean Jasper uniqorn</h4>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit ab iste maxime soluta dignissimos aliquid minus perspiciatis. Accusantium deserunt eveniet rerum provident harum, doloribus expedita voluptas? Nobis dicta odit sit?</p>
+      </div>
+
+      <div class="card">
+        <div class="card-image bust"></div>
+        <h4>Rose Quartz bust</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati similique maiores eius culpa eaque labore molestias alias magnam libero necessitatibus, error accusamus voluptatem odio provident numquam nemo eveniet voluptates!</p>
+      </div>
+
+       <div class="card">
+        <div class="card-image skull"></div>
+         <h4>Quartz skull</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse qui rem temporibus praesentium itaque quas fugiat? Saepe voluptatem aliquid eveniet ex, reiciendis quis laudantium corrupti id deleniti eum incidunt neque?</p>
+      </div>
+
+      <div class="card">
+        <div class="card-image kya"></div>
+        <h4>Kyanite tower</h4>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit ab iste maxime soluta dignissimos aliquid minus perspiciatis. Accusantium deserunt eveniet rerum provident harum, doloribus expedita voluptas? Nobis dicta odit sit?</p>
+      </div>
+
+      <div class="card">
+        <div class="card-image moss"></div>
+        <h4>Moss aget Tower</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati similique maiores eius culpa eaque labore molestias alias magnam libero necessitatibus, error accusamus voluptatem odio provident numquam nemo eveniet voluptates!</p>
+      </div>
+
+       <div class="card">
+        <div class="card-image phoe"></div>
+        <h4>Phoenix stone Tower</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati similique maiores eius culpa eaque labore molestias alias magnam libero necessitatibus, error accusamus voluptatem odio provident numquam nemo eveniet voluptates!</p>
+      </div>
+
+       <div class="card">
+        <div class="card-image tur"></div>
+        <h4>Black Turmaline Tower</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati similique maiores eius culpa eaque labore molestias alias magnam libero necessitatibus, error accusamus voluptatem odio provident numquam nemo eveniet voluptates!</p>
+      </div>
+
+       <div class="card">
+        <div class="card-image sel"></div>
+        <h4>Selenite Tower</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam obcaecati similique maiores eius culpa eaque labore molestias alias magnam libero necessitatibus, error accusamus voluptatem odio provident numquam nemo eveniet voluptates!</p>
+      </div>
+
+
+   </section> 
+
+
+</body>
+</html>
diff --git a/carved/Malachite.jpg b/carved/Malachite.jpg
diff --git a/carved/QuartzSkul.jpg b/carved/QuartzSkul.jpg
diff --git a/carved/kyanite.jpg b/carved/kyanite.jpg
diff --git a/carved/mossagate.jpg b/carved/mossagate.jpg
diff --git a/carved/oceanjasper.jpg b/carved/oceanjasper.jpg
diff --git a/carved/phoenix.jpg b/carved/phoenix.jpg
diff --git a/carved/rose.jpg b/carved/rose.jpg
diff --git a/carved/selenite.jpg b/carved/selenite.jpg
diff --git a/carved/turmaline.jpg b/carved/turmaline.jpg
diff --git a/cave.jpg b/cave.jpg
diff --git a/crystal-oscillator.jpg b/crystal-oscillator.jpg
diff --git a/form.css b/form.css
@@ -0,0 +1,54 @@
+label{ 
+    display: block;
+    padding: 5px;
+
+}
+
+body{
+    background-color: rgb(236, 255, 234);
+}
+
+
+
+.hero{
+    background-image: url(backgrounds/back1.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    /* gives the image boxshadow inside the immage*/
+    box-shadow: 40px 30px 30px rgb(236, 255, 234) inset;
+
+    min-block-size: 30vh;
+
+}
+
+a{
+    color:  #18a7a7;
+    text-decoration:  none;
+}
+
+.container{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+   justify-content: center;
+
+
+}
+
+.card{
+     display: flex;
+     background-color: rgb(135, 219, 219);
+     width: 340px;
+     height: 450px;
+     margin: 50px;
+     border-radius: 10px;
+     box-shadow: 5px 20px 20px;
+     flex-direction: column;
+     align-items: center;
+     justify-content: space-around;
+
+
+
+
+}
+
diff --git a/form.html b/form.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="form.css">
+
+
+</head>
+<body>
+    <button style=" font-size:15px; font-family: cursive; background-color: #93fcfc; border-radius: 5px;">    <!--working on it-->
+       <a href="index.html">Back</a>
+    </button>
+
+    <section class="hero overlay">
+        <h2> Sign up for our mailing list!</h2>
+        <p> Get news, updates on our stock and discounts.</p>
+
+</section>
+
+
+
+    <form action="http://httpbin.org/anything" method="POST">
+<div class="container">
+    <div class="card">
+        <h3>Submit form</h3>
+    <!-- add flex-->
+     <label>
+	    First name
+        <input type="text" name="name" placeholder="Anna" required>
+    </label>
+
+    <label>
+	    Last name
+        <input type="text" name="name" placeholder="Andersson" required>
+    </label>
+
+    <label>
+	    E-mail
+        <input type="email" name="e-mail" placeholder="[email protected]" required>
+    </label>
+
+    <p>Do you consent?</p>
+    <input type="checkbox" name="Yes" required> Yes
+
+    <button type="submit"> Submit</button>
+    </div>
+</div>
+
+</form>
+
+</body>
+</html>