diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..bb6942f1 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 61644f44..96ea4359 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Setup -First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents. +*First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents. ## Homework diff --git a/css/style.css b/css/style.css index 75e9841e..179b24a3 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,192 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +/*******************************************/ +/*---- COLOR SCHEMES for TEXTS AND LINKS---Konika*/ +/*******************************************/ + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} +body { + background-color: #e8e1e0; +} +h1, +h2, +h3 { + color: #57394a; +} + +a { + color: #441831; + text-decoration: none; +} +img { + width: 100%; +} +/*header section style*/ +#page-title { + margin: 0 auto; + text-align: center; + padding: 20px; + /**background-image: url(/image/logo.jpeg); + height:300px ; + width: 600px;**/ +} +#page-title h1 { + font-size: 3rem; +} +#page-title .page_description { + font-size: 1.3rem; + color: #79400e; + padding-top: 20px; + padding-bottom: 10px; +} + +#home { + margin: 0 auto; + display: flex; + flex-flow: row wrap; + justify-content: space-around; + align-items: stretch; + width: 100%; + background-color: #e0c2c0; + padding: 10px; +} + +#logo { + height: 100px; + width: 100px; + border-radius: 50%; + opacity: 0.8; + border: 2px dotted rgb(224, 156, 28); + padding: 0.3rem; + align-self: left; +} +#navbar { + display: flex; + align-items: center; + justify-content: center; +} +#navbar .nav-link { + display: block; + padding: 0.6em; + color: #8f4e15; + box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75); + margin-right: 30px; + border-radius: 15px; + text-transform: uppercase; + font-size: 1.2rem; + font-weight: 700; +} +#navbar .nav-link:hover { + background-color: #dbb0a0; + color: #57394a; +} + +/*main section starts here*/ +.container { + max-width: 1100px; + margin: 0 auto; + overflow: hidden; +} + +/*gallery section styling*/ + +#gallery { + display: flex; + flex-flow: row wrap; + justify-content: space-around; + padding: 10px; + margin: 10px; + border: 1px dotted rgb(224, 156, 28); + border-radius: 10px; +} + +.gallery_image { + vertical-align: middle; + width: 33%; + padding: 10px; + height: 300px; + background-color: #f3e2dc; + margin-bottom: 3px; + border-radius: 5px; +} +/*article section starts here*/ +#articles { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + max-width: 1100px; +} +.blog:first-child { + font-style: oblique; + color: #79400e; +} +.blog { + text-align: justify; + margin-bottom: 10px; +} +.blog h3 { + font-size: 35px; +} +.blog p { + font-size: 1.2rem; + padding-top: 10px; + color: #4b3e34; +} +button { + padding: 10px; + color: #634025; + box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); + margin-right: 30px; + border-radius: 8px; + font-size: 1rem; +} +.read_more { + text-align: left; + padding-top: 10px; + margin: 0 auto; +} +hr { + color: #57394a; + height: 2px; + border-width: 0; + background-color: gray; +} +/*********footer goes here*******/ +footer { + margin: 0 auto; + padding: 20px; + overflow: hidden; + background-image: linear-gradient(45deg, #f0d4cb, #f6e6e5, #dbb0a0); +} +#about_us { + max-width: 1100px; + margin: 0 auto; +} +footer .about_me { + font-size: 40px; + font-weight: 700; + padding-bottom: 20px; +} +footer .information { + font-size: 1.2rem; + color: #4b3e34; + padding: 0px 0 20px; +} + +.thank-you { + padding: 8px; + font-size: 1.1rem; + text-align: center; + color: #79400e; +} +.trademark { + text-align: center; + padding: 10px; + color: #79400e; +} diff --git a/image/.DS_Store b/image/.DS_Store new file mode 100644 index 00000000..1b268b77 Binary files /dev/null and b/image/.DS_Store differ diff --git a/image/Orange-Persimmons-Growing-on-the-Tree.jpg b/image/Orange-Persimmons-Growing-on-the-Tree.jpg new file mode 100755 index 00000000..70569759 Binary files /dev/null and b/image/Orange-Persimmons-Growing-on-the-Tree.jpg differ diff --git a/image/big tree.jpg b/image/big tree.jpg new file mode 100644 index 00000000..13e51c5b Binary files /dev/null and b/image/big tree.jpg differ diff --git a/image/fruit_bowl.jpg b/image/fruit_bowl.jpg new file mode 100755 index 00000000..95d4bb31 Binary files /dev/null and b/image/fruit_bowl.jpg differ diff --git a/image/garden-1.jpeg b/image/garden-1.jpeg new file mode 100644 index 00000000..29da8ca8 Binary files /dev/null and b/image/garden-1.jpeg differ diff --git a/image/logo.jpeg b/image/logo.jpeg new file mode 100644 index 00000000..fd07582a Binary files /dev/null and b/image/logo.jpeg differ diff --git a/image/nature-wallpaper-1.jpeg b/image/nature-wallpaper-1.jpeg new file mode 100644 index 00000000..e82cd775 Binary files /dev/null and b/image/nature-wallpaper-1.jpeg differ diff --git a/image/pomegranate-tree.jpg b/image/pomegranate-tree.jpg new file mode 100644 index 00000000..fc40caa6 Binary files /dev/null and b/image/pomegranate-tree.jpg differ diff --git a/index.html b/index.html index 67dfc7f5..e6a78cfd 100644 --- a/index.html +++ b/index.html @@ -18,5 +18,245 @@ +
+

A Blog for Gardening

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima, + quidem? +

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

First Month of Spring

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed + fermentum tortor, id accumsan velit. Nulla molestie, eros et + porttitor iaculis, odio eros laoreet urna, sed eleifend leo orci eu + metus. Nam quis fringilla nibh, ac consequat ex. Ut et pharetra + eros, eu varius turpis. Mauris non placerat turpis, vel aliquet + tellus. Mauris ullamcorper lectus in erat auctor varius. Cras auctor + nisi quis est eleifend venenatis. Morbi vitae pharetra ipsum. + Pellentesque facilisis scelerisque nunc, eget ultricies quam + tristique vel. Nulla facilisi. Duis commodo erat risus, vitae + eleifend nisl blandit quis. Cras venenatis risus orci, nec hendrerit + turpis porta ac. Sed risus nisi, gravida non pellentesque quis, + tincidunt in lorem. Aliquam commodo libero vitae nisl pharetra, quis + egestas ipsum euismod. Integer vel fringilla sem. Maecenas pretium + scelerisque tellus non vehicula.Sed et auctor libero. +

+

+ Integer gravida sem et lobortis suscipit. Vivamus fringilla nisl vel + neque rhoncus sodales. Suspendisse potenti. Vestibulum ante ipsum + primis in faucibus orci luctus et ultrices posuere cubilia curae; + Cras ex nulla, condimentum at sagittis non, consectetur blandit + ligula. Curabitur semper neque eget odio malesuada volutpat. Vivamus + gravida imperdiet metus, tempor volutpat est venenatis nec. + Curabitur egestas euismod fringilla. Nulla volutpat urna in odio + finibus placerat. Aenean viverra ultrices bibendum. Duis non + efficitur odio. +

+

+ sit amet fermentum est iaculis sed. Vivamus dolor dolor, semper et + mattis et, porttitor eu turpis. Quisque sed pharetra ligula. Vivamus + elementum, nisi sit amet gravida pulvinar, orci libero dignissim + eros, ac efficitur arcu dui id nibh. Cras sit amet vestibulum orci. + Ut sed tempor arcu. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Nulla nec sapien justo. In + ac vulputate nisi. Mauris bibendum ante nisl, ac sagittis metus + lobortis id. +

+ +
+ + +
+
+ +
+ +
+

Second Month of Spring

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed + fermentum tortor, id accumsan velit. Nulla molestie, eros et + porttitor iaculis, odio eros laoreet urna, sed eleifend leo orci eu + metus. Nam quis fringilla nibh, ac consequat ex. Ut et pharetra + eros, eu varius turpis. Mauris non placerat turpis, vel aliquet + tellus. Mauris ullamcorper lectus in erat auctor varius. Cras auctor + nisi quis est eleifend venenatis. Morbi vitae pharetra ipsum. + Pellentesque facilisis scelerisque nunc, eget ultricies quam + tristique vel. Nulla facilisi. Duis commodo erat risus, vitae + eleifend nisl blandit quis. Cras venenatis risus orci, nec hendrerit + turpis porta ac. Sed risus nisi, gravida non pellentesque quis, + tincidunt in lorem. Aliquam commodo libero vitae nisl pharetra, quis + egestas ipsum euismod. Integer vel fringilla sem. Maecenas pretium + scelerisque tellus non vehicula.Sed et auctor libero. +

+

+ Integer gravida sem et lobortis suscipit. Vivamus fringilla nisl vel + neque rhoncus sodales. Suspendisse potenti. Vestibulum ante ipsum + primis in faucibus orci luctus et ultrices posuere cubilia curae; + Cras ex nulla, condimentum at sagittis non, consectetur blandit + ligula. Curabitur semper neque eget odio malesuada volutpat. Vivamus + gravida imperdiet metus, tempor volutpat est venenatis nec. + Curabitur egestas euismod fringilla. Nulla volutpat urna in odio + finibus placerat. Aenean viverra ultrices bibendum. Duis non + efficitur odio. +

+

+ sit amet fermentum est iaculis sed. Vivamus dolor dolor, semper et + mattis et, porttitor eu turpis. Quisque sed pharetra ligula. Vivamus + elementum, nisi sit amet gravida pulvinar, orci libero dignissim + eros, ac efficitur arcu dui id nibh. Cras sit amet vestibulum orci. + Ut sed tempor arcu. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Nulla nec sapien justo. In + ac vulputate nisi. Mauris bibendum ante nisl, ac sagittis metus + lobortis id. +

+ +
+ + +
+
+ +
+ +
+

Third Month of Spring

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed + fermentum tortor, id accumsan velit. Nulla molestie, eros et + porttitor iaculis, odio eros laoreet urna, sed eleifend leo orci eu + metus. Nam quis fringilla nibh, ac consequat ex. Ut et pharetra + eros, eu varius turpis. Mauris non placerat turpis, vel aliquet + tellus. Mauris ullamcorper lectus in erat auctor varius. Cras auctor + nisi quis est eleifend venenatis. Morbi vitae pharetra ipsum. + Pellentesque facilisis scelerisque nunc, eget ultricies quam + tristique vel. Nulla facilisi. Duis commodo erat risus, vitae + eleifend nisl blandit quis. Cras venenatis risus orci, nec hendrerit + turpis porta ac. Sed risus nisi, gravida non pellentesque quis, + tincidunt in lorem. Aliquam commodo libero vitae nisl pharetra, quis + egestas ipsum euismod. Integer vel fringilla sem. Maecenas pretium + scelerisque tellus non vehicula.Sed et auctor libero. +

+

+ Integer jgjhhh gravida sem et lobortis suscipit. Vivamus fringilla + nisl vel neque rhoncus sodales. Suspendisse potenti. Vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia + curae; Cras ex nulla, condimentum at sagittis non, consectetur + blandit ligula. Curabitur semper neque eget odio malesuada volutpat. + Vivamus gravida imperdiet metus, tempor volutpat est venenatis nec. + Curabitur egestas euismod fringilla. Nulla volutpat urna in odio + finibus placerat. Aenean viverra ultrices bibendum. Duis non + efficitur odio. +

+

+ sit amet fermentum est iaculis sed. Vivamus dolor dolor, semper et + mattis et, porttitor eu turpis. Quisque sed pharetra ligula. Vivamus + elementum, nisi sit amet gravida pulvinar, orci libero dignissim + eros, ac efficitur arcu dui id nibh. Cras sit amet vestibulum orci. + Ut sed tempor arcu. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Nulla nec sapien justo. In + ac vulputate nisi. Mauris bibendum ante nisl, ac sagittis metus + lobortis id. +

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