diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f2f8240e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Súrúlérè" + ] +} \ No newline at end of file diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css index 75e9841e..85c51865 100644 --- a/week1/3-website/css/style.css +++ b/week1/3-website/css/style.css @@ -6,3 +6,138 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +* { + margin: 0; + padding: 0px; +} +body { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} +#header { + background-color: #f7cd95; + background-image: url("../images/sunset.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + height: 75vh; + position: relative; +} +.navigation li { + list-style-type: none; + display: inline-block; + padding: 30px; +} +.navigation a { + text-decoration: none; +} +.navigation a:hover { + background-color: burlywood; + color: black; +} +.text { + color: wheat; + text-align: center; +} +.header-text { + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); +} +.title-desc { + margin-top: 20px; +} +#title { + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + font-size: 40px; + + text-align: center; +} +#main { + background-color: #f0d8c1e3; +} +#about-section { + background-color: #f8ffe5; + margin-top: 50px; + padding: 50px 30px; +} +.about-imgbox { + display: flex; + justify-content: space-around; + margin: 0 auto; + width: 60%; +} +#about-text { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-style: italic; + width: 75%; + margin: auto; +} +.about-img { + padding-top: 30px; + width: 200px; + height: 150px; +} +#section-blog { + background-color: whitesmoke; + padding: 50px 30px; +} +.title { + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + font-size: 30px; + padding: 0px; +} + +.article-box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + width: 60%; + margin: 20px auto; + background-color: wheat; +} +.article-box:first-child { + color: #bd710e; +} +.image { + width: 200px; + height: 200px; + padding-right: 50px; +} +.article-title { + font-size: 20px; + padding-bottom: 20px; + color: rgb(204, 137, 30); +} +.article-text { + text-align: justify; + line-height: 1.2em; + padding-bottom: 20px; +} +.article-button { + background-color: black; + border: none; + border-radius: 2px; + color: burlywood; + cursor: pointer; + padding: 10px; +} +.article-button:hover { + background-color: chocolate; + color: black; +} +#footer { + height: 80px; + background-color: #080501; + padding-left: 30px; + font-size: 12px; + display: flex; + justify-content: space-between; +} +.footer-title { + font-size: 14; + padding-top: 30px; + text-align: left; + vertical-align: center; +} diff --git a/week1/3-website/images/bench.jpg b/week1/3-website/images/bench.jpg new file mode 100644 index 00000000..9ac922c7 Binary files /dev/null and b/week1/3-website/images/bench.jpg differ diff --git a/week1/3-website/images/coding.jpg b/week1/3-website/images/coding.jpg new file mode 100644 index 00000000..f4a4ed48 Binary files /dev/null and b/week1/3-website/images/coding.jpg differ diff --git a/week1/3-website/images/hijab.jpg b/week1/3-website/images/hijab.jpg new file mode 100644 index 00000000..ac839393 Binary files /dev/null and b/week1/3-website/images/hijab.jpg differ diff --git a/week1/3-website/images/lemon.jpg b/week1/3-website/images/lemon.jpg new file mode 100644 index 00000000..54a1fd01 Binary files /dev/null and b/week1/3-website/images/lemon.jpg differ diff --git a/week1/3-website/images/nature.jpg b/week1/3-website/images/nature.jpg new file mode 100644 index 00000000..20b89ba8 Binary files /dev/null and b/week1/3-website/images/nature.jpg differ diff --git a/week1/3-website/images/path1.jpg b/week1/3-website/images/path1.jpg new file mode 100644 index 00000000..b571c3da Binary files /dev/null and b/week1/3-website/images/path1.jpg differ diff --git a/week1/3-website/images/sunset.jpg b/week1/3-website/images/sunset.jpg new file mode 100644 index 00000000..ae9f3a05 Binary files /dev/null and b/week1/3-website/images/sunset.jpg differ diff --git a/week1/3-website/index.html b/week1/3-website/index.html index 67dfc7f5..e82bb33f 100644 --- a/week1/3-website/index.html +++ b/week1/3-website/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Súrúlérè | My Blog + + + + +
+
+

About

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sunt + nulla dolores, assumenda similique aut dolorem eius iusto beatae + blanditiis laudantium omnis reprehenderit cum. Molestiae eligendi nam + porro sunt dolor architecto optio rerum possimus ipsa exercitationem + rem, quos voluptates animi quasi iure dignissimos sapiente dolorum + sequi, unde soluta voluptatibus. Delectus! +

+
+ woman in black hijab walking on a field + html tags icon + seaside +
+
+
+

Blog Articles

+
+
+ pathway +
+

Journey of a Thousand Miles ...

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum + accusamus itaque autem explicabo dolores, quaerat laudantium + laboriosam sunt omnis repellendus doloribus hic ab vel! Quam et + repudiandae nobis necessitatibus recusandae eveniet tempora quae + mollitia deleniti assumenda optio praesentium nam voluptate, + enim officia reprehenderit debitis quia, doloremque placeat ex + voluptatem. Cum! +

+ +
+
+
+ clear glass pitcher filled with clear liquid and slices of lemon +
+

+ When life gives you lemons, you know what to do +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa + facilis iusto totam placeat reiciendis! Nulla, odit fugiat + tempora perferendis ipsum harum possimus reprehenderit + voluptates consequuntur cumque. Nulla laboriosam dicta aut + soluta rerum numquam, corrupti tempora ab cum, eaque + voluptatibus maxime illo ex dignissimos commodi suscipit labore + neque architecto cumque veniam. +

+ +
+
+
+ bench in a beautiful green garden +
+

Take a Breather

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi + expedita, sequi animi nemo aperiam qui enim quis. Atque modi + autem aliquid ducimus nam asperiores illo fuga eos! Harum esse + corrupti totam quis voluptas repellat consequatur itaque + eligendi, a nobis? Alias placeat deserunt repellendus nulla, + nobis ullam sit eligendi voluptatibus ut. +

+ +
+
+
+
+
+