Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

NW6/SABELLA-FISSEHA/HTML-CSS Module-project/Week 4 #183

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

NW6/SABELLA-FISSEHA/HTML-CSS Module-project/Week 4 #183

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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
3 changes: 0 additions & 3 deletions MultiPage-Clone/css/main.css
View file
Open in desktop

This file was deleted.

245 changes: 233 additions & 12 deletions MultiPage-Clone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,242 @@
<!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 -->
<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" />
<link rel="stylesheet" href="main.css" />

<title>Responsive grid project</title>
</head>
</head>

<body>
<body>
<header>
<nav class="search-button">
<input type="text" id="search" placeholder="&#xF52A; search..." />
<a href=""
><svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
fill="rgb(210, 88, 44)"
class="bag"
viewBox="0 0 16 16"
>
<path
d="M8 1a2 2 0 0 1 2 2v2H6V3a2 2 0 0 1 2-2zm3 4V3a3 3 0 1 0-6 0v2H3.36a1.5 1.5 0 0 0-1.483 1.277L.85 13.13A2.5 2.5 0 0 0 3.322 16h9.355a2.5 2.5 0 0 0 2.473-2.87l-1.028-6.853A1.5 1.5 0 0 0 12.64 5H11zm-1 1v1.5a.5.5 0 0 0 1 0V6h1.639a.5.5 0 0 1 .494.426l1.028 6.851A1.5 1.5 0 0 1 12.678 15H3.322a1.5 1.5 0 0 1-1.483-1.723l1.028-6.851A.5.5 0 0 1 3.36 6H5v1.5a.5.5 0 1 0 1 0V6h4z"
/>
</svg>
</a>
</nav>
<section class="second-header">
<nav class="second-he">
<a href="" class="pricles"> PRICKLES & CO.</a>
<a
><svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="25"
fill="rgb(210, 88, 44)"
class="menu"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/>
</svg>
</a>
<nav class="list-nav">
<a href="#"> shop</a>
<a href="#">about </a>
<a href="#"> FAQ</a>
<a href="#"> Contact</a>
</nav>
</nav>
<section class="banner">
<section class="banner-text">
<p>We deliver to your doorstep</p>
<section class="text-wrapper">
<h2 class="boxb1">Call us</h2>
</section>
</section>
</section>
</section>
</header>
<main>
<section class="imglgoo">
<img
class="pric-img"
src="https://static.wixstatic.com/media/697bc8_ee5e15509a8c468f96ec8b15a13e0daf~mv2_d_2000_1809_s_2.jpg/v1/fill/w_480,h_713,al_b,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_ee5e15509a8c468f96ec8b15a13e0daf~mv2_d_2000_1809_s_2.jpg"
/>
</section>
<section class="logo">
<h1 class="logop">
<span>ESTB</span>
<svg
class="flower"
preserveAspectRatio="xMidYMid meet"
data-bbox="10.326 50.3 180.129 101.208"
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox="10.326 50.3 180.129 101.208"
fill="white"
role="presentation"
aria-hidden="true"
>
<g>
<path
d="M105.6 52.7c-1.8-1.5-3.5-2.4-5.1-2.4-1.6.1-3.3 1-5.1 2.4-11.2 9.2-16.3 21-17 35.2-.4 7.5-1.3 14.8 10.2 12.6 1.3-.2 3.1-.2 4.3.6 1 .6 1.9 1.4 2.6 2.4 3 4.3 2.2 9.1 1 13.9-1.8 7-2.5 14.2-1.6 21.3.6 4.9-.6 13.1 5.6 12.8 6.3.3 5-7.9 5.6-12.8.9-7.2.2-14.3-1.6-21.3-1.2-4.8-2.1-9.7 1-13.9.7-.9 1.6-1.7 2.6-2.4 1.2-.8 3-.8 4.3-.6 11.5 2.1 10.6-5.2 10.2-12.6-.7-14.2-5.8-26-17-35.2z"
></path>
<path
d="M57.6 128.4c1.5-2.3 3.7-6.5 3.6-11.2-.2-5.8-4-10.6-5.4-12.2-.3-.3-.7-.3-1 0-1.2 1.5-4.4 6.1-4.2 11.8.1 3.7 3 8.4 4.8 10.8-.2 2-.2 4 0 5.5v.2c-4.4-2.4-8.9-5.5-12.9-9.7-.1-.2-.2-.3-.4-.4-1.5-1.6-2.9-3.2-4.1-5.1-.3-.4-.5-.8-.8-1.2-.8-2.6-.5-5.5.9-7.9 2.7-.7 6.4-2.2 9.1-5.2 4-4.3 4.6-10.5 4.7-12.5 0-.4-.3-.6-.7-.6-2 .3-8 1.5-12 5.8-2.6 2.7-3.4 8.2-3.2 11.6-.7 1.3-1.2 2.8-1.4 4.2-2.5-5-4.2-10.6-4.9-16.6.1-3 1.7-5.7 3.9-6.9 2.1-.1 5.5-.6 8.1-2.7 3.2-2.6 4.2-6.9 4.5-8.7.1-.4-.2-.8-.7-.8-1.7 0-6.2.1-9.3 2.7-2.8 2.3-3.9 5.9-4.3 8-1 .7-1.9 1.6-2.5 2.6-.2-5.6.4-11.7 1.6-18.1 1.8-.5 5.6-2.1 8.1-5 3.2-3.6 3.8-8.4 3.8-10.3 0-.4-.4-.7-.8-.7-1.9.4-5.9 1.8-9.4 5.2-2.6 2.6-3.4 6.4-3.6 8.5-2 9.5-2.6 18.2-1.6 26.1v.2c-1.1-1.4-2.3-2.7-3.4-3.8-.1-2.4-.7-6.2-3.1-9.2-3.1-3.9-8.2-5.1-9.9-5.4-.3-.1-.6.2-.7.5-.1 1.7 0 6.6 3 10.4 1.8 2.3 5.7 3.9 8.3 4.6 2.5 1.7 6 6.4 6.9 9.1 1.3 5.7 3.5 10.9 6.6 15.6v.1c.3.5.6 1 .9 1.4l.9 1.2c-1.3-.4-2.7-.8-4.1-.8-.1-.2-.1-.4-.3-.6-1.9-2.3-5.4-5.6-9.1-6.2-5.6-1-10.9 1.6-12.8 2.7-.4.2-.5.8-.2 1.2 1.5 1.7 5.6 5.8 11.2 6.8 3.8.6 7.5-.4 10.1-1.4.1-.1.2-.2.3-.2 3.2-.3 7.5 2 8.4 2.7 5.5 5.9 11.9 9.8 17.6 12.4-.6.4-1.6.8-3.1 1.1-5-3.4-12.7-4-16.4-3.2-7.8 1.8-12.9 7.4-14.5 9.6-.3.4-.2.9.3 1.1 2.4 1.2 10.2 4.6 18 2.8 5.8-1.4 10.3-5.2 12.9-8.1v-.1c1.2-.2 2.3-.5 3.2-.9.9-.4 1.5-.9 1.9-1.3 7.5 3.1 13.4 4 13.9 4l.3-2.2c-.1 0-7.7-1.1-16.5-5.4-.2 0-.8-2.1-.5-5.9z"
></path>
<path
d="M190.1 115.9c-1.9-1.1-7.3-3.7-12.8-2.7-3.7.7-7.2 3.9-9.1 6.2l-.3.6c-1.4 0-2.8.3-4.1.8l.9-1.2c.3-.5.6-1 .9-1.4v-.1c3-4.7 5.2-9.9 6.6-15.6.9-2.6 4.4-7.4 6.9-9.1 2.5-.7 6.4-2.3 8.3-4.6 3-3.8 3.1-8.7 3-10.4 0-.3-.3-.6-.7-.5-1.7.3-6.8 1.5-9.9 5.4-2.4 3-3 6.8-3.1 9.2-1.2 1-2.4 2.3-3.4 3.8v-.2c.9-7.9.4-16.6-1.6-26.1-.2-2.1-1-5.9-3.6-8.5-3.5-3.4-7.5-4.9-9.4-5.2-.4-.1-.8.2-.8.7 0 1.9.6 6.7 3.8 10.3 2.6 2.9 6.3 4.4 8.1 5 1.3 6.4 1.8 12.4 1.6 18.1-.7-1.1-1.5-2-2.5-2.6-.4-2-1.5-5.6-4.3-8-3.2-2.6-7.6-2.8-9.3-2.7-.4 0-.7.4-.7.8.3 1.7 1.3 6 4.5 8.7 2.6 2.1 6 2.6 8.1 2.7 2.2 1.2 3.7 3.9 3.9 6.9-.7 6.1-2.4 11.6-4.9 16.6-.2-1.5-.7-2.9-1.4-4.2.2-3.4-.6-8.9-3.2-11.6-4-4.2-10-5.5-12-5.8-.4-.1-.7.2-.7.6.1 2 .7 8.2 4.7 12.5 2.7 3 6.4 4.4 9.1 5.2 1.4 2.4 1.7 5.2.9 7.9-.3.4-.5.8-.8 1.2-1.3 1.8-2.7 3.5-4.1 5.1l-.4.4c-4 4.2-8.5 7.4-12.9 9.7v-.2c.2-1.6.2-3.5 0-5.5 1.8-2.4 4.7-7 4.8-10.8.2-5.7-3-10.3-4.2-11.8-.2-.3-.7-.3-1 0-1.4 1.6-5.2 6.3-5.4 12.2-.2 4.7 2.1 8.9 3.6 11.2.3 3.7-.2 5.8-.5 6.4-8.9 4.3-16.5 5.4-16.6 5.4l.3 2.2c.5-.1 6.4-.9 13.9-4 .4.4.9.9 1.9 1.3.9.4 2 .7 3.2.9v.1c2.6 2.8 7.1 6.7 12.9 8.1 7.8 1.8 15.6-1.6 18-2.8.4-.2.5-.7.3-1.1-1.6-2.2-6.7-7.8-14.5-9.6-3.7-.8-11.3-.2-16.4 3.2-1.5-.3-2.5-.7-3.1-1.1 5.7-2.6 12.1-6.6 17.6-12.4.9-.8 5.1-3 8.4-2.7.1.1.2.2.3.2 2.6 1.1 6.3 2.1 10.1 1.4 5.6-.9 9.8-5.1 11.2-6.8.4-.9.3-1.4-.1-1.7z"
></path>
</g>
</svg>
<span>2035</span>
</h1>
<h1>PRICLES & CO</h1>
<p>BRING NATURE INDOORS</p>
<button class="button">Shop Now</button>
</section>

<!-- Add your markup here -->
<section class="bot"></section>
<section class="fimg">
<section id="fs" class="img-main">
<p class="cacti">CA<span>C</span>TI</p>
<button class="button">Shop Collection</button>
<img
src="https://static.wixstatic.com/media/697bc8_8bf7131cfd3547e9bd54d9f4f57f3e74~mv2_d_1920_1920_s_2.jpg/v1/fill/w_480,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_8bf7131cfd3547e9bd54d9f4f57f3e74~mv2_d_1920_1920_s_2.jpg"
/>
</section>
<section class="img-main">
<p class="cacti">PLA<span>N</span>TS</p>
<button class="button">Shop Collection</button>
<img
src="https://static.wixstatic.com/media/697bc8_8267510d9e19448297fc161a522881f1~mv2_d_1920_1920_s_2.jpg/v1/fill/w_480,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_8267510d9e19448297fc161a522881f1~mv2_d_1920_1920_s_2.jpg"
/>
</section>
<section id="fl" class="img-main">
<p class="cacti">SUCC<span>U</span>LENTS</p>
<button class="button">Shop Collection</button>
<img
src="https://static.wixstatic.com/media/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg/v1/fill/w_480,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_b067d0a4b500479b8a3930782976779e~mv2_d_1920_1920_s_2.jpg"
/>
</section>
</section>
<section class="bzunav">
<nav class="img-main">
<p class="cacti">ABO<span>U</span>T US</p>
<p class="longp">
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.
</p>
<p class="longp">
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.
</p>
</nav>

<img
class="beauty-img"
id="bi1"
src="https://static.wixstatic.com/media/697bc8_a83b11aa652d4394aadc4aca1f80d567~mv2_d_2000_1391_s_2.jpg/v1/fill/w_480,h_335,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_a83b11aa652d4394aadc4aca1f80d567~mv2_d_2000_1391_s_2.jpg"
/>

<!-- 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>
<img
id="bi1"
class="beauty-img"
src="https://static.wixstatic.com/media/697bc8_84ed4273c730421d954cfe88af4d7c1c~mv2_d_2000_1333_s_2.jpg/v1/fill/w_480,h_335,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_84ed4273c730421d954cfe88af4d7c1c~mv2_d_2000_1333_s_2.jpg"
/>

</html>
<img
class="beauty-img"
src="https://static.wixstatic.com/media/697bc8_3aa8eb7ac760486bb63b30f98dc220c8~mv2_d_2000_1333_s_2.jpg/v1/fill/w_480,h_335,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_3aa8eb7ac760486bb63b30f98dc220c8~mv2_d_2000_1333_s_2.jpg"
/>

<nav class="bbp">
<p class="bp">BUY ONLINE NOW & GET 10% OFF!</p>
<button class="bb">Shop Now</button>
</nav>
</section>
<section class="form">
<p>FOR SPECIAL REQUESTS & ORDERS</p>
<label for="fname">First Name*</label>
<input type="text" id="fname" required />
<label for="lname">Last Name*</label>
<input type="text" id="lname" required />
<label for="email">Email*</label>
<input type="email" id="email" required />
<label for="phone">Phone*</label>
<input type="tel" id="phone" required />
<label for="message">Message*</label>
<textarea for="message"></textarea>
<button>Send</button>
</section>

<section class="last-section">
<img
src="https://static.wixstatic.com/media/697bc8_4ea3867c24544ad6b0d299b5d93a7fd5~mv2_d_3000_2150_s_2.jpg/v1/fill/w_480,h_291,al_t,q_80,usm_0.66_1.00_0.01,enc_auto/697bc8_4ea3867c24544ad6b0d299b5d93a7fd5~mv2_d_3000_2150_s_2.jpg"
/>
<section class="ourstore">
<h2>OUR STORE</h2>
<p>
Address: 500 Terry Francine Street San Francisco,<br />
CA 94158 Phone: 123-456-7890<br />
Email: [email protected]
</p>
<h2>OPENING HOURS</h2>
<p>
Mon - Fri: 7am - 10pm <br />​​Saturday: 8am - 10pm<br />
​Sunday: 8am - 11pm
</p>
<h2>HELP</h2>
<p>
Shipping & Returns<br />
Privacy Policy<br />
FAQ
</p>
<nav>
<h2>SUBSCRIBE</h2>
<label for="email" class="etem"> Enter your email here *</label>
<input type="email" required id="emailsub" />
<button id="subbut">Subscribe Now</button>
</nav>

<nav id="footer">
<a
><img
src="https://static.wixstatic.com/media/23fd2a2be53141ed810f4d3dcdcd01fa.png/v1/fill/w_38,h_38,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/23fd2a2be53141ed810f4d3dcdcd01fa.png"
/></a>
<a>
<img
src="https://static.wixstatic.com/media/9c486556465843c5850fabfd68dfae49.png/v1/fill/w_38,h_38,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/9c486556465843c5850fabfd68dfae49.png"
/></a>
<a
><img
src="https://static.wixstatic.com/media/81af6121f84c41a5b4391d7d37fce12a.png/v1/fill/w_38,h_38,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/81af6121f84c41a5b4391d7d37fce12a.png"
/></a>
</nav>
</section>
</section>
</main>
<footer>
<p>
© 2035 by Prickles & Co. Powered and secured by<a
href="https://www.wix.com/?utm_campaign=vir_created_with"
>
Wix</a
>
</p>
</footer>
</body>
</html>
Loading