From f38c6d510e9b30917ef5c2c46cf42833405719a6 Mon Sep 17 00:00:00 2001 From: anuthapaliy <113211321+anuthapaliy@users.noreply.github.com> Date: Fri, 5 May 2023 13:42:32 +0100 Subject: [PATCH] html n css done but need to recheck --- css/css/fullscreen.css | 182 +++++++++++++++++++++ css/main.css | 353 ++++++++++++++++++++++++++++++++++++++++- index.html | 179 ++++++++++++++++++++- 3 files changed, 709 insertions(+), 5 deletions(-) create mode 100644 css/css/fullscreen.css diff --git a/css/css/fullscreen.css b/css/css/fullscreen.css new file mode 100644 index 00000000..6802650d --- /dev/null +++ b/css/css/fullscreen.css @@ -0,0 +1,182 @@ +@media screen and (min-width: 480px){ + + /* header */ + + header { + position: sticky; + top: 0; + } + .searchGlass { + font-size: 16px; + } + #navbar { + display: grid; + grid-template-columns: 0.5fr 2fr 1fr; + align-items: end; + } + #p1 { + margin: 0; + align-self: center; + padding-bottom: 5px; + } + #p2 { + margin-right: 5px; + text-align: end; + } + +/* sections styling */ +#frontPage { + width: 100%; + background-image: url(/images/images/backgroundBIG.webp); + background-size: cover; + background-position: center center; + background-attachment: fixed; +} +#firstDiv { + display: flex; + justify-content: center; +} + +h1 { + font-size: 6.5em; + letter-spacing: 0.12em; +} + +#articles { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +article { + background-size: 100% auto; + width: 100%; + height: 565px; + background-repeat: no-repeat; + background-position: cover; +} + +#description { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-template-rows: 465px 670px; + row-gap: 0; + column-gap: 0; +} +.fullImg { + width: 50vw; + height: 465px; +} +#lastphoto { + height:670px; + +} + +#greenarea { + grid-column: 2 / -1; + width: 100%; + height: 670px; +} + +#buyOnline { +font-size: 97px; +padding: 50px 50px 0px 50px; +} + #aboutUs { + padding: 50px; + margin: 0; + } + #formbackground { + display: none; + } + #form { + background-image: url(/images/images/formbackground.webp); + background-size: cover; + background-position: center center; + background-attachment: fixed; + display: flex; + align-items: center; + justify-content: center; + } + form { + width: 620px; + margin-bottom: 60px; + background: rgba(255, 255, 255, 0.7); + padding: 20px; + } + .firstLineForm, + .firstLineForm2 { + display: inline-block; + width: 48%; + margin-bottom: 10px; + } + .firstLineForm { + margin-right: 17px; + } + + #contact-details { + display: grid; + grid-auto-flow: row; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(5, auto); + } + + #subscribe { + grid-column: 2 / 3; + } + + #google-maps { + grid-column: 1 / -1; + /* display: none; */ + } + iframe { + width: 100%; + } + +#chatOption :first-child { + +} +} + +/* navigation menu */ +ul { + display: flex; + flex-direction: row; + justify-content: start; + align-items: end; + list-style: none; +} + +li { + margin-right: 30px; + font-family: 'outfit', sans-serif; +} +#logotree { + width: 100px; + padding-bottom: 5px; + margin-top: 5em; +} + +@media screen and (max-width: 480px){ + .navmenu { + display: none; + } +} + + + + + + + + + + + + + + + + + + diff --git a/css/main.css b/css/main.css index aa561706..4785071b 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,354 @@ /* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ +/* Dont forget to link this file to your HTML in the */ + +/* ### Fonts +**Headings:** Fjalla One - Regular 400 +https://fonts.google.com/specimen/Fjalla+One +**Subheadings:** Outfit - Extra-light 200 +https://fonts.google.com/specimen/Outfit +**Body:** Outfit - Extra-light 200 +https://fonts.google.com/specimen/Outfit */ + +/* font-family: 'Fjalla One', +sans-serif; +font-family: 'Outfit', +sans-serif; + +/*Colours */ + +:root { + --redBrown: #A05941 + --greenBlack: #133032 + --lightGrey: #EDEDEE + --White: #FFF + --transparentWhite: rgba(0,0,0,0.75) + } + + body { + background-color: #EDEDEE; + } */ + + #searchBar { + background-color: #FFF; + padding: 20px; + display: grid; + grid-template-columns:3fr 1fr; + } + + .searchGlass { + color: #A05941; + background-color: #FFF; + font-family: 'Outfit', sans-serif; + text-align: left; + padding-left: 10px; + } + #bagLogo { + display: flex; + justify-content: right; + } + #magnetGlass { + display: flex; + } + .searchImg { + width: 30px; + height: 30px; + } + + #navbar { + color: #A05941; + padding-left: 25px; + background-color: #EDEDEE; + } + + #p1 { + font-family:'Outfit', + sans-serif; + font-size: 20px; + margin-bottom: 5px; + + } + #p2 { + font-family: 'Outfit', + sans-serif; + font-weight: 800; + letter-spacing: 0.1em; + margin-bottom: 10px; + }; + + /* buttons styling */ + .shopCollection { + background-color: #A05941; + color: #EDEDEE; + width: 140px; + min-height: 40px; + border: none; + font-family: 'Outfit', sans-serif; + font-weight: 400; + } + /* front page styling */ + #frontPage { + background-image: url(/images/images/main\ pic.webp); + background-size: 200px, 200px; + background-position: cover; + margin: 5px 15px 15px 15px; + padding: 20px 10px 50px 10px; + color: #FFF; + font-family: 'Outfit', sans-serif; + letter-spacing: 0.5em; + font-weight: 600; + display: flex; + flex-direction:column; + align-items: center; + text-align: center; + + }; + + #firstDiv { + display: grid; + grid-template-columns: 75px 75px 75px; + column-gap: 20px; + width: 100%; + box-sizing: border-box; + padding: 10px 10px; + } + + #firstDiv p { + border-bottom: 2px solid #FFF; + padding-bottom: 5px; + margin-top: 6em; + } + + h1 { + font-family: 'Fjalla One', sans-serif; + font-size: 36px; + font-weight: 400; + margin: 20px 0px 5px 5px + } + + h4 { + margin-bottom: 40px; + } + + /* images with plants styling */ + image { + background-size: 350px, auto; + min-width: 320px; + min-height: 450px; + background-position: contain; + display: flex; + flex-direction: column; + align-items: center; + margin:20px; + padding-top: 20px; + color: #A05941; + font-family: 'Fjalla One', sans-serif; + } + + #cacti { + background-image: url(/images/images/cactus-in-a-pot.webp); + } + #plants { + background-image: url(/images/images/flowers\ in\ a\pot.webp); + } + #succulents { + background-image: url(/images/images/sucullent.webp); + } + + .horizontalLine { + width: 10px; + height: 5px; + background-color: #A05941; + position: relative; + margin: 0px auto 11px auto; + } + + h6 { + font-size: 16px; + letter-spacing: 0.5rem; + margin-bottom: 1rem; + } + + #images { + display: block; + } + + /* About section styling */ + #aboutUs { + color: #A05941; + background-color: #FFF; + font-family: 'Outfit', sans-serif; + text-align: center; + line-height: 1.5em; + margin-bottom: 1opx; + margin-top: 5px; + padding: 1rem 1rem 2rem 1rem; + } + + .photos { + width: 320px; + height: 150px; + margin: 0; + padding: 0; + } + fullImg { + width:320px; + height: 150px; + } + + .photos:last-photo { + background-color:#133032; + color: #FFF; + height: 400px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + #buyOnline { + font-family: 'Fjalla One',sans-serif; + font-size: 50px; + font-weight: 100; + line-height: 1.1em; + margin-top: 0.5rem; + margin-bottom: 40px; + text-align: center; + } + .photos:last button { + background-color: #FFF; + color: #133032; + font-size: medium; + } + /* form styling */ + form { + background-color: #FFF; + width: 310px; + padding: 20px 5px 20px 10px; + margin-top: 30px; + } + #formDiv { + width: 20px; + } + legend { + font-family: 'outfit', sans-serif; + color: #A05941; + text-align: center; + font-size: 18px; + letter-spacing: 0.5rem; + margin: 10px 20px 10px 20px; + line-height: 18px; + + } + + label { + display: block; + color: #133032; + font-family: 'outfit', sans-serif; + margin-top: 8px; + margin-bottom: 8px; + } + input { + display: block; + height: 35px; + width: 100%; + box-sizing: border-box; + } + textarea { + width: 100%; + box-sizing: border-box; + height: 150px; + padding: 3px; + } + #sendButton { + width: 100%; + box-sizing: border-box; + margin-top: 5px; + margin-bottom: 20px; + color: #FFF; + } + + #form img { + width: 320px; + } + + #contact-details { + background-color: #133032; + color: #EDEDEE; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'outfit', sans-serif; + } + + #contact-details p { + margin: 3px; + } + #contact-details a { + text-decoration: none; + color: #EDEDEE; + } + .contact-details { + margin-top: 2rem; + text-align: center; + } + .contact-details1 { + padding-left: 20px; + padding-right: 10px; + } + + #labelEmail { + color: #EDEDEE; + font-family: 'outfit', sans-serif; + } + #subscription { + margin-top: 10px; + border-color: #EDEDEE; + background-color: transparent; + height: 40px; + } + #subscribeBtn { + background-color: #FFF; + color: #133032; + font-size: medium; + width: 100%; + font-family: 'outfit', sans-serif; + padding: 12px; + margin-top: 10px; + } + .contact-details1 h6 { + text-align: center; + } + #soc-media { + text-align: center; + margin-bottom: 2rem; + margin-top: 4rem; + } + + footer { + background-color: lightgrey; + color: #A05941; + text-align: center; + margin: 0; + padding: 10px; + font-family: 'outfit', sans-serif; + } + #chatOption :first-child { + background-color: #A05941; + position: fixed; + padding: 10px; + border-radius: 50%; + bottom: 1rem; + right: 1rem; + } + + + + + + + + + + diff --git a/index.html b/index.html index cd704c69..8fbf1871 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,189 @@ + + - + + + Responsive grid project - +
+ + + +
+

We Deliver to Your Doorstep

+
+ +
+ +
+
+
+

E S T B

+ +

2023

+
+
+

PRICKLES & CO

+

BRING NATURE INDOORS

+
+ + +
+ +
+
+ +
+ +

CACTI

+
+ + + + +

PLANTS

+
+ + + + +

SUCCULENTS

+
+ + + +
+ +
+
+
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.

+
- +
+ teplitsa +
+
+ leave +
- +
+ woman among plants +
+ +
+ +

BUY ONLINE NOW & GET 10% OFF !

+ +
+
+ +
+
+
+ FOR SPECIAL REQUESTS & ORDERS + +
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+ + plant-ficus +
+ +
+
+
OUR STORE
+

Address: 500 Terry Francine

+

Street San Francisco, CA 94158

+

phone:123-456-7890

+

Email: info@mysite.com

+
+ +
class = "contact-details"> +
OPENING HOURS
+

Mon-Fri:7am - 10pm

+

Saturday: 8am - 10pm

+

Sunday: 8am -11pm

+
+ +
class = "contact-details"> +
HELP
+

Shipping & Returns

+

Privacy Policy

+

FAQ

+
+ +
class = "contact-details"> +
SUBSCRIBE
+
+ + + +
+
+ + + +
+
+ +
+ + +
+
+
+ + + + \ No newline at end of file