Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Glasgow_6 | Joseph_Mwanza | HTML_CSS_Coursework | Week_4 #299

Open
Joemwa wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Glasgow_6 | Joseph_Mwanza | HTML_CSS_Coursework | Week_4 #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 126 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Add a link to your custom CSS here -->

<title>Responsive grid project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Prickles and Company</title>
</head>

<body>
<div>
<div id="search_bar" class="search-bar">
<input id="search" class="search" placeholder="search">
</div>

<div>
<h1>Prickles & Co.</h1>
<a href="URL">Shop</a>
<a href="URL">About</a>
<a href="URL">FAQ</a>
<a href="URL">Contact</a>
<h2>We Deliver to Your Doorstep</h2>
<h2>Call Us Now! 0141 000 000</h2>
</div>

<div>
<h6>ESTB</h6>
<img src="">
<h6>2035</h6>
<h2>PRICKLES & CO</h2>
<h4>BRING NATURE INDOORS</h4>
<button>Shop Now</button>
</div>

<div id="plant_pic1" class="three-div-container">
<div class="plant-pic">
<h4>CACTI</h4>
<img src="https://static.wixstatic.com/media/697bc8_8bf7131cfd3547e9bd54d9f4f57f3e74~mv2_d_1920_1920_s_2.jpg/v1/fill/w_260,h_565,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_8bf7131cfd3547e9bd54d9f4f57f3e74~mv2_d_1920_1920_s_2.jpg">
<button>Shop Collection</button>
</div>

<div id="plant_pic2" class="plant-pic">
<h4>PLANTS</h4>
<img src="https://static.wixstatic.com/media/697bc8_8267510d9e19448297fc161a522881f1~mv2_d_1920_1920_s_2.jpg/v1/fill/w_260,h_565,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_8267510d9e19448297fc161a522881f1~mv2_d_1920_1920_s_2.jpg">
<button>Shop Collection</button>
</div>

<div id="plant_pic3" class="plant-pic">
<h4>SUCCULENTS</h4>
<img src="https://static.wixstatic.com/media/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg/v1/fill/w_368,h_565,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg">
<button>Shop Collection</button>
</div>
</div>

<div class="four_grid_container">
<div>
<h4>ABOUT US</h4>
<p>text</p>
</div>

<div>
<img src="https://static.wixstatic.com/media/697bc8_a83b11aa652d4394aadc4aca1f80d567~mv2_d_2000_1391_s_2.jpg/v1/fill/w_240,h_456,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_a83b11aa652d4394aadc4aca1f80d567~mv2_d_2000_1391_s_2.jpg">
<img src="https://static.wixstatic.com/media/697bc8_84ed4273c730421d954cfe88af4d7c1c~mv2_d_2000_1333_s_2.jpg/v1/fill/w_250,h_456,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_84ed4273c730421d954cfe88af4d7c1c~mv2_d_2000_1333_s_2.jpg">
</div>

<div>
<img src="https://static.wixstatic.com/media/697bc8_3aa8eb7ac760486bb63b30f98dc220c8~mv2_d_2000_1333_s_2.jpg/v1/fill/w_490,h_701,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_3aa8eb7ac760486bb63b30f98dc220c8~mv2_d_2000_1333_s_2.jpg">
</div>

<div>
<h2>BUY ONLINE NOW AND GET 10% OFF!</h2>
<button>Shop Now</button>
</div>
</div>

<div class="form_container">
<label for="first_name">First Name*</label>
<input type="text" id="first_name" name="first_name">

<label for="last_name">Last Name*</label>
<input type="text" id="last_name" name="last_name">

<label for="email">Email*</label>
<input type="text" id="email" name="email">

<label for="phone">Phone*</label>
<input type="text" id="phone" name="phone">

<label for="message">Message*</label>
<input type="text" id="message" name="message">
<button>Send</button>
</div>


<!-- Add your markup here -->
<div class="footer-container">
<div>
<div>
<h4>OUR STORE</h4>
<p>Address: 500 Terry Francine</p>
<p>Street San Francisco, CA 94158</p>
<p>Phone: 123-456-7890</p>
<p>Email: info@mysite.com</p>
</div>
<div>
<h4>OPENING HOURS</h4>
<p>Mon - Fri: 7am - 10pm</p>
<p>Saturday: 8am - 10pm</p>
<p>Sunday: 8am - 11pm</p>
</div>
<div>
<h4>HELP</h4>
<p>Shipping & Returns</p>
<p>Privacy Policy</p>
<p>FAQ</p>
</div>
</div>
<div>
<h4>SUBSCRIBE</h4>
<label for="enter_email">Enter your email here*</label>
<input type="text" id="enter_email" name="enter_email">
<button>Subscribe Now</button>
<img src="">
<img src="">
<img src="">
</div>
<div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8955.136127102674!2d-4.154301623575307!3d55.866413370021206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4888422763b27a97%3A0x45bc28b5668fca41!2sQueenslie%2C%20Glasgow%20G33%204AG!5e0!3m2!1sen!2suk!4v1692377986885!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

<p>copywrite info</p>
</div>

<!-- Please leave this in to credit the creators of this design -->
<p>This website design was created by Wix.com, and is used here for strictly educational purposes.</p>
</body>
</div>

</div>
</body>
</html>
Empty file added script.js
View file
Open in desktop
Empty file.
13 changes: 13 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.three-div-container {
display: flex;
}

.plant-pic {
flex: 1;
}

#plant_3 {
background-image: url("https://static.wixstatic.com/media/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg/v1/fill/w_368,h_565,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg");
background-size: cover;
background-repeat: no-repeat;
}