*{ margin: 0px; padding: 0px; box-sizing: border-box; } @media (min-width : 992px){ /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 1st Part :: Header ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Header :: Background :: Aligning & styling */ body header#head{ background-image: url('Images&Videos/fruit\ 2.jpg'); background-size: cover; background-repeat: no-repeat; height: 420px; position: relative; } /* Header :: Navbar :: Aligning */ body header#head nav#navbar ul{ display: flex; justify-content: center; list-style: none; } /* Header :: Navbar :: ul :: li :: Aligning */ body header#head nav#navbar ul li{ margin: 5px 20px 0 20px; } /* Header :: Navbar :: ul :: li :: a :: Styling */ body header#head nav#navbar ul li a{ text-decoration: none; color: black; font-size: 30px; font-family: monospace; } /* Header :: Navbar :: ul :: li :: a :: hover */ body header#head nav#navbar ul li a:hover{ opacity: 0.7; text-decoration: underline; } /* Header :: Name :: Algning and Styling */ body header#head h1{ font-family: cursive; font-weight: bold; font-style: italic; font-size: 70px; color: black; position: absolute; top: 30%; left: 33%; color: rgb(53, 53, 8); } /* Header :: Button :: Algning and Styling */ body header#head button a{ background-color: olive; font-family: cursive; font-weight: bold; font-size: 20px; text-decoration: none; color: black; border-radius: 10px; padding: 2px 8px; cursor: pointer; position: absolute; top: 56%; left: 43%; } /* Header :: Button :: Hover */ body header#head button a:hover{ color: gold; } /* Header :: Description :: p */ body header#head p{ position: absolute; top: 70%; left: 40%; font-weight: bolder; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 2nd Part :: About & Awards ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 2nd Part :: About & Awards :: Background */ body section#about-awards{ border: none; width: 100%; height: 400px; display: flex; justify-content: space-around; align-items: center; background-image: url('Images&Videos/fruit\ 1.jpg'); background-size: cover; } /* 2nd Part :: About & Awards :: About :: Aligning & Styling */ body section#about-awards div#about{ width: 40%; height: 350px; text-align: center; font-size: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* 2nd Part :: About & Awards :: Awards :: Aligning */ body section#about-awards div#awards{ width: 55%; height: 350px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning & Sizing */ body section#about-awards div#awards div.imageSlideShowContainer{ height: 300px; width: 100%; top: -10%; position: absolute; } /* 2nd Part :: About & Awards :: Awards :: Container :: Image */ body section#about-awards div#awards div.imageSlideShowContainer img{ top: 13%; width: 100%; height: 345px; position: relative; border-radius: 80px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning Left Right button And Image Selction Circle Side By Side */ body section#about-awards div#awards div.imageSlideShowContainer div.buttCirc{ display: flex; position: absolute; top: 100%; left: 30%; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt{ font-size: 3rem; color: lightcyan; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt:hover{ color: olive; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ{ border: 12px solid lightcyan; height: 0px; border-radius: 100%; margin: 22px 10px 0 10px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ:hover{ border: 10px solid olive; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 3rd Part :: Gallery ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 3rd Part :: Gallery :: Container :: Aligning & Display */ body div.container{ display: grid; border: 2px solid black; gap: 5px; margin: 10px 5px; grid-template-areas: "a a b c" "d d d e" "f g h h" "i j j k" "l m n o"; } /* 3rd Part :: Gallery :: Container :: Items :: Placing Grid Area */ body div.container div#item1{ grid-area: a; } body div.container div#item2{ grid-area: b; } body div.container div#item3{ grid-area: c; } body div.container div#item4{ grid-area: d; height: 250px; } body div.container div#item5{ grid-area: e; height: 250px; } body div.container div#item6{ grid-area: f; height: 325px; } body div.container div#item7{ grid-area: g; height: 325px; } body div.container div#item8{ grid-area: h; } body div.container div#item9{ grid-area: i; height: 200px; } body div.container div#item10{ grid-area: j; height: 200px; } body div.container div#item11{ grid-area: k; height: 200px; } body div.container div#item12{ grid-area: l; height: 200px; } body div.container div#item13{ grid-area: m; height: 200px; } body div.container div#item14{ grid-area: n; height: 200px; } body div.container div#item15{ grid-area: o; height: 200px; } /* 3rd Part :: Gallery :: Container :: Items :: Image :: Sizing */ body div.container div.img img{ width: 100%; height: 100%; } /* 3rd Part :: Gallery :: Container :: Items :: Video :: Sizing */ body div.container div.img video{ width: 100%; height: 100%; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 4th Part :: Contact Form ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 4th part :: Contact Form Background Image :: Placing & Aligning */ body section.contact{ background-image: url('Images&Videos/fruit\ 3.jpg'); width: 90%; background-size: cover; background-repeat: no-repeat; margin-left: auto; margin-right: auto; } /* 4th part :: Contact Form :: Styling form :: Inputs */ body section.contact form input{ background: none; border: 0px; font-size: 25px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: black; margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Select */ body section.contact form select{ background: none; border: 0px; font-size: 20px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: TextAreaa */ body section.contact form textarea{ background: none; border: 2px solid rgb(85, 85, 26); font-size: 25px; font-weight: bolder; border-radius: 5px; color: black; margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Span :: for Male Female and @ */ body section.contact form span{ background: none; border: 0px; font-size: 20px; margin-right: 10px; font-weight: bolder; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Icons */ body section.contact form i.fa{ color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Changing :: PlaceHolder Color */ ::placeholder{ /* Firefox */ text-align: center; color: rgb(85, 85, 26); } :-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; color: rgb(85, 85, 26); } ::-ms-input-placeholder{ /* Microsoft Edge */ text-align: center; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Button */ body section.contact form button{ font-size: 25px; font-weight: bolder; background-color: black; color: whitesmoke; cursor: pointer; padding: 5px 10px; border-radius: 10px; } /* 4th part :: Contact Form :: Styling form :: Button :: Adding Hover Effect */ body section.contact form button:hover{ color: pink; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 5th Part :: Footer ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Footer :: Background */ body footer#foot{ background-image: linear-gradient(to right, rgb(83, 83, 6), rgb(189, 189, 165)); } /* 5th Part :: Footer :: Aligning Footer Items Side by side */ body footer#foot div.footerFlex{ display: flex; justify-content: space-around; } /* 5th Part :: Footer :: Left Side :: Address Placing */ body footer#foot div.footerFlex div#address{ margin: 0 0 20px 0; } /* 5th Part :: Footer :: Left Side :: Address :: Content :: Styling Address */ body footer#foot div.footerFlex div#address div.area p{ margin-top: 25px; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Mid Side :: Map :: Container */ body footer#foot div.footerFlex div#map div#mapcontainer{ margin: 20px 20px 20px 50px; border: 5px solid black; height: 200px; width: 400px; } /* 5th Part :: Footer :: Right Side :: Social Placing */ body footer#foot div.footerFlex div#social{ margin: 20px 20px 20px 70px; } /* c5th Part :: Footer :: Right Side :: Social :: Styling list Elements */ body footer#foot div.footerFlex div#social ul{ list-style: none; text-align: center; line-height: 60px; } /* 5th Part :: Footer :: Right Side :: Social :: Content */ body footer#foot div.footerFlex div#social ul li a{ text-decoration: none; width: 25%; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Right Side :: Social :: Icons */ body footer#foot div.footerFlex div#social ul li i{ width: 15%; font-size: 25px; color: whitesmoke; } } @media (min-width : 768px) and (max-width:992px){ /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 1st Part :: Header ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Header :: Background :: Aligning & styling */ body header#head{ background-image: url('Images&Videos/fruit\ 2.jpg'); background-size: cover; background-repeat: no-repeat; height: 420px; position: relative; } /* Header :: Navbar :: Aligning */ body header#head nav#navbar ul{ display: flex; justify-content: center; list-style: none; } /* Header :: Navbar :: ul :: li :: Aligning */ body header#head nav#navbar ul li{ margin: 5px 20px 0 20px; } /* Header :: Navbar :: ul :: li :: a :: Styling */ body header#head nav#navbar ul li a{ text-decoration: none; color: black; font-size: 30px; font-family: monospace; } /* Header :: Navbar :: ul :: li :: a :: hover */ body header#head nav#navbar ul li a:hover{ opacity: 0.7; text-decoration: underline; } /* Header :: Name :: Algning and Styling */ body header#head h1{ font-family: cursive; font-weight: bold; font-style: italic; font-size: 70px; color: black; position: absolute; top: 25%; left: 30%; color: rgb(53, 53, 8); } /* Header :: Button :: Algning and Styling */ body header#head button a{ background-color: olive; font-family: cursive; font-weight: bold; font-size: 20px; text-decoration: none; color: black; border-radius: 10px; padding: 2px 8px; cursor: pointer; position: absolute; top: 50%; left: 40%; } /* Header :: Button :: Hover */ body header#head button a:hover{ color: gold; } /* Header :: Description :: p */ body header#head p{ position: absolute; top: 65%; left: 35%; font-weight: bolder; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 2nd Part :: About & Awards ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 2nd Part :: About & Awards :: Background */ body section#about-awards{ border: none; width: 100%; height: 450px; display: flex; justify-content: space-around; align-items: center; background-image: url('Images&Videos/fruit\ 1.jpg'); background-size: cover; } /* 2nd Part :: About & Awards :: About :: Aligning & Styling */ body section#about-awards div#about{ width: 40%; height: 350px; text-align: center; font-size: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* 2nd Part :: About & Awards :: Awards :: Aligning */ body section#about-awards div#awards{ width: 55%; height: 350px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning & Sizing */ body section#about-awards div#awards div.imageSlideShowContainer{ height: 300px; width: 100%; top: -10%; position: absolute; } /* 2nd Part :: About & Awards :: Awards :: Container :: Image */ body section#about-awards div#awards div.imageSlideShowContainer img{ top: 10%; width: 100%; height: 345px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning Left Right button And Image Selction Circle Side By Side */ body section#about-awards div#awards div.imageSlideShowContainer div.buttCirc{ display: flex; position: absolute; top: 100%; left: 20%; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt{ font-size: 3rem; color: lightcyan; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt:hover{ color: olive; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ{ border: 12px solid lightcyan; height: 0px; border-radius: 100%; margin: 22px 10px 0 10px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ:hover{ border: 10px solid olive; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 3rd Part :: Gallery ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 3rd Part :: Gallery :: Container :: Aligning & Display */ body div.container{ display: grid; border: 5px solid black; gap: 5px; margin: 10px 5px; grid-template-areas: "a a b c" "d d d e" "f g h h" "i j j k" "l m n o"; } /* 3rd Part :: Gallery :: Container :: Items :: Placing Grid Area */ body div.container div#item1{ grid-area: a; } body div.container div#item2{ grid-area: b; } body div.container div#item3{ grid-area: c; } body div.container div#item4{ grid-area: d; height: 250px; } body div.container div#item5{ grid-area: e; height: 250px; } body div.container div#item6{ grid-area: f; height: 325px; } body div.container div#item7{ grid-area: g; height: 325px; } body div.container div#item8{ grid-area: h; } body div.container div#item9{ grid-area: i; height: 200px; } body div.container div#item10{ grid-area: j; height: 200px; } body div.container div#item11{ grid-area: k; height: 200px; } body div.container div#item12{ grid-area: l; height: 200px; } body div.container div#item13{ grid-area: m; height: 200px; } body div.container div#item14{ grid-area: n; height: 200px; } body div.container div#item15{ grid-area: o; height: 200px; } /* 3rd Part :: Gallery :: Container :: Items :: Image :: Sizing */ body div.container div.img img{ width: 100%; height: 100%; } /* 3rd Part :: Gallery :: Container :: Items :: Video :: Sizing */ body div.container div.img video{ width: 100%; height: 100%; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 4th Part :: Contact Form ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 4th part :: Contact Form Background Image :: Placing & Aligning */ body section.contact{ background-image: url('Images&Videos/fruit\ 3.jpg'); width: 90%; background-size: cover; background-repeat: no-repeat; margin-left: auto; margin-right: auto; } /* 4th part :: Contact Form :: Styling form :: Inputs */ body section.contact form input{ background: none; border: 0px; font-size: 25px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Select */ body section.contact form select{ background: none; border: 0px; font-size: 20px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: TextAreaa */ body section.contact form textarea{ background: none; border: 2px solid rgb(85, 85, 26); font-size: 25px; font-weight: bolder; border-radius: 5px; color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Span :: for Male Female and @ */ body section.contact form span{ background: none; border: 0px; font-size: 20px; margin-right: 10px; font-weight: bolder; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Icons */ body section.contact form i.fa{ color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Changing :: PlaceHolder Color */ ::placeholder{ /* Firefox */ text-align: center; color: rgb(85, 85, 26); } :-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; color: rgb(85, 85, 26); } ::-ms-input-placeholder{ /* Microsoft Edge */ text-align: center; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Button */ body section.contact form button{ font-size: 25px; font-weight: bolder; background-color: black; color: whitesmoke; cursor: pointer; padding: 5px 10px; border-radius: 10px; } /* 4th part :: Contact Form :: Styling form :: Button :: Adding Hover Effect */ body section.contact form button:hover{ color: pink; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 5th Part :: Footer ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Footer :: Background */ body footer#foot{ background-image: linear-gradient(to right, rgb(83, 83, 6), rgb(189, 189, 165)); } /* 5th Part :: Footer :: Aligning Footer Items Side by side */ body footer#foot div.footerFlex{ display: flex; justify-content: space-around; } /* 5th Part :: Footer :: Left Side :: Address Placing */ body footer#foot div.footerFlex div#address{ margin: 0 0 20px 0; } /* 5th Part :: Footer :: Left Side :: Address :: Content :: Styling Address */ body footer#foot div.footerFlex div#address div.area p{ margin-top: 25px; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Mid Side :: Map :: Container */ body footer#foot div.footerFlex div#map div#mapcontainer{ margin: 20px 0 20px 40px; border: 5px solid black; height: 200px; width: 300px; } /* 5th Part :: Footer :: Right Side :: Social Placing */ body footer#foot div.footerFlex div#social{ margin: 20px 20px 20px 35px; } /* c5th Part :: Footer :: Right Side :: Social :: Styling list Elements */ body footer#foot div.footerFlex div#social ul{ list-style: none; text-align: center; line-height: 60px; } /* 5th Part :: Footer :: Right Side :: Social :: Content */ body footer#foot div.footerFlex div#social ul li a{ text-decoration: none; width: 25%; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Right Side :: Social :: Icons */ body footer#foot div.footerFlex div#social ul li i{ width: 15%; font-size: 25px; color: whitesmoke; } } @media (min-width : 546px) and (max-width: 768px){ /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 1st Part :: Header ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Header :: Background :: Aligning & styling */ body header#head{ background-image: url('Images&Videos/fruit\ 2.jpg'); background-size: cover; background-repeat: no-repeat; height: 380px; position: relative; } /* Header :: Navbar :: Aligning */ body header#head nav#navbar ul{ display: flex; justify-content: center; list-style: none; } /* Header :: Navbar :: ul :: li :: Aligning */ body header#head nav#navbar ul li{ margin: 5px 10px 0 20px; } /* Header :: Navbar :: ul :: li :: a :: Styling */ body header#head nav#navbar ul li a{ text-decoration: none; color: black; font-size: 30px; font-family: monospace; } /* Header :: Navbar :: ul :: li :: a :: hover */ body header#head nav#navbar ul li a:hover{ opacity: 0.7; text-decoration: underline; } /* Header :: Name :: Algning and Styling */ body header#head h1{ font-family: cursive; font-weight: bold; font-style: italic; font-size: 60px; color: black; position: absolute; top: 20%; left: 22%; color: rgb(53, 53, 8); } /* Header :: Button :: Algning and Styling */ body header#head button a{ background-color: olive; font-family: cursive; font-weight: bold; font-size: 20px; text-decoration: none; color: black; border-radius: 10px; padding: 2px 8px; cursor: pointer; position: absolute; top: 45%; left: 37%; } /* Header :: Button :: Hover */ body header#head button a:hover{ color: gold; } /* Header :: Description :: p */ body header#head p{ position: absolute; top: 60%; left: 30%; font-weight: bolder; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 2nd Part :: About & Awards ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 2nd Part :: About & Awards :: Background */ body section#about-awards{ border: none; width: 100%; height: 650px; background-image: url('Images&Videos/fruit\ 1.jpg'); background-size: cover; } /* 2nd Part :: About & Awards :: About :: Aligning & Styling */ body section#about-awards div#about{ width: 100%; height: 350px; text-align: center; font-size: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* 2nd Part :: About & Awards :: Awards :: Aligning */ body section#about-awards div#awards{ width: 100%; top: -10%; height: 350px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning & Sizing */ body section#about-awards div#awards div.imageSlideShowContainer{ height: 300px; width: 100%; top: -10%; position: absolute; } /* 2nd Part :: About & Awards :: Awards :: Container :: Image */ body section#about-awards div#awards div.imageSlideShowContainer img{ top: 10%; width: 100%; height: 345px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning Left Right button And Image Selction Circle Side By Side */ body section#about-awards div#awards div.imageSlideShowContainer div.buttCirc{ display: flex; position: absolute; top: 100%; left: 25%; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt{ font-size: 3rem; color: lightcyan; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt:hover{ color: olive; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ{ border: 12px solid lightcyan; height: 0px; border-radius: 100%; margin: 22px 10px 0 10px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ:hover{ border: 10px solid olive; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 3rd Part :: Gallery ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 3rd Part :: Gallery :: Container :: Aligning & Display */ body div.container{ display: grid; border: 5px solid black; gap: 5px; margin: 10px 5px; grid-template-areas: "a a b c" "d d d e" "f g h h" "i j j k" "l m n o"; } /* 3rd Part :: Gallery :: Container :: Items :: Placing Grid Area */ body div.container div#item1{ grid-area: a; } body div.container div#item2{ grid-area: b; } body div.container div#item3{ grid-area: c; } body div.container div#item4{ grid-area: d; height: 250px; } body div.container div#item5{ grid-area: e; height: 250px; } body div.container div#item6{ grid-area: f; height: 325px; } body div.container div#item7{ grid-area: g; height: 325px; } body div.container div#item8{ grid-area: h; } body div.container div#item9{ grid-area: i; height: 200px; } body div.container div#item10{ grid-area: j; height: 200px; } body div.container div#item11{ grid-area: k; height: 200px; } body div.container div#item12{ grid-area: l; height: 200px; } body div.container div#item13{ grid-area: m; height: 200px; } body div.container div#item14{ grid-area: n; height: 200px; } body div.container div#item15{ grid-area: o; height: 200px; } /* 3rd Part :: Gallery :: Container :: Items :: Image :: Sizing */ body div.container div.img img{ width: 100%; height: 100%; } /* 3rd Part :: Gallery :: Container :: Items :: Video :: Sizing */ body div.container div.img video{ width: 100%; height: 100%; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 4th Part :: Contact Form ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 4th part :: Contact Form Background Image :: Placing & Aligning */ body section.contact{ background-image: url('Images&Videos/fruit\ 3.jpg'); width: 90%; background-size: cover; background-repeat: no-repeat; margin-left: auto; margin-right: auto; } /* 4th part :: Contact Form :: Styling form :: Inputs */ body section.contact form input{ background: none; border: 0px; font-size: 25px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Select */ body section.contact form select{ background: none; border: 0px; font-size: 20px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: TextAreaa */ body section.contact form textarea{ background: none; border: 2px solid rgb(85, 85, 26); font-size: 25px; font-weight: bolder; border-radius: 5px; color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Span :: for Male Female and @ */ body section.contact form span{ background: none; border: 0px; font-size: 20px; margin-right: 10px; font-weight: bolder; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Icons */ body section.contact form i.fa{ color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Changing :: PlaceHolder Color */ ::placeholder{ /* Firefox */ text-align: center; color: rgb(85, 85, 26); } :-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; color: rgb(85, 85, 26); } ::-ms-input-placeholder{ /* Microsoft Edge */ text-align: center; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Button */ body section.contact form button{ font-size: 25px; font-weight: bolder; background-color: black; color: whitesmoke; cursor: pointer; padding: 5px 10px; border-radius: 10px; } /* 4th part :: Contact Form :: Styling form :: Button :: Adding Hover Effect */ body section.contact form button:hover{ color: pink; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 5th Part :: Footer ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Footer :: Background */ body footer#foot{ background-image: linear-gradient(to right, rgb(83, 83, 6), rgb(189, 189, 165)); } /* 5th Part :: Footer :: Left Side :: Address Placing */ body footer#foot div.footerFlex div#address{ margin: 0 0 20px 0; } /* 5th Part :: Footer :: Left Side :: Address :: Content :: Styling Address */ body footer#foot div.footerFlex div#address div.area p{ margin-top: 5px; font-size: 25px; color: whitesmoke; text-align: center; } /* 5th Part :: Footer :: Mid Side :: Map :: Container */ body footer#foot div.footerFlex div#map div#mapcontainer{ margin: 20px auto; border: 5px solid black; height: 200px; width: 300px; } /* 5th Part :: Footer :: Right Side :: Social Placing */ body footer#foot div.footerFlex div#social{ margin: 20px 20px 20px 35px; } /* c5th Part :: Footer :: Right Side :: Social :: Styling list Elements */ body footer#foot div.footerFlex div#social ul{ list-style: none; text-align: center; line-height: 60px; } /* 5th Part :: Footer :: Right Side :: Social :: Content */ body footer#foot div.footerFlex div#social ul li a{ text-decoration: none; width: 25%; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Right Side :: Social :: Icons */ body footer#foot div.footerFlex div#social ul li i{ width: 8%; font-size: 25px; color: whitesmoke; } } @media (min-width : 420px) and (max-width: 546px){ /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 1st Part :: Header ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Header :: Background :: Aligning & styling */ body header#head{ background-image: url('Images&Videos/fruit\ 2.jpg'); background-size: cover; background-repeat: no-repeat; height: 320px; position: relative; } /* Header :: Navbar :: Aligning */ body header#head nav#navbar ul{ display: flex; justify-content: center; list-style: none; } /* Header :: Navbar :: ul :: li :: Aligning */ body header#head nav#navbar ul li{ margin: 5px 10px 0 10px; } /* Header :: Navbar :: ul :: li :: a :: Styling */ body header#head nav#navbar ul li a{ text-decoration: none; color: black; font-size: 25px; font-family: monospace; } /* Header :: Navbar :: ul :: li :: a :: hover */ body header#head nav#navbar ul li a:hover{ opacity: 0.7; text-decoration: underline; } /* Header :: Name :: Algning and Styling */ body header#head h1{ font-family: cursive; font-weight: bold; font-style: italic; font-size: 50px; color: black; position: absolute; top: 20%; left: 15%; color: rgb(53, 53, 8); } /* Header :: Button :: Algning and Styling */ body header#head button a{ background-color: olive; font-family: cursive; font-weight: bold; font-size: 20px; text-decoration: none; color: black; border-radius: 10px; padding: 2px 8px; cursor: pointer; position: absolute; top: 45%; left: 35%; } /* Header :: Button :: Hover */ body header#head button a:hover{ color: gold; } /* Header :: Description :: p */ body header#head p{ position: absolute; top: 60%; left: 25%; font-weight: bolder; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 2nd Part :: About & Awards ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 2nd Part :: About & Awards :: Background */ body section#about-awards{ border: none; width: 100%; height: 650px; background-image: url('Images&Videos/fruit\ 1.jpg'); background-size: cover; } /* 2nd Part :: About & Awards :: About :: Aligning & Styling */ body section#about-awards div#about{ width: 100%; height: 350px; text-align: center; font-size: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* 2nd Part :: About & Awards :: Awards :: Aligning */ body section#about-awards div#awards{ width: 100%; top: -10%; height: 350px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning & Sizing */ body section#about-awards div#awards div.imageSlideShowContainer{ height: 300px; width: 100%; top: -8%; position: absolute; } /* 2nd Part :: About & Awards :: Awards :: Container :: Image */ body section#about-awards div#awards div.imageSlideShowContainer img{ top: 10%; width: 100%; height: 345px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning Left Right button And Image Selction Circle Side By Side */ body section#about-awards div#awards div.imageSlideShowContainer div.buttCirc{ display: flex; position: absolute; top: 100%; left: 25%; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt{ font-size: 3rem; color: lightcyan; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt:hover{ color: olive; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ{ border: 12px solid lightcyan; height: 0px; border-radius: 100%; margin: 22px 10px 0 10px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ:hover{ border: 10px solid olive; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 3rd Part :: Gallery ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 3rd Part :: Gallery :: Container :: Aligning & Display */ body div.container{ display: grid; border: 5px solid black; gap: 5px; margin: 10px 5px; grid-template-areas: "a a b c" "d d d e" "f g h h" "i j j k" "l m n o"; } /* 3rd Part :: Gallery :: Container :: Items :: Placing Grid Area */ body div.container div#item1{ grid-area: a; } body div.container div#item2{ grid-area: b; } body div.container div#item3{ grid-area: c; } body div.container div#item4{ grid-area: d; height: 250px; } body div.container div#item5{ grid-area: e; height: 250px; } body div.container div#item6{ grid-area: f; height: 325px; } body div.container div#item7{ grid-area: g; height: 325px; } body div.container div#item8{ grid-area: h; } body div.container div#item9{ grid-area: i; height: 200px; } body div.container div#item10{ grid-area: j; height: 200px; } body div.container div#item11{ grid-area: k; height: 200px; } body div.container div#item12{ grid-area: l; height: 200px; } body div.container div#item13{ grid-area: m; height: 200px; } body div.container div#item14{ grid-area: n; height: 200px; } body div.container div#item15{ grid-area: o; height: 200px; } /* 3rd Part :: Gallery :: Container :: Items :: Image :: Sizing */ body div.container div.img img{ width: 100%; height: 100%; } /* 3rd Part :: Gallery :: Container :: Items :: Video :: Sizing */ body div.container div.img video{ width: 100%; height: 100%; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 4th Part :: Contact Form ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 4th part :: Contact Form Background Image :: Placing & Aligning */ body section.contact{ background-image: url('Images&Videos/fruit\ 3.jpg'); width: 90%; background-size: cover; background-repeat: no-repeat; margin-left: auto; margin-right: auto; } /* 4th part :: Contact Form :: Styling form :: Inputs */ body section.contact form input{ background: none; border: 0px; font-size: 25px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Select */ body section.contact form select{ background: none; border: 0px; font-size: 20px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: TextAreaa */ body section.contact form textarea{ background: none; border: 2px solid rgb(85, 85, 26); font-size: 25px; font-weight: bolder; border-radius: 5px; color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Span :: for Male Female and @ */ body section.contact form span{ background: none; border: 0px; font-size: 20px; margin-right: 10px; font-weight: bolder; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Icons */ body section.contact form i.fa{ color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Changing :: PlaceHolder Color */ ::placeholder{ /* Firefox */ text-align: center; color: rgb(85, 85, 26); } :-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; color: rgb(85, 85, 26); } ::-ms-input-placeholder{ /* Microsoft Edge */ text-align: center; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Button */ body section.contact form button{ font-size: 25px; font-weight: bolder; background-color: black; color: whitesmoke; cursor: pointer; padding: 5px 10px; border-radius: 10px; } /* 4th part :: Contact Form :: Styling form :: Button :: Adding Hover Effect */ body section.contact form button:hover{ color: pink; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 5th Part :: Footer ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Footer :: Background */ body footer#foot{ background-image: linear-gradient(to right, rgb(83, 83, 6), rgb(189, 189, 165)); } /* 5th Part :: Footer :: Left Side :: Address Placing */ body footer#foot div.footerFlex div#address{ margin: 0 0 20px 0; } /* 5th Part :: Footer :: Left Side :: Address :: Content :: Styling Address */ body footer#foot div.footerFlex div#address div.area p{ margin-top: 5px; font-size: 25px; color: whitesmoke; text-align: center; } /* 5th Part :: Footer :: Mid Side :: Map :: Container */ body footer#foot div.footerFlex div#map div#mapcontainer{ margin: 20px auto; border: 5px solid black; height: 200px; width: 300px; } /* 5th Part :: Footer :: Right Side :: Social Placing */ body footer#foot div.footerFlex div#social{ margin: 20px 20px 20px 35px; } /* c5th Part :: Footer :: Right Side :: Social :: Styling list Elements */ body footer#foot div.footerFlex div#social ul{ list-style: none; text-align: center; line-height: 60px; } /* 5th Part :: Footer :: Right Side :: Social :: Content */ body footer#foot div.footerFlex div#social ul li a{ text-decoration: none; width: 25%; font-size: 25px; color: whitesmoke; } /* 5th Part :: Footer :: Right Side :: Social :: Icons */ body footer#foot div.footerFlex div#social ul li i{ width: 8%; font-size: 25px; color: whitesmoke; } } @media (min-width: 0) and (max-width:420px){ /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 1st Part :: Header ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Header :: Background :: Aligning & styling */ body header#head{ background-image: url('Images&Videos/fruit\ 2.jpg'); background-size: cover; background-repeat: no-repeat; height: 320px; position: relative; } /* Header :: Navbar :: Aligning */ body header#head nav#navbar ul{ display: flex; justify-content: center; list-style: none; } /* Header :: Navbar :: ul :: li :: Aligning */ body header#head nav#navbar ul li{ margin: 5px 5px 0 5px; } /* Header :: Navbar :: ul :: li :: a :: Styling */ body header#head nav#navbar ul li a{ text-decoration: none; color: black; font-size: 20px; font-family: monospace; } /* Header :: Navbar :: ul :: li :: a :: hover */ body header#head nav#navbar ul li a:hover{ opacity: 0.7; text-decoration: underline; } /* Header :: Name :: Algning and Styling */ body header#head h1{ font-family: cursive; font-weight: bold; font-style: italic; font-size: 40px; color: black; position: absolute; top: 20%; left: 22%; color: rgb(53, 53, 8); } /* Header :: Button :: Algning and Styling */ body header#head button a{ background-color: olive; font-family: cursive; font-weight: bold; font-size: 20px; text-decoration: none; color: black; border-radius: 10px; padding: 2px 8px; cursor: pointer; position: absolute; top: 42%; left: 33%; } /* Header :: Button :: Hover */ body header#head button a:hover{ color: gold; } /* Header :: Description :: p */ body header#head p{ position: absolute; top: 60%; left: 20%; font-weight: bolder; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 2nd Part :: About & Awards ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 2nd Part :: About & Awards :: Background */ body section#about-awards{ border: none; width: 100%; height: 620px; background-image: url('Images&Videos/fruit\ 1.jpg'); background-size: cover; } /* 2nd Part :: About & Awards :: About :: Aligning & Styling */ body section#about-awards div#about{ width: 100%; height: 350px; text-align: center; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* 2nd Part :: About & Awards :: Awards :: Aligning */ body section#about-awards div#awards{ width: 100%; top: -17%; height: 350px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning & Sizing */ body section#about-awards div#awards div.imageSlideShowContainer{ height: 300px; width: 100%; top: -10%; position: absolute; } /* 2nd Part :: About & Awards :: Awards :: Container :: Image */ body section#about-awards div#awards div.imageSlideShowContainer img{ top: 10%; width: 100%; height: 345px; position: relative; } /* 2nd Part :: About & Awards :: Awards :: Container :: Aligning Left Right button And Image Selction Circle Side By Side */ body section#about-awards div#awards div.imageSlideShowContainer div.buttCirc{ display: flex; position: absolute; top: 100%; left: 17%; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt{ font-size: 3rem; color: lightcyan; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Left Right Button */ body section#about-awards div#awards div.imageSlideShowContainer div.butt:hover{ color: olive; } /* 2nd Part :: About & Awards :: Awards :: Container :: Styling Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ{ border: 12px solid lightcyan; height: 0px; border-radius: 100%; margin: 22px 10px 0 10px; } /* 2nd Part :: About & Awards :: Awards :: Container :: Adding Hover effect :: Image Selection Circle */ body section#about-awards div#awards div.imageSlideShowContainer span.circ:hover{ border: 10px solid olive; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 3rd Part :: Gallery ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 3rd Part :: Gallery :: Container :: Aligning & Display */ body div.container{ display: grid; border: 5px solid black; gap: 5px; margin: 10px 5px; grid-template-areas: "a a" "b c" "d d" "e f" "g h" "j j" "i k" "l m" "n o"; } /* 3rd Part :: Gallery :: Container :: Items :: Placing Grid Area */ body div.container div#item1{ grid-area: a; } body div.container div#item2{ grid-area: b; } body div.container div#item3{ grid-area: c; } body div.container div#item4{ grid-area: d; height: 250px; } body div.container div#item5{ grid-area: e; height: 200px; } body div.container div#item6{ grid-area: f; height: 200px; } body div.container div#item7{ grid-area: g; height: 200px; } body div.container div#item8{ grid-area: h; } body div.container div#item9{ grid-area: i; height: 200px; } body div.container div#item10{ grid-area: j; height: 200px; } body div.container div#item11{ grid-area: k; height: 200px; } body div.container div#item12{ grid-area: l; height: 200px; } body div.container div#item13{ grid-area: m; height: 200px; } body div.container div#item14{ grid-area: n; height: 200px; } body div.container div#item15{ grid-area: o; height: 200px; } /* 3rd Part :: Gallery :: Container :: Items :: Image :: Sizing */ body div.container div.img img{ width: 100%; height: 100%; } /* 3rd Part :: Gallery :: Container :: Items :: Video :: Sizing */ body div.container div.img video{ width: 100%; height: 100%; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 4th Part :: Contact Form ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* 4th part :: Contact Form Background Image :: Placing & Aligning */ body section.contact{ background-image: url('Images&Videos/fruit\ 3.jpg'); width: 100%; background-size: cover; background-repeat: no-repeat; margin-left: auto; margin-right: auto; } /* 4th part :: Contact Form :: Styling form :: Inputs */ body section.contact form input{ background: none; border: 0px; font-size: 15px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Select */ body section.contact form select{ background: none; border: 0px; font-size: 20px; font-weight: bolder; border-radius: 5px; border-bottom: 5px solid rgb(85, 85, 26); color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: TextAreaa */ body section.contact form textarea{ background: none; border: 2px solid rgb(85, 85, 26); font-size: 15px; font-weight: bolder; border-radius: 5px; color: rgb(85, 85, 26); margin-right: 10px; } /* 4th part :: Contact Form :: Styling form :: Span :: for Male Female and @ */ body section.contact form span{ background: none; border: 0px; font-size: 20px; margin-right: 10px; font-weight: bolder; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Icons */ body section.contact form i.fa{ color: rgb(85, 85, 26); font-size: 15px; } /* 4th part :: Contact Form :: Styling form :: Changing :: PlaceHolder Color */ ::placeholder{ /* Firefox */ text-align: center; color: rgb(85, 85, 26); } :-ms-input-placeholder{ /* Internet Explorer 10-11 */ text-align: center; color: rgb(85, 85, 26); } ::-ms-input-placeholder{ /* Microsoft Edge */ text-align: center; color: rgb(85, 85, 26); } /* 4th part :: Contact Form :: Styling form :: Button */ body section.contact form button{ font-size: 20px; font-weight: bolder; background-color: black; color: whitesmoke; cursor: pointer; padding: 5px 10px; border-radius: 10px; } /* 4th part :: Contact Form :: Styling form :: Button :: Adding Hover Effect */ body section.contact form button:hover{ color: pink; } /* ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- 5th Part :: Footer ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------- */ /* Footer :: Background */ body footer#foot{ background-image: linear-gradient(to right, rgb(83, 83, 6), rgb(189, 189, 165)); } /* 5th Part :: Footer :: Left Side :: Address Placing */ body footer#foot div.footerFlex div#address{ margin: 0 0 20px 0; } /* 5th Part :: Footer :: Left Side :: Address :: Content :: Styling Address */ body footer#foot div.footerFlex div#address div.area p{ margin-top: 5px; font-size: 20px; color: whitesmoke; text-align: center; } /* 5th Part :: Footer :: Mid Side :: Map :: Container */ body footer#foot div.footerFlex div#map div#mapcontainer{ margin: 20px auto; border: 5px solid black; height: 200px; width: 250px; } /* 5th Part :: Footer :: Right Side :: Social Placing */ body footer#foot div.footerFlex div#social{ margin: 20px 20px 20px 35px; } /* 5th Part :: Footer :: Right Side :: Social :: Styling list Elements */ body footer#foot div.footerFlex div#social ul{ list-style: none; text-align: center; line-height: 30px; } /* 5th Part :: Footer :: Right Side :: Social :: Content */ body footer#foot div.footerFlex div#social ul li a{ text-decoration: none; width: 25%; font-size: 20px; color: whitesmoke; } /* 5th Part :: Footer :: Right Side :: Social :: Icons */ body footer#foot div.footerFlex div#social ul li i{ width: 6%; font-size: 20px; color: whitesmoke; } }