diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a3b3444e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["fullname", "Wireframe"] +} diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..16d44d7c 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,127 @@ - - - - - + + + + Responsive Cake webpage - - - - - + + + + + + + + + + + +
+ + + +
+
+ an image of an icon menu +
+ +
+

The best cakes in town delivered to your door

+
+
+
+ + + +
+ +
+
+ +
+ + +
+ + +
+

Welcome to ShelbyCakes

+
+

+ Thank you for visiting ShelbyCakes, where we craft beautiful, + custom cakes for every special occasion. From birthdays to + weddings, our delicious creations are designed to bring your cake + visions to life. Explore our flavors and designs, and let us + sweeten your celebrations with a touch of joy! +

+ +
+ + + + +
+ a beautiful cake +
+
+ +
+ maroon cake with flower decorations + a cake with a wine class and flowers + blueberry glass cake + green coloured delicious doughnuts +
+
+ +
+ + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..f50959cc 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,442 @@ -/* Add your styling here */ +/* ------------HEADER---------*/ + +body { + margin: 0px; + background-color: #a79aaf; +} + +header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; +} + +.header-img-text { + display: grid; + grid-template-rows: 1fr 1fr; + justify-items: end; + padding-right: 10px; +} + +.header-logo { + margin: 10px; +} + +.header-logo img { + width: 150px; + border-radius: 50%; +} + +.header-menu { + width: 50px; + height: 50px; + padding-top: 20px; +} + +.header-menu img { + width: 50px; + background-color: #d4afb9; +} + +.header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); +} + +/* ------------MAIN---------*/ + +/* ------------NAV BAR---------*/ + +nav { + display: none; +} + +/* -----------------SECTION 1-------------------*/ + +main { + padding: 7px; + background-color: #a39196; +} + +main h1 { + font-size: 30px; + color: rgb(52, 50, 53); + margin: 10px; +} + +main p { + font-size: 21px; + color: rgb(46, 44, 44); + margin: 10px; +} + +.main-image { + width: 100%; +} +/* -----------------SECTION 2-------------------*/ + +.image-of-four { + box-sizing: border-box; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + row-gap: 20px; + column-gap: 20px; + margin-top: 50px; + margin-bottom: 40px; +} + +.image-of-four img { + width: 100%; + height: 100%; +} + +/* -----------------FOOTER-------------------*/ + +hr { + margin-top: 0px; + margin-bottom: 0px; +} + +.info-contact { + font-size: larger; + font-weight: 800; +} + +footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; +} + +.footer-box { + font-size: large; + margin-bottom: 0px; +} + +.copyright { + text-align: center; +} + +/* -----------------MEDIA QUERIES(768px)-Medium-------------------*/ +@media (min-width: 768px) { + body { + box-sizing: border-box; + padding: 10px; + } + + header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; + } + + .header-img-text { + display: grid; + grid-template-rows: 1fr; + padding-right: 10px; + align-items: end; + } + + .header-logo { + margin: 10px; + } + + .header-logo img { + width: 150px; + border-radius: 50%; + } + + .header-menu { + display: none; + } + + .header-menu img { + width: 50px; + background-color: #d4afb9; + } + + .header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); + } + /* -----------------MAIN-------------------*/ + + nav { + display: flex; + flex-direction: row; + justify-content: end; + padding: 30px; + } + + nav li { + color: rgb(95, 88, 88); + list-style-type: none; + display: inline-block; + padding-left: 20px; + font-weight: 600; + font-size: 16px; + } + + nav li:hover { + color: #a79aaf; + } + + /* -----------------SECTION 1------------------*/ + + .nav-heading-text-image-box { + display: grid; + background-color: #d4afb9; + padding-bottom: 0px; + } + + .heading-text-image-box { + display: flex; + flex-direction: row-reverse; + box-sizing: border-box; + } + + .main-image { + width: 500px; + height: 500px; + border-radius: 15px; + } + + .heading-text { + width: 80%; + } + .heading-text h1 { + text-align: right; + } + + .main-text p { + text-wrap: wrap; + font-size: 30px; + text-align: right; + padding: 10px; + } + + /* -----------------SECTION 2------------------*/ + + .image-of-four { + box-sizing: border-box; + width: 100%; + height: 40%; + margin-top: 50px; + padding: 20px; + display: grid; + grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr; + grid-template-rows: 0fr 0fr 0fr 0fr; + column-gap: 30px; + } + + .image-of-four img { + width: 100%; + height: 100%; + border-radius: 15px; + } + + /* -----------------FOOTER-----------------*/ + + .info-contact { + text-align: center; + margin-bottom: 10px; + } + + footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; + } + + .footer-box { + display: flex; + flex-direction: row; + justify-content: center; + font-size: large; + margin-bottom: 0px; + padding: 20px; + } + + .footer-box p { + padding-left: 30px; + text-align: center; + } + + .copyright { + text-align: center; + } +} +/* -----------------MEDIA QUERIES (900) LARGE-------------------*/ +@media (min-width: 900px) { + body { + box-sizing: border-box; + padding: 10px; + } + + header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; + } + + .header-img-text { + display: grid; + grid-template-rows: 1fr; + padding-right: 10px; + align-items: end; + } + + .header-logo { + margin: 10px; + } + + .header-logo img { + width: 150px; + border-radius: 50%; + } + + .header-menu { + display: none; + } + + .header-menu img { + width: 50px; + } + + .header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); + } + /* -----------------MAIN-------------------*/ + + nav { + display: flex; + flex-direction: row; + justify-content: end; + padding: 30px; + border: 1px solid cornsilk; + background-color: #e0d1d6; + margin-bottom: 30px; + margin-top: 5px; + height: 40px; + + box-shadow: 3px 2px 3px #d1cfe2; + } + + nav li { + color: rgb(95, 88, 88); + list-style-type: none; + display: inline-block; + padding-bottom: 10px; + font-weight: 700; + font-size: 16px; + text-shadow: 4px 2px 5px cornsilk; + } + + nav li:hover { + color: #a79aaf; + } + + main { + background-color: white; + } + + /* -----------------SECTION 1------------------*/ + + .nav-heading-text-image-box { + display: grid; + background-color: #a39196; + padding-bottom: 0px; + } + + .heading-text-image-box { + display: flex; + flex-direction: row-reverse; + align-items: center; + box-sizing: border-box; + } + + .main-image { + width: 500px; + height: 500px; + } + + .heading-text { + width: 80%; + } + .heading-text h1 { + text-align: right; + font-size: 70px; + padding: 15px; + color: rgb(52, 50, 53); + } + + .main-text p { + text-wrap: wrap; + font-size: 30px; + text-align: right; + padding: 10px; + color: rgb(63, 63, 63); + } + + /* -----------------SECTION 2------------------*/ + + .image-of-four { + box-sizing: border-box; + width: 100%; + height: 40%; + margin-top: 50px; + padding: 20px; + display: grid; + grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr; + grid-template-rows: 0fr 0fr 0fr 0fr; + column-gap: 30px; + } + + .image-of-four img { + width: 100%; + height: 100%; + } + + /* -----------------FOOTER-----------------*/ + + .info-contact { + text-align: center; + margin-bottom: 10px; + } + + footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; + } + + .footer-box { + display: flex; + flex-direction: row; + justify-content: center; + font-size: large; + margin-bottom: 0px; + padding: 20px; + } + + .footer-box p { + padding-left: 30px; + text-align: center; + } + + .copyright { + text-align: center; + } +} diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..2082ea39 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,141 @@ - - - - My form exercise - - - - + + + + My form exercise + + + + -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file +
+

Product Pick

+ +
+ + + +
+
+ + + + + + + + +

Confirm Your Name and Email

+ +
+ + + + + + + + + +

Choose Shirt Color

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ + +

Choose Shirt Size

+ +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +

Select Delivery Date

+
+ + +
+ + + +
+ +
+ + + + + + + + +
+
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..67319ee7 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,83 @@ +body { + font-family: Georgia, "Times New Roman", Times, serif; + color: white; + display: flex; + flex-direction: column; + align-items: center; + background-image: url("https://i.pinimg.com/736x/60/20/6d/60206d5bdac65259ed1bd1c202dee4e3.jpg"); + background-position: center; + background-size: cover, 10px; + background-repeat: no-repeat; +} + +form { + width: 100%; + padding: 30px; + background-color: rgba(82, 58, 22, 0.7); + border-radius: 5px; +} + +h1 { + margin-top: 2px; + font-size: 50px; + text-align: center; + color: black; + text-shadow: 2px 2px 7px white; +} +s h2 { + font-size: 25px; + margin-top: 5px; + color: rgb(255, 255, 255); +} + +h3 { + font-size: 25px; + margin-top: 5px; + color: rgb(245, 240, 240); +} + +label { + font-size: 23px; + color: orange; +} + +input { + margin-bottom: 15px; + accent-color: rgb(7, 7, 7); + font-size: 20px; +} + +#fullname { + width: 250px; + height: 30px; + margin-bottom: 15px; +} + +#email { + width: 250px; + height: 30px; + padding-left: 50px; +} + +#date { + font-size: 18px; + padding: 5px; +} + +.submit { + width: 130px; + height: 35px; + margin: 25px; + font-size: 19px; + background-color: white; + color: black; + border: 1px solid rgb(231, 202, 140); + border-radius: 4px; +} + +footer h2 { + margin-top: 40px; + font-size: 19px; + color: black; + font-weight: 800; +} diff --git a/MultiPage-Clone/.vscode/settings.json b/MultiPage-Clone/.vscode/settings.json new file mode 100644 index 00000000..a7d013cc --- /dev/null +++ b/MultiPage-Clone/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["juicebar", "PROBIOTIC"] +} diff --git a/MultiPage-Clone/css/main.css b/MultiPage-Clone/css/main.css index aa561706..8c9e9f06 100644 --- a/MultiPage-Clone/css/main.css +++ b/MultiPage-Clone/css/main.css @@ -1,3 +1,1015 @@ /* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ +/* Don't forget to link this file to your HTML in the */ + +* { + border: 0; + margin: 0; + box-sizing: border-box; +} + +body { + width: 100%; + height: 100vh; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +/* Header*/ + +header a { + text-decoration: none; + color: none; +} + +.menu-tab { + height: 70px; + background-color: var(--Black); +} + +.user-icon { + display: none; +} + +.menu-tab p { + color: var(--White); + text-align: center; + font-family: "Questrial"; + font-size: 30px; + font-weight: 300; + padding: 20px; +} + +.menu-icon { + width: 40px; +} + +.nav-tab { + display: flex; + justify-content: space-between; + padding: 10px; + margin-bottom: 20px; +} + +.nav-tab span { + font-family: "Questrial"; + font-size: 30px; + padding: 5px; +} + +.nav-tab a { + text-decoration: none; + color: var(--Black); +} + +/* -----------SECTION 1------------- */ + +.main-section-1 { + display: flex; + flex-direction: column; + align-items: center; +} + +.main-section-1 a { + text-decoration: none; + color: var(--Black); +} + +h1 { + font-family: "questrial"; + font-weight: 400; + font-size: 40px; + text-align: center; + margin-bottom: 25px; + margin-top: 30px; + width: 70%; +} + +h2 { + font-family: "questrial"; + font-size: 30px; + line-height: 50px; + font-weight: 100; + text-align: center; + margin-bottom: 25px; + width: 70%; +} + +button { + width: 240px; + height: 70px; + margin-bottom: 35px; + font-family: "Raleway"; + font-size: 20px; + background-color: var(--White); + border: 4px solid var(--Black); +} + +.main-section-1 button:hover { + color: var(--White); + background-color: var(--Black); +} + +/* -----------SECTION 2------------- */ + +.main-section-2 { + margin-bottom: 25px; +} + +.main-section-2 img { + width: 100%; + height: 450px; +} + +.main-section-2-text { + background-color: var(--Lilac); + font-family: "Raleway"; + + text-align: center; + padding: 20px; + font-size: 25px; +} + +/* -----------SECTION 3------------- */ + +.main-section-3 { + display: flex; + flex-direction: column; + align-items: center; +} + +.main-section-3 h2 { + width: 60%; + font-size: 40px; + text-wrap: wrap; + margin-top: 30px; + margin-bottom: 30px; +} +/* ----------SUB--SECTIONS------------- */ +.sub-section3-A, +.sub-section3-B, +.sub-section3-C { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 25px; + row-gap: 25px; +} + +/* ----------SUB-SECTION 3--IMAGES----------- */ + +.image-A { + width: 100px; + height: 100px; +} + +.image-B { + width: 100px; + height: 100px; +} + +.image-C { + width: 100px; + height: 100px; +} + +/* ----------SUB-SECTION 3--text----------- */ + +.sub-section3-A h3, +.sub-section3-B h3, +.sub-section3-C h3 { + font-size: 30px; + font-family: "Questrial"; + font-weight: 400; +} + +.sub-section3-A p, +.sub-section3-B p, +.sub-section3-C p { + font-size: 25px; + font-family: "Roboto"; + font-weight: 300; + line-height: 40px; + text-wrap: wrap; + width: 85%; +} + +/* --------------SECTION 4--------------- */ + +.main-section-4 { + background-color: var(--Light-Green); + display: flex; + flex-direction: column; + align-items: center; +} + +.main-section-4 img { + width: 90%; + margin-bottom: 30px; + margin-top: 40px; +} + +.sub-section-4 { + display: flex; + flex-direction: column; + align-items: center; +} + +.sub-section-4 h3 { + font-size: 45px; + font-family: "Questrial"; + font-weight: 200; + margin-top: 20px; + margin-bottom: 25px; + line-height: 55px; + text-align: center; + text-wrap: wrap; + align-self: center; + width: 80%; +} + +.sub-section-4 p { + width: 100%; + text-align: center; + font-size: 25px; + font-weight: 300; + font-family: "Roboto"; + line-height: 40px; + margin-bottom: 25px; +} + +.sub-section-4 button { + font-size: 25px; + width: 200px; + height: 70px; + font-family: "Raleway"; + margin-bottom: 40px; + background-color: var(--Light-Green); + border: 3px solid var(--Black); +} + +.sub-section-4 a { + text-decoration: none; + color: var(--Black); +} + +.sub-section-4 button:hover { + color: var(--White); + background-color: var(--Black); +} + +/* --------------SECTION 5--------------- */ + +.main-section-5 { + padding-top: 50px; + background-color: var(--Lilac); + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 40px; +} + +.main-section-5 img { + width: 90%; + height: 700px; + margin-bottom: 20px; +} + +.section-5-main-heading { + text-align: center; + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + margin-bottom: 60px; + margin-top: 50px; + width: 50%; +} + +.heading-box-5 { + display: flex; + flex-direction: row; + justify-content: center; +} + +/* ------------div--SECTION 5-------------- */ + +.section-5-div1, +.section-5-div2, +.section-5-div3 { + display: flex; + flex-direction: column; + align-items: center; +} + +/* ------------sUB--SECTION 5--PARAGRAPHS------------- */ + +.section-5-div1 p, +.section-5-div2 p, +.section-5-div3 p { + width: 50%; + font-size: 25px; + font-weight: 300; + line-height: 40px; + margin-bottom: 30px; + text-align: center; + text-wrap: wrap; + margin-top: 30px; + margin-bottom: 50px; +} + +/* ------------sUB--SECTION 5--HEADINGS------------- */ + +.section-5-div1 h3, +.section-5-div2 h3, +.section-5-div3 h3 { + font-family: "Questrial"; + font-size: 40px; + text-align: center; + font-weight: 500; + width: 50%; +} + +.section-5-div3 a { + text-decoration: none; + color: var(--Black); +} + +.main-section-5 button { + width: 200px; + height: 70px; + font-size: 25px; + font-family: "Raleway"; + padding: 10px; + background-color: var(--Lilac); +} + +.main-section-5 button:hover { + color: var(--White); + background-color: var(--Black); +} +/* --------------SECTION 6------------------ */ +.main-section-6 { + display: flex; + flex-direction: column; + align-items: center; +} +.main-section-6 img { + width: 95%; + height: 700px; + margin-top: 50px; + padding: 20px; +} + +.main-section-6 h3 { + font-size: 45px; + width: 50%; + text-align: center; + font-family: "Questrial"; + font-weight: 400; + margin-top: 50px; + margin-bottom: 50px; +} + +.main-section-6 p { + width: 80%; + font-size: 25px; + font-family: "Roboto"; + font-weight: 300; + line-height: 45px; + margin-bottom: 50px; + text-align: center; + text-wrap: wrap; + margin-top: 30px; +} + +.main-section-6 button:hover { + color: var(--White); + background-color: var(--Black); +} + +.sub-section-6 { + display: flex; + flex-direction: column; + align-items: center; +} + +/* --------------SECTION 7----------------- */ + +.main-section-7 { + background-color: var(--Light-Green); +} + +.main-section-7 img { + border-radius: 50%; + width: 100px; + height: 100px; + margin-top: 50px; +} + +.sub-section7-A, +.sub-section7-B, +.sub-section7-C { + display: flex; + flex-direction: column; + align-items: center; +} + +.sub-section7-A h3, +.sub-section7-B h3, +.sub-section7-C h3 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 20px; +} + +.sub-section7-A p, +.sub-section7-B p, +.sub-section7-C p { + width: 70%; + font-size: 25px; + font-family: "Roboto"; + font-weight: 300; + line-height: 45px; + margin-bottom: 30px; + text-align: center; + text-wrap: wrap; +} + +/* --------------SECTION 8----------------- */ + +.main-section-8 { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 40vh; +} + +.main-section-8 h3 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-top: 30px; + margin-bottom: 7px; +} + +.main-section-8 p { + width: 50%; + font-size: 25px; + font-family: "Roboto"; + font-weight: 300; + line-height: 45px; + margin-bottom: 30px; + text-align: center; + text-wrap: wrap; +} + +/* --------------FOOTER---------------- */ + +.image-container { + display: flex; + flex-direction: row; + justify-content: center; +} + +.footer-images { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + background-color: var(--Dark-Green); + position: relative; + top: 76px; + right: 20px; +} + +.footer-images img { + width: 100px; + height: 100px; +} + +.footer-image-1 { + position: relative; + left: 110px; + bottom: 20px; + transform: rotate(-45deg); +} + +.footer-image-2 { + position: relative; + bottom: 160px; + left: 10px; + transform: rotate(45deg); +} + +.footer-image-3 { + position: relative; + left: 54px; + bottom: 18px; + transform: rotate(45deg); + height: 270px; +} + +.footer-image-4 { + position: relative; + bottom: 160px; + right: 47px; + transform: rotate(-45deg); +} + +footer { + background-color: var(--Dark-Green); + color: var(--White); +} + +.footer-links a { + text-decoration: none; + color: var(--White); +} + +.footer-links { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 50px; + padding: 50px; +} +/* --------------GET STARTED--------------- */ + +.get-started h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} + +.get-started ul { + padding-left: 0; +} + +.get-started li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------CONNECT--------------- */ + +.connect h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} +.connect ul { + padding-left: 0; +} + +.connect li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------MAILING--------------- */ + +.Mailing { + margin-bottom: 70px; +} + +.Mailing h4 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-top: 50px; +} + +.Mailing label { + font-size: 25px; + font-weight: 400; + font-family: "Roboto"; + text-align: center; +} + +.mailing-subsection input { + border: none; + background-color: var(--Dark-Green); + border-bottom: 3px solid var(--White); + padding: 5px; + font-size: 20px; + outline: none; + color: var(--White); + width: 100%; + margin-top: 10px; +} + +.Mailing button { + background-color: var(--Dark-Green); + border: 4px solid var(--White); + color: var(--White); + font-size: 25px; + font-family: "Raleway"; + height: 70px; + margin-left: 20px; +} + +.Mailing button:hover { + color: var(--Black); + background-color: var(--White); +} + +.mailing-subsection { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 50px; + padding: 30px; +} +/* --------------LOGO SECTION--------------- */ + +.footer-logo { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + margin-bottom: 50px; +} + +.footer-logo img { + width: 150px; +} +.footer-logo h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: left; + text-decoration: underline; +} + +.footer-logo p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: left; +} + +.educational { + text-align: center; + margin-left: 20px; + padding: 30px; +} +/*--------------------------------LARGE SCREENS-----------------*/ + +@media (min-width: 768px) { + .user-icon img { + width: 30px; + height: 30px; + } + + .user-icon p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + } + + .user-icon { + width: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; + } + + .menu-tab { + width: 30%; + height: 90%; + } + + .user-icon-and-menu-tab { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 40%; + column-gap: 10px; + } + + .nav-tab { + display: flex; + flex-direction: row-reverse; + align-self: center; + justify-content: space-between; + width: 70%; + } + + .nav-tab span { + align-self: center; + position: relative; + right: 55px; + } + .nav-tab { + padding-left: 30px; + } + + header { + height: 10vh; + column-gap: 200px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + + /* -----------SECTION 1------------- */ + + .main-section-1 { + margin: 20px; + } + + .main-section-1 h1 { + font-size: 70px; + font-size: 56px; + margin-bottom: 10px; + } + + .main-section-1 h2 { + font-size: 25px; + margin-top: 10px; + margin-bottom: 50px; + } + + .main-section-1 button { + width: 270px; + height: 80px; + font-size: 18px; + font-weight: 500; + border: 2.5px solid var(--Black); + } + + /* -----------SECTION 2------------- */ + .main-section-2 img { + width: 100%; + min-height: 90vh; + } + + /* -----------SECTION 3------------- */ + + .main-section-3 h2 { + font-size: 60px; + margin-bottom: 45px; + } + + .sub-section-3 { + display: grid; + grid-template-columns: 2fr 2fr 2fr; + margin-bottom: 100px; + margin-top: 40px; + } + + .sub-section3-A p, + .sub-section3-B p, + .sub-section3-C p { + width: 40%; + text-align: left; + font-size: 20px; + } + + .sub-section3-A h3 { + width: 50%; + text-align: center; + font-size: 35px; + } + + .sub-section3-B h3, + .sub-section3-C h3 { + width: 60%; + text-align: center; + font-size: 35px; + } + + .sub-section3-A img, + .sub-section3-B img, + .sub-section3-C img { + margin-top: 30px; + } + + /* -----------SECTION 4------------ */ + + .main-section-4 img { + width: 600px; + height: 60vh; + position: relative; + top: 100px; + } + + .main-section-4 { + display: flex; + flex-direction: row; + justify-content: center; + height: 70vh; + } + + .sub-section-4 { + width: 40%; + align-self: flex-end; + column-gap: 100px; + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + left: 130px; + } + + .sub-section-4 h3 { + font-size: 60px; + line-height: 70px; + } + .sub-section-4 p { + font-size: 17px; + line-height: auto; + } + + /* -----------SECTION 5------------ */ + + .main-section-5 { + background-color: var(--White); + } + .section-5-main-heading { + font-size: 50px; + text-align: center; + margin-top: 100px; + margin-bottom: 100px; + } + + .section5-grouped-images { + height: 80vh; + display: flex; + flex-direction: row; + justify-content: center; + background-color: var(--Lilac); + } + + .heading-box-5 { + width: 100%; + height: 30vh; + background-color: var(--White); + margin-top: 20px; + } + + .main-section-5 img { + width: 55%; + height: 35vh; + } + + .section-5-div2 h3, + .section-5-div2 p, + .section-5-div2 img { + position: relative; + bottom: 100px; + } + + .section-5-div1 h3, + .section-5-div3 h3, + .section-5-div1 p, + .section-5-div3 p, + .section-5-div1 img, + .section-5-div3 img { + position: relative; + bottom: 60px; + } + + .section-5-div1 p, + .section-5-div2 p, + .section-5-div3 p { + font-size: 20px; + font-family: "Roboto"; + font-weight: 300; + } + + .main-section-5 button { + position: relative; + bottom: 110px; + width: 240px; + height: 70px; + border: 2.5px solid var(--Black); + } + + /* -----------SECTION 6------------ */ + + .main-section-6 h3 { + font-size: 50px; + } + .main-section-6 img { + width: 600px; + height: 600px; + } + + .subsection-6-container { + display: flex; + flex-direction: row; + justify-content: center; + width: 70%; + margin-left: 150px; + } + + .sub-section-6 { + display: flex; + flex-direction: column; + align-items: flex-start; + padding-top: 0px; + padding: 100px; + } + + .sub-section-6 h3, + .sub-section-6 p { + text-align: left; + width: 90%; + } + + /* -----------SECTION 7------------ */ + + .main-section-7 { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + + .sub-section7-A, + .sub-section7-B, + .sub-section7-C { + display: flex; + align-items: flex-start; + margin: 100px; + } + + .sub-section7-A p, + .sub-section7-B p, + .sub-section7-C p { + text-align: left; + } + + /* -----------FOOTER------------ */ + .footer-links-container { + display: grid; + grid-template-columns: 2fr 2fr 2fr; + column-gap: 70px; + position: relative; + top: 80px; + } + + .footer-links { + align-self: flex-start; + } + + .mailing-subsection input { + width: 250px; + } + + .Mailing button { + width: 150px; + position: relative; + left: 100px; + } + + .Mailing { + position: relative; + top: 40px; + } + + .footer-logo h4 { + font-size: 25px; + } + .footer-logo { + position: relative; + top: 90px; + } + + .educational { + font-size: 20px; + color: var(--White); + text-align: center; + } + + footer { + background-color: var(--Dark-Green); + height: 100vh; + margin-top: 70px; + } +} diff --git a/MultiPage-Clone/history.css b/MultiPage-Clone/history.css new file mode 100644 index 00000000..64a006f3 --- /dev/null +++ b/MultiPage-Clone/history.css @@ -0,0 +1,428 @@ +* { + border: 0; + margin: 0; + box-sizing: border-box; +} + +body { + width: 100%; + height: 100vh; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +/* Header*/ + +.user-icon { + display: none; +} + +.menu-tab { + height: 70px; + background-color: var(--Black); +} + +header a { + text-decoration: none; + color: none; +} + +.menu-tab p { + color: var(--White); + text-align: center; + font-family: "Questrial"; + font-size: 30px; + font-weight: 300; + padding: 20px; +} + +.menu-icon { + width: 40px; +} + +.nav-tab { + display: flex; + justify-content: space-between; + padding: 10px; + margin-bottom: 20px; +} + +.nav-tab a { + text-decoration: none; + color: var(--Black); +} + +.nav-tab span { + font-family: "Questrial"; + font-size: 30px; + padding: 5px; + text-align: center; +} + +/* Main*/ + +main { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +main h1 { + font-family: "Questrial"; + font-weight: 400; + font-size: 35px; + text-align: center; + margin-bottom: 25px; + margin-top: 50px; +} +main p { + width: 70%; + font-size: 25px; + font-weight: 300; + font-family: "Roboto"; + line-height: 40px; + margin-bottom: 100px; + text-wrap: wrap; + text-align: center; +} + +main img { + width: 100%; +} + +.image-container { + margin: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + column-gap: 20px; + row-gap: 20px; + padding: 30px; + margin-bottom: 40px; +} + +.pear-img, +.fruit-in-sack-img, +.hand-and-beetroot-img, +.fruit-in-a-hanging-sack-img { + width: 250px; + height: 250px; +} + +.pear-img { + position: relative; + bottom: 50px; +} + +.hand-and-beetroot-img { + position: relative; + top: 50px; +} + +/*-------FOOTER----*/ + +footer { + background-color: var(--Dark-Green); + color: var(--White); +} + +.footer-links a { + text-decoration: none; + color: var(--White); +} + +.footer-links { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 50px; + padding: 50px; +} +/* --------------GET STARTED--------------- */ + +.get-started h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} + +.get-started ul { + padding-left: 0; +} + +.get-started li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------CONNECT--------------- */ + +.connect h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} +.connect ul { + padding-left: 0; +} + +.connect li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------MAILING--------------- */ + +.Mailing { + margin-bottom: 70px; +} + +.Mailing h4 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-top: 50px; +} + +.Mailing label { + font-size: 20px; + font-weight: 400; + font-family: "Roboto"; + text-align: center; +} + +.mailing-subsection input { + border: none; + background-color: var(--Dark-Green); + border-bottom: 3px solid var(--White); + padding: 5px; + font-size: 20px; + outline: none; + color: var(--White); + width: 100%; + margin-top: 10px; +} +.Mailing input:focus { + border-bottom: 2px solid var(--White); +} + +.Mailing button { + background-color: var(--Dark-Green); + border: 4px solid var(--White); + color: var(--White); + font-size: 25px; + font-family: "Raleway"; + height: 70px; + margin-left: 20px; +} + +.mailing-subsection { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 50px; + padding: 30px; +} +/* --------------LOGO SECTION--------------- */ + +.footer-logo { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + margin-bottom: 50px; +} + +.footer-logo img { + width: 150px; +} +.footer-logo h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: left; + text-decoration: underline; +} + +.footer-logo p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: left; +} + +.educational { + text-align: center; + margin-left: 20px; + padding: 30px; +} + +/* --------------------------LARGE QUERIES-------------- */ + +@media (min-width: 768px) { + .user-icon img { + width: 30px; + height: 30px; + } + + .user-icon p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + } + + .user-icon { + width: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; + } + + .menu-tab { + width: 30%; + height: 90%; + } + + .user-icon-and-menu-tab { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 40%; + column-gap: 10px; + } + + .nav-tab { + display: flex; + flex-direction: row-reverse; + align-self: center; + justify-content: space-between; + width: 70%; + } + + .nav-tab span { + align-self: center; + position: relative; + right: 55px; + } + + header { + height: 10vh; + column-gap: 200px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + + /* --------------MAIN-------------- */ + + main p { + width: 40%; + margin-bottom: 40px; + font-size: 20px; + } + + main img { + width: 100%; + height: 80vh; + } + + main h1 { + font-size: 60px; + font-family: "Questrial"; + margin-top: 70px; + margin-bottom: 70px; + } + + .image-container { + height: 50vh; + display: flex; + flex-direction: row; + justify-content: space-evenly; + column-gap: 200px; + margin-top: 150px; + } + + .pear-img, + .fruit-in-a-hanging-sack-img { + position: relative; + bottom: 50px; + height: 35vh; + } + + .fruit-in-sack-img, + .hand-and-beetroot-img { + position: relative; + top: 50px; + height: 40vh; + } + + /* -------------------FOOTER------------- */ + .footer-links-container { + display: grid; + grid-template-columns: 2fr 2fr 2fr; + column-gap: 70px; + position: relative; + top: 80px; + } + + .footer-links { + align-self: flex-start; + } + + .mailing-subsection input { + width: 250px; + } + + .Mailing button { + width: 150px; + position: relative; + left: 100px; + } + + .Mailing { + position: relative; + top: 40px; + } + + .footer-logo h4 { + font-size: 25px; + } + .footer-logo { + position: relative; + top: 90px; + } + .educational { + font-size: 20px; + color: var(--White); + text-align: center; + } + + footer { + background-color: var(--Dark-Green); + height: 100vh; + margin-top: 70px; + } +} diff --git a/MultiPage-Clone/history.html b/MultiPage-Clone/history.html new file mode 100644 index 00000000..a80953cb --- /dev/null +++ b/MultiPage-Clone/history.html @@ -0,0 +1,196 @@ + + + + + + + + + + + + + + + + + + + + + Responsive grid project + + + +
+
+
+ a photo of a user icon +

LogIn

+
+ +
+

Menu

 +
+
+ + +
+
+

Wellbeing is Our Passion

+ +

+ 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 user know a little more about you. +

+ +

+ 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 user know a little more about you. +

+ + an image of green fruits on a green background + +

Farm to Bottle in Less Than a Day

+

+ 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 user know a little more about you. +

+ +
+ An image of a hand giving pear to another hand + + Image of fruit in sack + + An image of fruits in a hanging sack + an image of a hand and 3 beetroots +
+
+ + + + diff --git a/MultiPage-Clone/images/01.png b/MultiPage-Clone/images/01.png new file mode 100644 index 00000000..caf4b9ed Binary files /dev/null and b/MultiPage-Clone/images/01.png differ diff --git a/MultiPage-Clone/images/02.png b/MultiPage-Clone/images/02.png new file mode 100644 index 00000000..ddea2c73 Binary files /dev/null and b/MultiPage-Clone/images/02.png differ diff --git a/MultiPage-Clone/images/03.png b/MultiPage-Clone/images/03.png new file mode 100644 index 00000000..ef9d285a Binary files /dev/null and b/MultiPage-Clone/images/03.png differ diff --git a/MultiPage-Clone/images/J.png b/MultiPage-Clone/images/J.png new file mode 100644 index 00000000..1f9831c4 Binary files /dev/null and b/MultiPage-Clone/images/J.png differ diff --git a/MultiPage-Clone/images/beet-root.jpeg b/MultiPage-Clone/images/beet-root.jpeg new file mode 100644 index 00000000..b34947ae Binary files /dev/null and b/MultiPage-Clone/images/beet-root.jpeg differ diff --git a/MultiPage-Clone/images/berryboost.webp b/MultiPage-Clone/images/berryboost.webp new file mode 100644 index 00000000..d4441fa7 Binary files /dev/null and b/MultiPage-Clone/images/berryboost.webp differ diff --git a/MultiPage-Clone/images/cleanse-kit01.webp b/MultiPage-Clone/images/cleanse-kit01.webp new file mode 100644 index 00000000..ba657058 Binary files /dev/null and b/MultiPage-Clone/images/cleanse-kit01.webp differ diff --git a/MultiPage-Clone/images/cleanse-kit02.webp b/MultiPage-Clone/images/cleanse-kit02.webp new file mode 100644 index 00000000..9c9b453a Binary files /dev/null and b/MultiPage-Clone/images/cleanse-kit02.webp differ diff --git a/MultiPage-Clone/images/cleanse-kit03.webp b/MultiPage-Clone/images/cleanse-kit03.webp new file mode 100644 index 00000000..9562fe1e Binary files /dev/null and b/MultiPage-Clone/images/cleanse-kit03.webp differ diff --git a/MultiPage-Clone/images/close-icon.png b/MultiPage-Clone/images/close-icon.png new file mode 100644 index 00000000..5902a35e Binary files /dev/null and b/MultiPage-Clone/images/close-icon.png differ diff --git a/MultiPage-Clone/images/containerjuice.png b/MultiPage-Clone/images/containerjuice.png new file mode 100644 index 00000000..9f926909 Binary files /dev/null and b/MultiPage-Clone/images/containerjuice.png differ diff --git a/MultiPage-Clone/images/detoxglory.webp b/MultiPage-Clone/images/detoxglory.webp new file mode 100644 index 00000000..ea40a298 Binary files /dev/null and b/MultiPage-Clone/images/detoxglory.webp differ diff --git a/MultiPage-Clone/images/download.png b/MultiPage-Clone/images/download.png new file mode 100644 index 00000000..b050c616 Binary files /dev/null and b/MultiPage-Clone/images/download.png differ diff --git a/MultiPage-Clone/images/energizer.webp b/MultiPage-Clone/images/energizer.webp new file mode 100644 index 00000000..8eefe4e9 Binary files /dev/null and b/MultiPage-Clone/images/energizer.webp differ diff --git a/MultiPage-Clone/images/fruit-in-sack.jpeg b/MultiPage-Clone/images/fruit-in-sack.jpeg new file mode 100644 index 00000000..5f76c9fd Binary files /dev/null and b/MultiPage-Clone/images/fruit-in-sack.jpeg differ diff --git a/MultiPage-Clone/images/green-juice.png b/MultiPage-Clone/images/green-juice.png new file mode 100644 index 00000000..34e9ca80 Binary files /dev/null and b/MultiPage-Clone/images/green-juice.png differ diff --git a/MultiPage-Clone/images/hanging-sack.jpeg b/MultiPage-Clone/images/hanging-sack.jpeg new file mode 100644 index 00000000..203b7299 Binary files /dev/null and b/MultiPage-Clone/images/hanging-sack.jpeg differ diff --git a/MultiPage-Clone/images/historymain.webp b/MultiPage-Clone/images/historymain.webp new file mode 100644 index 00000000..0c6d3982 Binary files /dev/null and b/MultiPage-Clone/images/historymain.webp differ diff --git a/MultiPage-Clone/images/icon-flame.jpg b/MultiPage-Clone/images/icon-flame.jpg new file mode 100644 index 00000000..48a8e8a7 Binary files /dev/null and b/MultiPage-Clone/images/icon-flame.jpg differ diff --git a/MultiPage-Clone/images/icon-leaf.jpg b/MultiPage-Clone/images/icon-leaf.jpg new file mode 100644 index 00000000..0957e152 Binary files /dev/null and b/MultiPage-Clone/images/icon-leaf.jpg differ diff --git a/MultiPage-Clone/images/icon-lemon.jpg b/MultiPage-Clone/images/icon-lemon.jpg new file mode 100644 index 00000000..3a998510 Binary files /dev/null and b/MultiPage-Clone/images/icon-lemon.jpg differ diff --git a/MultiPage-Clone/images/immune-x.webp b/MultiPage-Clone/images/immune-x.webp new file mode 100644 index 00000000..dbfc9949 Binary files /dev/null and b/MultiPage-Clone/images/immune-x.webp differ diff --git a/MultiPage-Clone/images/lemongreen.png b/MultiPage-Clone/images/lemongreen.png new file mode 100644 index 00000000..66e9d71a Binary files /dev/null and b/MultiPage-Clone/images/lemongreen.png differ diff --git a/MultiPage-Clone/images/locationmain.webp b/MultiPage-Clone/images/locationmain.webp new file mode 100644 index 00000000..2296b586 Binary files /dev/null and b/MultiPage-Clone/images/locationmain.webp differ diff --git a/MultiPage-Clone/images/main-image.png b/MultiPage-Clone/images/main-image.png new file mode 100644 index 00000000..deba29e4 Binary files /dev/null and b/MultiPage-Clone/images/main-image.png differ diff --git a/MultiPage-Clone/images/orange-juice.png b/MultiPage-Clone/images/orange-juice.png new file mode 100644 index 00000000..1352934b Binary files /dev/null and b/MultiPage-Clone/images/orange-juice.png differ diff --git a/MultiPage-Clone/images/pawpaw.png b/MultiPage-Clone/images/pawpaw.png new file mode 100644 index 00000000..6f85ae57 Binary files /dev/null and b/MultiPage-Clone/images/pawpaw.png differ diff --git a/MultiPage-Clone/images/peach.png b/MultiPage-Clone/images/peach.png new file mode 100644 index 00000000..85a4b5c6 Binary files /dev/null and b/MultiPage-Clone/images/peach.png differ diff --git a/MultiPage-Clone/images/pear.jpeg b/MultiPage-Clone/images/pear.jpeg new file mode 100644 index 00000000..cf3cef9a Binary files /dev/null and b/MultiPage-Clone/images/pear.jpeg differ diff --git a/MultiPage-Clone/images/pro-vitality.webp b/MultiPage-Clone/images/pro-vitality.webp new file mode 100644 index 00000000..b365b4cc Binary files /dev/null and b/MultiPage-Clone/images/pro-vitality.webp differ diff --git a/MultiPage-Clone/images/probiotic-x.webp b/MultiPage-Clone/images/probiotic-x.webp new file mode 100644 index 00000000..4492b054 Binary files /dev/null and b/MultiPage-Clone/images/probiotic-x.webp differ diff --git a/MultiPage-Clone/images/roots-fusion.webp b/MultiPage-Clone/images/roots-fusion.webp new file mode 100644 index 00000000..d322e342 Binary files /dev/null and b/MultiPage-Clone/images/roots-fusion.webp differ diff --git a/MultiPage-Clone/images/tangerine.webp b/MultiPage-Clone/images/tangerine.webp new file mode 100644 index 00000000..2955806f Binary files /dev/null and b/MultiPage-Clone/images/tangerine.webp differ diff --git a/MultiPage-Clone/images/the-defender.webp b/MultiPage-Clone/images/the-defender.webp new file mode 100644 index 00000000..82cb125d Binary files /dev/null and b/MultiPage-Clone/images/the-defender.webp differ diff --git a/MultiPage-Clone/images/user-icon.jpg b/MultiPage-Clone/images/user-icon.jpg new file mode 100644 index 00000000..db3e21b1 Binary files /dev/null and b/MultiPage-Clone/images/user-icon.jpg differ diff --git a/MultiPage-Clone/images/watermelon.png b/MultiPage-Clone/images/watermelon.png new file mode 100644 index 00000000..765a3fd5 Binary files /dev/null and b/MultiPage-Clone/images/watermelon.png differ diff --git a/MultiPage-Clone/images/womanwithfruits.png b/MultiPage-Clone/images/womanwithfruits.png new file mode 100644 index 00000000..eba9f2ca Binary files /dev/null and b/MultiPage-Clone/images/womanwithfruits.png differ diff --git a/MultiPage-Clone/index.html b/MultiPage-Clone/index.html index cd704c69..b8a1a006 100644 --- a/MultiPage-Clone/index.html +++ b/MultiPage-Clone/index.html @@ -1,21 +1,444 @@ - - - - + + + + + + + + - Responsive grid project - + + + + + + + - + Responsive grid project + + + +
+
+
+ + a photo of a user icon +

LogIn

+
+ + + + +
+ +

Menu

 +
+
+ + + +
+ + + + +
+ + +
+

+ Fuel Your Body. + Balance Your Mind. +

+ +

+ Organic Cold Pressed + Juices & Smoothies +

+ + + +
+ + + +
+ an image of an orange and pawpaw with fresh juice in bottles + +
+

Get 10% off your first Online Order.

+ +

Try Now

+ +
+
+ + +
+

What Makes Us + Different

+ + + +
+
+ an icon flame +

Locally Secured

+

+ I'm a paragraph.Click here to add your own text and edit me. + Let your users get to know you. +

+
+ +
+ a lemon icon +

100% Natural Ingredients

+

+ I'm a paragraph.Click here to add your own text and edit me. + Let your users get to know you. +

+
+ + + +
+ a leaf tree icon +

Just Picked Freshness

+

+ I'm a paragraph.Click here to add your own text and edit me. + Let your users get to know you. +

+
+ +
+
+ + +
+ a picture of an orange and avocado fruits + +
+

Boosting + Immunity The Way + Nature Intended +

+ 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.I'm a great place for you to + tell a story and let your users know a little more about you. +

+ + + +

+
+ + + +
+ + +
+

Choose Your Wellness Path

+ +
+
+
+ bottles of orange juice with orange fruits in a sack + +

Pure Hydration with Cold Pressed Juices

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+ +
+ a photo of watermelon and fresh bottled watermelon juice + +

Soft & Creamy Organic Smoothies

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+ +
+ An image with small bottles of green fresh Juice +

The Power of Wellness Shots

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+
+ + + + +
+ + +
+
+ A container with bottles of fresh juice + +
+

Discover Our Special Cleanse Kit

+ +

+ 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.I'm a great place for you to tell a story + and let your users know a little more about you. +

+ + + + + + + +
+ +
+

Get Juice Bar

+
+ + + +
+
+ +

Local Delivery

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+ +
+ +

In Store PIck Up

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+ +
+ +

Curbside PIck Up

+

+ I'm a paragraph.Click here to add your own text and edit me.Let your + users get to know you. +

+
+
+ + +
+

Follow Us

+ +

@juicebar

+
+
+ + + + + - \ No newline at end of file + + + diff --git a/MultiPage-Clone/location.css b/MultiPage-Clone/location.css new file mode 100644 index 00000000..1de4d848 --- /dev/null +++ b/MultiPage-Clone/location.css @@ -0,0 +1,590 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body { + width: 100%; + height: 100vh; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +/*-- ---------------HEADER---------------*/ + +.user-icon { + display: none; +} + +.menu-tab { + height: 70px; + background-color: var(--Black); +} + +.menu-tab p { + color: var(--White); + text-align: center; + font-family: "Questrial"; + font-size: 30px; + font-weight: 300; + padding: 20px; +} + +header a { + text-decoration: none; + color: none; +} + +.menu-icon { + width: 40px; +} + +.nav-tab { + display: flex; + justify-content: space-between; + padding: 10px; + margin-bottom: 20px; +} + +.nav-tab a { + text-decoration: none; + color: var(--Black); +} + +.nav-tab span { + font-family: "Questrial"; + font-size: 30px; + padding: 5px; +} + +/*-- ---------------MAIN---------------*/ + +main { + display: flex; + flex-direction: column; + align-items: center; +} + +h1 { + font-family: "questrial"; + font-weight: 500; + font-size: 40px; + text-align: center; + margin-bottom: 25px; + margin-top: 25px; +} + +.address-1, +.address-2, +.address-3 { + margin-bottom: 50px; + margin-top: 60px; +} + +.address-1 h2, +.address-2 h2, +.address-3 h2 { + font-weight: 500; + font-size: 30px; + text-align: center; + font-family: "questrial"; + margin-bottom: 25px; + margin-top: 25px; +} + +.address-1 p, +.address-2 p, +.address-3 p { + font-size: 23px; + font-family: "Roboto"; + font-weight: 300; + line-height: 40px; + text-wrap: wrap; + width: 100%; + text-align: center; +} + +.image-box { + width: 100%; + margin-bottom: 30px; +} + +.location-main { + width: 100%; + height: 450px; +} + +.Contact-us { + font-family: "questrial"; + font-weight: 500; + font-size: 40px; + text-align: center; + margin-top: 25px; + margin-bottom: 25px; +} + +.contact-form h4 { + font-size: 30px; + text-wrap: wrap; + font-family: "questrial"; + font-weight: 100; + text-align: center; + margin-bottom: 25px; +} + +form { + padding: 20px; + width: 80%; + padding: 50px; +} + +form p { + font-size: 20px; + font-weight: 300; + padding-bottom: 25px; + font-family: "Roboto"; + width: 70%; + text-align: center; + margin-bottom: 40px; + position: relative; + left: 80px; +} + +.contact-form { + display: flex; + flex-direction: column; + align-items: center; +} + +.first-name-box label, +.last-name-box label, +.email-box label, +.comment-box label { + font-size: 25px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-top: 20px; +} + +.first-name-box input, +.last-name-box input, +.email-box input { + border: none; + outline: none; + border-bottom: 3px solid var(--Black); + padding: 5px; + font-size: 20px; + color: var(--Black); + width: 100%; + margin-top: 10px; + margin-bottom: 20px; +} + +.comment-box textarea { + border: none; + border-bottom: 3px solid var(--Medium-Green); + padding: 5px; + font-size: 20px; + color: var(--Black); + width: 100%; + margin-top: 20px; + margin-bottom: 20px; +} + +.submit-button button { + margin-left: 27px; + font-size: 20px; + width: 90%; + height: 80px; + color: var(--White); + font-family: "Raleway"; + margin-bottom: 40px; + background-color: var(--Black); + border: 3px solid var(--White); +} + +.contact-info h4, +.address-info h4 { + font-size: 30px; + font-family: "questrial"; + font-weight: 100; + text-align: center; + margin-bottom: 7px; + margin-top: 30px; +} + +.contact-info p, +.address-info p { + font-size: 23px; + font-family: "Roboto"; + font-weight: 300; + line-height: 40px; + text-wrap: wrap; + width: 100%; + text-align: center; +} + +hr { + display: none; +} + +/*-- ----------------FOOTER----------------*/ + +footer { + background-color: var(--Dark-Green); + color: var(--White); +} + +.footer-links a { + text-decoration: none; + color: var(--White); +} + +.footer-links { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 50px; + padding: 50px; +} +/* --------------GET STARTED--------------- */ + +.get-started h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} + +.get-started ul { + padding-left: 0; +} + +.get-started li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------CONNECT--------------- */ + +.connect h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} +.connect ul { + padding-left: 0; +} + +.connect li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------MAILING--------------- */ + +.Mailing { + margin-bottom: 70px; +} + +.Mailing h4 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-top: 50px; +} + +.Mailing label { + font-size: 20px; + font-weight: 400; + font-family: "Roboto"; + text-align: center; +} + +.mailing-subsection input { + border: none; + background-color: var(--Dark-Green); + border-bottom: 3px solid var(--White); + padding: 5px; + font-size: 20px; + color: var(--White); + width: 100%; + margin-top: 10px; +} + +.Mailing button { + background-color: var(--Dark-Green); + border: 4px solid var(--White); + color: var(--White); + font-size: 25px; + font-family: "Raleway"; + height: 70px; + margin-left: 20px; +} + +.mailing-subsection { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 50px; + padding: 30px; +} +/* --------------LOGO SECTION--------------- */ + +.footer-logo { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + margin-bottom: 50px; +} + +.footer-logo img { + width: 150px; +} +.footer-logo h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: left; + text-decoration: underline; +} + +.footer-logo p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: left; +} + +.educational { + text-align: center; + margin-left: 20px; + padding: 30px; +} + +/* -------------LARGER SCREEN-------------- */ + +@media (min-width: 768px) { + .user-icon img { + width: 30px; + height: 30px; + } + + .user-icon p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + } + + .user-icon { + width: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; + } + + .menu-tab { + width: 30%; + height: 90%; + } + + .user-icon-and-menu-tab { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 40%; + column-gap: 10px; + } + + .nav-tab { + display: flex; + flex-direction: row-reverse; + align-self: center; + justify-content: space-between; + width: 70%; + } + + .nav-tab span { + align-self: center; + position: relative; + right: 100px; + } + + header { + height: 10vh; + column-gap: 200px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + + /* -----------MAIN------------- */ + main { + margin-top: 40px; + } + + main h1 { + font-size: 70px; + margin-bottom: 70px; + } + + main h2 { + font-size: 20px; + font-weight: 300; + } + + main p { + font-size: 19px; + width: 40%; + } + + .first-last-name { + display: flex; + flex-direction: row; + justify-content: space-between; + column-gap: 30px; + margin-top: 30px; + } + .address-box { + display: flex; + flex-direction: row; + column-gap: 300px; + margin-bottom: 30px; + } + + .address-1 p, + .address-2 p, + .address-3 p { + text-align: left; + margin-bottom: 7px; + font-size: 19px; + } + + .address-1 h2, + .address-2 h2, + .address-3 h2 { + font-size: 23px; + text-align: left; + font-weight: 200; + } + + .image-box img { + width: 100%; + height: 70vh; + } + + .Contact-us { + font-size: 60px; + margin-bottom: 70px; + } + + .form-button-contact-address-info { + display: flex; + flex-direction: row; + } + + form p { + font-size: 30px; + font-weight: 300; + padding-bottom: 25px; + width: 100%; + font-family: "Roboto"; + } + + hr { + display: inline; + border: 1px solid var(--Black); + position: relative; + right: 50px; + bottom: 10px; + } + + .contact-info { + margin-bottom: 100px; + } + + .contact-and-address { + margin-left: 25px; + } + + .address-info p, + .contact-info p { + font-size: 19px; + text-align: left; + } + + .submit-button { + width: 300px; + } + + /* -----------FOOTER------------ */ + + .footer-links-container { + display: grid; + grid-template-columns: 2fr 2fr 2fr; + column-gap: 70px; + position: relative; + top: 80px; + } + + .footer-links { + align-self: flex-start; + } + + .mailing-subsection input { + width: 250px; + } + + .Mailing button { + width: 150px; + position: relative; + left: 100px; + } + + .Mailing { + position: relative; + top: 40px; + } + + .footer-logo h4 { + font-size: 25px; + } + .footer-logo { + position: relative; + top: 90px; + } + .educational { + font-size: 20px; + color: var(--White); + text-align: center; + } + + footer { + background-color: var(--Dark-Green); + height: 100vh; + margin-top: 70px; + } +} diff --git a/MultiPage-Clone/location.html b/MultiPage-Clone/location.html new file mode 100644 index 00000000..58325ff1 --- /dev/null +++ b/MultiPage-Clone/location.html @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + Responsive grid project + + + + +
+
+
+ + a photo of a user icon + +

LogIn

+
+ +
+

Menu

 +
+
+ + +
+ +
+

Location & Hours

+ +
+
+

+ 5OO Terry Francine St. +
+ San Francisco, CA 94158 +

+ +

Open Daily: 10AM-9PM

+

info@mysite.com

+

Tel: 123-456-7890

+
+ +
+

+ 5OO Terry Francine St. +
+ San Francisco, CA 94158 +

+ +

Open Daily: 10AM-9PM

+

info@mysite.com

+

Tel: 123-456-7890

+
+ +
+

+ 5OO Terry Francine St. +
+ San Francisco, CA 94158 +

+ +

Open Daily: 10AM-9PM

+

info@mysite.com

+

Tel: 123-456-7890

+
+
+ +
+ an images of bottle juice and watermelon +
+ +
+

Contact us

+ +
+
+
+

Fill out the form and we will get back to you

+
+
+ + +
+ +
+ + +
+
+ + + +
+ + +
+
+ +
+ +
+
+ +
+
+
+

Contact Juice Bar

+

info@mysitte.com

+

Tel: 123-456-7890

+
+ +
+

Locate Juice Bar

+

5OO Terry Francine St.

+

San Francisco, CA 94158

+
+
+
+
+
+ + + + diff --git a/MultiPage-Clone/logIn.css b/MultiPage-Clone/logIn.css new file mode 100644 index 00000000..51c37712 --- /dev/null +++ b/MultiPage-Clone/logIn.css @@ -0,0 +1,60 @@ +* { + border: 0; + margin: 0; + box-sizing: border-box; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +body { + padding: 30px; +} + +header img { + width: 30px; + height: 30px; + margin-right: 30px; + margin-top: 30px; +} + +header { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +main { + padding: 30px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 40px; + row-gap: 30px; +} + +main h1 { + font-size: 50px; +} + +main p { + font-size: 20px; + width: 70%; + text-align: center; + font-family: "Roboto"; + font-weight: 300; +} + +main button { + font-size: 25px; + color: var(--White); + width: 300px; + height: 90px; + background-color: var(--Medium-Green); +} diff --git a/MultiPage-Clone/logIn.html b/MultiPage-Clone/logIn.html new file mode 100644 index 00000000..6db61d73 --- /dev/null +++ b/MultiPage-Clone/logIn.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+

Demo Mode

+

To customize this template, start by editing it

+ + + + +
+ + + + + diff --git a/MultiPage-Clone/menu.css b/MultiPage-Clone/menu.css new file mode 100644 index 00000000..e1ab1b99 --- /dev/null +++ b/MultiPage-Clone/menu.css @@ -0,0 +1,559 @@ +* { + border: 0; + margin: 0; + box-sizing: border-box; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +body { + background-color: var(--Light-Green); +} + +/* Header*/ + +header { + background-color: var(--White); + height: 250px; +} + +header a { + text-decoration: none; +} + +.menu-tab { + height: 60px; + background-color: var(--Black); +} + +.nav-tab a { + text-decoration: none; + color: var(--Black); +} +.menu-tab p { + color: var(--White); + text-align: center; + font-family: "Questrial"; + font-size: 30px; + padding-top: 15px; +} + +.menu-icon { + width: 40px; +} + +.nav-tab { + display: flex; + justify-content: space-between; + padding: 10px; + margin-bottom: 20px; +} + +.nav-tab span { + font-family: "Questrial"; + font-size: 27px; + padding: 5px; +} + +.user-icon { + display: none; +} +/*---------------------MAIN--------------*/ + +.menu-content { + background-color: var(--Light-Green); + padding-top: 50px; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 50px; + padding-bottom: 50px; + padding-left: 40px; + padding-right: 40px; + + background-color: var(--Light-Green); +} + +/*--------------------- SECTIONs--------------*/ + +h1 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + text-wrap: wrap; + padding-bottom: 50px; + background-color: var(--White); +} + +.menu-section-A h2 { + font-size: 40px; + font-weight: 500; + font-family: "Questrial"; + text-align: center; + margin-bottom: 30px; +} + +.menu-section-A h3, +.menu-section-B h3, +.menu-section-C h3, +.menu-section-D h3 { + font-size: 28px; + font-weight: 500; + font-family: "Questrial"; + text-align: center; + margin-bottom: 24px; + margin-top: 80px; +} + +.cleanse-kit-1-container img, +.cleanse-kit-2-container img, +.cleanse-kit-3-container img, +.tangerine-container img, +.detox-glory-container img, +.immune-x-container img, +.energizer-container img, +.roots-fusion-container img, +.berry-boost-container img, +.probiotic-x-container img, +.the-defender-container img, +.pro-vitality-container img { + width: 100%; + height: 400px; + margin-top: 40px; +} + +.cleanse-kit-1-container h4, +.cleanse-kit-2-container h4, +.cleanse-kit-3-container h4, +.tangerine-container h4, +.detox-glory-container h4, +.immune-x-container h4, +.energizer-container h4, +.roots-fusion-container h4, +.berry-boost-container h4, +.probiotic-x-container h4, +.the-defender-container h4, +.pro-vitality-container h4 { + font-size: 24px; + font-weight: 500; + font-family: "Questrial"; + margin-bottom: 15px; + margin-top: 15px; + text-align: center; +} + +.cleanse-kit-1-container p, +.cleanse-kit-2-container p, +.cleanse-kit-3-container p, +.tangerine-container p, +.detox-glory-container p, +.immune-x-container p, +.energizer-container p, +.roots-fusion-container p, +.berry-boost-container p, +.probiotic-x-container p, +.the-defender-container p, +.pro-vitality-container p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + line-height: 27px; + margin-bottom: 15px; + width: 100%; + text-align: center; +} + +.cleanse-kit-1-container span, +.cleanse-kit-2-container span, +.cleanse-kit-3-container span, +.tangerine-container span, +.detox-glory-container span, +.immune-x-container span, +.energizer-container span, +.roots-fusion-container span, +.berry-boost-container span, +.probiotic-x-container span, +.the-defender-container span, +.pro-vitality-container span { + font-size: 25px; + font-family: "Roboto"; + font-weight: 300; + display: inline-block; + margin-bottom: 40px; + text-align: center; + width: 100%; +} + +.wellness-shots { + font-size: 28px; + font-weight: 500; + font-family: "Questrial"; + text-align: center; + margin-bottom: 24px; +} + +/*---------------------FOOTER--------------*/ + +footer { + background-color: var(--Dark-Green); + color: var(--White); + margin-top: 20px; +} + +.footer-links a { + text-decoration: none; + color: var(--White); +} + +.footer-links { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 50px; + padding: 50px; +} +/* --------------GET STARTED--------------- */ + +.get-started h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} + +.get-started ul { + padding-left: 0; +} + +.get-started li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------CONNECT--------------- */ + +.connect h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-bottom: 70px; +} +.connect ul { + padding-left: 0; +} + +.connect li { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: center; + margin-bottom: 20px; + text-decoration: none; + list-style: none; +} +/* --------------MAILING--------------- */ + +.Mailing { + margin-bottom: 70px; +} + +.Mailing h4 { + font-size: 40px; + font-weight: 400; + font-family: "Questrial"; + text-align: center; + margin-top: 50px; +} + +.Mailing label { + font-size: 20px; + font-weight: 400; + font-family: "Roboto"; + text-align: center; +} + +.mailing-subsection input { + border: none; + outline: none; + background-color: var(--Dark-Green); + border-bottom: 3px solid var(--White); + padding: 5px; + font-size: 20px; + color: var(--White); + width: 100%; + margin-top: 10px; +} + +.Mailing button { + background-color: var(--Dark-Green); + border: 4px solid var(--White); + color: var(--White); + font-size: 25px; + font-family: "Raleway"; + height: 70px; + margin-left: 20px; +} + +.mailing-subsection { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 50px; + padding: 30px; +} +/* --------------LOGO SECTION--------------- */ + +.footer-logo { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + margin-bottom: 50px; +} + +.footer-logo img { + width: 150px; +} +.footer-logo h4 { + font-size: 30px; + font-weight: 400; + font-family: "Questrial"; + text-align: left; + text-decoration: underline; +} + +.footer-logo p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + text-align: left; +} + +.educational { + text-align: center; + margin-left: 20px; + padding: 30px; +} + +/* ----------------LARGER SCREEN-------------- */ + +@media (min-width: 768px) { + /* --------------HEADER--------------- */ + + .user-icon img { + width: 30px; + height: 30px; + } + + .user-icon p { + font-size: 20px; + font-weight: 300; + font-family: "Roboto"; + } + + .user-icon { + width: 25%; + display: flex; + flex-direction: row; + justify-content: center; + align-self: center; + } + + .menu-tab { + width: 30%; + height: 90%; + } + + .user-icon-and-menu-tab { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 40%; + column-gap: 10px; + } + + .nav-tab { + display: flex; + flex-direction: row-reverse; + align-self: center; + justify-content: space-between; + width: 70%; + padding-left: 20px; + } + + .nav-tab span { + align-self: center; + position: relative; + right: 55px; + } + + header { + height: 10vh; + column-gap: 200px; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + + header a { + text-decoration: none; + } + + h1 { + font-size: 50px; + text-align: center; + padding: 50px; + width: 100%; + } + + /* -------------------MAIN-------------- */ + .menu-section-A h2, + .menu-section-A h3, + .menu-section-B h3, + .menu-section-C h3, + .menu-section-D h3 { + position: relative; + right: 45px; + } + + .menu-section-A h3, + .menu-section-B h3, + .menu-section-C h3, + .menu-section-D h3 { + margin-bottom: 30px; + } + + .menu-section-A h2 { + font-size: 45px; + } + + .cleanse-kit-1-container h4, + .cleanse-kit-2-container h4, + .cleanse-kit-3-container h4, + .tangerine-container h4, + .detox-glory-container h4, + .immune-x-container h4, + .energizer-container h4, + .roots-fusion-container h4, + .berry-boost-container h4, + .probiotic-x-container h4, + .the-defender-container h4, + .pro-vitality-container h4, + .cleanse-kit-1-container p, + .cleanse-kit-2-container p, + .cleanse-kit-3-container p, + .tangerine-container p, + .detox-glory-container p, + .immune-x-container p, + .energizer-container p, + .roots-fusion-container p, + .berry-boost-container p, + .probiotic-x-container p, + .the-defender-container p, + .pro-vitality-container p, + .cleanse-kit-1-container span, + .cleanse-kit-2-container span, + .cleanse-kit-3-container span, + .tangerine-container span, + .detox-glory-container span, + .immune-x-container span, + .energizer-container span, + .roots-fusion-container span, + .berry-boost-container span, + .probiotic-x-container span, + .the-defender-container span, + .pro-vitality-container span { + text-align: center; + width: 80%; + } + + .Product-1, + .Product-2, + .Product-3, + .Product-4 { + display: flex; + flex-direction: row; + column-gap: 15px; + row-gap: 20px; + margin-bottom: 30px; + } + + .Product-1 img, + .Product-2 img, + .Product-3 img, + .Product-4 img { + width: 300px; + height: 300px; + } + + main { + padding-left: 23%; + padding-right: 18%; + } + + /* -------------------FOOTER------------ */ + .footer-links-container { + display: grid; + grid-template-columns: 2fr 2fr 2fr; + column-gap: 70px; + position: relative; + top: 80px; + } + + .footer-links { + align-self: flex-start; + } + + .mailing-subsection input { + width: 250px; + } + + .Mailing button { + width: 150px; + position: relative; + left: 100px; + } + + .Mailing { + position: relative; + top: 40px; + } + + .footer-logo h4 { + font-size: 25px; + } + .footer-logo { + position: relative; + top: 90px; + } + + .educational { + font-size: 20px; + color: var(--White); + text-align: center; + } + + footer { + background-color: var(--Dark-Green); + height: 100vh; + margin-top: 70px; + } +} diff --git a/MultiPage-Clone/menu.html b/MultiPage-Clone/menu.html new file mode 100644 index 00000000..c316b617 --- /dev/null +++ b/MultiPage-Clone/menu.html @@ -0,0 +1,443 @@ + + + + + + + + + + + + + + + + + + + + + + Responsive grid project + + + +
+
+
+ + a photo of a user icon + +

LogIn

+
+ + + + +
+ +

Menu

 +
+
+ + + + + + + +
+ +

Your Daily Dose of + Wellness +

+ + + +
+ + + +
+ + + +
+ + +

Menu

+ +

Cold Pressed Juice

+
+ +
+ image of tangerine and carrot Juice + +

Tangerine

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 80 +
+ + + +
+ image of detox Juice + +

Detox Glory

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 80 +
+ + +
+ image of immune-x orange Juice + +

Immune X

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 80 +
+ +
+
+ + +
+

Smoothies

+
+ +
+ image of an energizer Juice + +

Energizer

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 110 +
+ + + +
+ image of an roots-fusion Juice + +

Roots Fusion

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 110 +
+ + + +
+ image of an berry-boost Juice + +

Berry Boost

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 113 +
+
+
+ + + + + + +
+ + + +

Wellness Shots

+ + + +
+ +
+ image of a small orange Juice + +

Probiotic X

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 70 +
+ + + +
+ image of the defender green Juice + +

The Defender

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 70 +
+ + +
+ image of Pro vitality Juice + +

Pro VItality

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 70 +
+
+
+ + + +
+

Cleanse Kit

+
+ +
+ image of a cleanse kit Juice + +

Cleanse Kit 01

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 300 +
+ +
+ image of a cleanse kit Juice + +

Cleanse Kit 02

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 300 +
+ + +
+ image of a cleanse kit Juice + +

Cleanse Kit 03

+ +

+ I'm a dish description.Click "Edit Menu" to open the Restaurant Menu + editor and change my text. +

+ $ 300 +
+
+
+ + +
+ + + + diff --git a/MultiPage-Clone/nav.css b/MultiPage-Clone/nav.css new file mode 100644 index 00000000..66d13472 --- /dev/null +++ b/MultiPage-Clone/nav.css @@ -0,0 +1,89 @@ +* { + border: 0; + margin: 0; + box-sizing: border-box; +} + +:root { + --Black: #000; + --White: #fff; + --Lilac: #f5e8ff; + --Light-Green: #e6fac0; + --Medium-Green: #5e7d1f; + --Dark-Green: #394b2a; +} + +.close-icon-container { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.close-icon { + margin: 60px; + width: 30px; +} + +.black-close-icon { + width: 200px; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + padding-top: 0px; + height: 100vh; +} + +p { + margin-bottom: 30px; + margin-top: 50px; + font-size: 40px; + font-family: "Questrial"; + font-weight: 300; +} + +.user-icon { + display: flex; + flex-direction: row; + justify-content: flex-start; + position: relative; + right: 100px; + width: 100; +} + +.user-icon img { + width: 50px; + height: 50px; + position: relative; + margin-left: 20px; + bottom: 10px; +} + +.user-icon p { + align-self: center; + font-size: 30px; + font-family: "Questrial"; + font-weight: 300; + display: inline-block; + position: relative; + bottom: 30px; + margin-left: 20px; +} + +a { + text-decoration: none; + color: var(--Black); +} + +@media (min-width: 768px) { + body { + background-color: var(--Black); + } + + main p { + color: var(--White); + } +} diff --git a/MultiPage-Clone/nav.html b/MultiPage-Clone/nav.html new file mode 100644 index 00000000..59d531b8 --- /dev/null +++ b/MultiPage-Clone/nav.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + +
+
+ + a close icon sign + +
+
+ +
+
+ +

Home

+ + +

History

+ + +

Menu

+ + +

Order Online

+ + +

Locations & Hours

+ +
+
+
+ +
+ + a photo of a user icon + +

Log In

+ +
+
+ + diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css index e69de29b..00a9c932 100644 --- a/Wireframe/css/style.css +++ b/Wireframe/css/style.css @@ -0,0 +1,171 @@ + +/* Body */ + +body{ +background-color:rgb(63, 54, 65); +} + + + +/* Header */ + + +.page_title{ +font-size: 40px; +margin-bottom: 10px; +position: relative; +left: 750px; +color: aliceblue; +} + + +.title_description{ +font-family: Georgia, 'Times New Roman', Times, serif; +font-size: large; +font-style: italic; +margin-top:0px; +margin-bottom: 80px; +position: relative; +left: 600px; +color: aliceblue; +} + + +/* Article Title */ + + +article { +position: relative; +left: 170px; +} + + + +h4{ +font-size: 18px; +color: aliceblue; +} + + +/* Article 1 */ + +.div_article1:first-child{ +border: 0.5px solid rgb(245, 234, 217); +width: 1000px; +position: relative; +left:300px ;; +} + +.div_article1 img{ + width: 1000px; +height: 500px; +} + +.subdivided_div_article1{ +text-align: left; +padding: 15px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + + +/* Article 2 */ + +.div_article2{ +border:0.5px solid rgb(245, 234, 217); +width: 500px; +height: 420px; +position: relative; +left: 300px; +top:53px; +overflow: hidden; +padding-bottom:15px; +} + +.div_article2 img{ +width:500px; +} + +.subdivided_div_article2{ +margin: 10px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + + + +/* Article 3 */ + + + +.div_article3{ +border:0.5px solid rgb(245, 234, 217); +width: 455px; +height:420px; +position:relative; +left: 848px; +bottom:385px; +overflow: hidden; +padding-bottom:15px; +} + +.div_article3 img{ +width:455px; +height: 250px; +} + +.subdivided_div_article3{ +margin: 10px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + +/* Buttons */ + +.subdivided_div_article1 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + +.subdivided_div_article2 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + +.subdivided_div_article3 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + + +/* Footer */ + +footer{ +color: rgb(218, 240, 231); +background-color: rgb(71, 63, 80); +text-align: center; +font-size: larger; +padding:30px; +position: fixed; +bottom: 0; +width: 100%; +box-shadow: 0 -2px 5px rgb(126, 126, 126); +} \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 67544158..1f10beeb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,13 +1,118 @@ + Wireframe - + + + + +
+ +

Git: A Developer's Best Friend

+

Explore the world of Git branching and discover how this powerful feature can enhance your development workflow.

+ +
+ + + + + +
+
+ + + +
+ + An image with the inscription Git + +
+ +

What Is Git?

+ +

Git is a powerful version control system that enables developers to efficiently manage their code, collaborative development, tracking changes, and undoing mistakes.

+ + + + + +
+ + +
+ + + +
+ + An image with question why Git? + + + +
+

Importance Of Git

+ +

Git is a revolutionized way developers work. It provides a robust framework for tracking changes to code, collaborating with team members, and managing project history.

+ + + + +
+ + + +
+ + + +
+ + This is an image of a source control icon + + +
+

What is a Git Branch?

+ +

Git Branches are like parallel paths within a project's history. They allow developers to work on different features, bug fixes, or experimental changes without affecting the main codebase.

+ + + + + + +
+ + +
+ +
+
+ + + + + + + + + + +