diff --git a/css/style.css b/css/style.css index 75e9841e..23ea082c 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,106 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +body { + margin: 0; + padding: 0; + width: 100vw; + height: 100%vh; + background: linear-gradient(to top,#fad2cc, #f48882, #fad2cc); +} + +/* Nav and Link Styles */ + +nav { + display: flex; + height: 10vh; + gap: 30%; + align-items: center; + background: linear-gradient(to top, #fad2cc, #dd9bcf, #fcf); + width: 100%; + border: none; +} + +list { + display: flex; + gap: 5%; +} +list, a{ + font-family: "Rubik Moonrocks", cursive; + text-decoration: none; + color: rgb(34, 28, 28); +} + +nav > a{ + font-weight: bold; + font-size: 1.2rem; + font-style: italic; +} + +/* Main content styles */ + +main { + width: 75%; + margin: 2px auto; + background: #f6ffee; + border-radius: 10%; + padding-top: 1%; + padding-left: 5%; + padding-right: 5%; + padding-bottom: 1%; +} + +img { + width: 100%; + height: 500px; +} + +h1, +header p { + text-align: center; +} +header p { + font-style: italic; +} + +/* Article 1 */ + +.first_article h2 { + padding-top: 2%; + margin-left: 2%; +} + +article:first-child { + font-family: "Courier New", Courier, monospace; +} + +/* Article 2 */ +.second_article h2 { + width: 100%; + height: 15%; + margin-top: 5%; +} + +/* Footer */ + +footer { + display: flex; + justify-content: space-around; + height: 5vh; + margin-top: 2px; + background: linear-gradient( + to top, + + #dd9bcf, + #fcf, + #fad2cc, + #f48882 + ); + font-size: small; + margin-top: 5px; + padding: 0; +} +footer p { + margin: 0; + padding: 5px; +} diff --git a/index.html b/index.html index 67dfc7f5..54823de5 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,102 @@ /> + + + - +
+ + +

+ How to Create Social Media Buttons for All the top Social Media + Networks +

+

Written by Chidimma Ofodum

+
+ +
+
+

Introduction

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, + placeat distinctio unde a enim dolorem aut fugiat dolore laborum + debitis iure velit natus saepe molestiae? Ducimus veritatis laborum, + sed obcaecati esse temporibus facere blanditiis quo nam repellendus + sequi, libero voluptatum ab maxime dolor totam ut aliquam, quasi + aperiam cupiditate sint eligendi. Corrupti iusto, molestiae, inventore + ipsum fugit odio consequatur et voluptate at vel reprehenderit tempore + officia quidem harum sunt tenetur unde temporibus. Earum commodi hic + velit mollitia ut sapiente, iste eos ad autem nam voluptates pariatur + id. Quae doloremque at mollitia molestias corporis officia et enim + commodi? At deleniti accusamus modi quia itaque voluptas, aspernatur, + deserunt officia impedit facilis libero nisi quis fugiat ullam + explicabo fuga similique perspiciatis iste beatae odit dolore eaque. + Molestias dolorem a doloremque ipsa nesciunt suscipit facilis eligendi + amet aliquam tempore consequatur, est modi assumenda veniam excepturi + fuga perferendis id, neque temporibus numquam illo? + +

+ man with a laptop +
+ +
+

+ The Ultimate Cheat Sheet for Creating Social Media Sharing Buttons +

+ man with a laptop aerial view +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque + officia dolore voluptate, voluptates odio maxime nobis ducimus + exercitationem ut quia sequi quis quaerat beatae obcaecati impedit + saepe molestiae numquam ipsa aliquam neque ratione inventore + dignissimos ea earum! Accusantium vel animi ullam? Esse, doloribus + sed. Tempora, sapiente labore quo, laboriosam ex, rem incidunt iure + amet facilis molestias sunt minima veritatis ullam? Similique, + voluptate molestiae sapiente consequatur adipisci perferendis ad + voluptatum sit quia. Autem provident enim accusamus sit, reiciendis + eaque aut voluptas commodi voluptate. Accusamus dolores tempore quas + natus, totam eaque sed, quo, magni soluta quis odit! Eum vitae + voluptatibus, unde odit facilis reprehenderit, aliquid alias molestias + eveniet fugit eos consequatur recusandae dolorem mollitia quos + obcaecati quae animi cum saepe ea, distinctio fuga. Odio fuga quisquam + amet asperiores consectetur, dolorem fugit! Laborum, facilis eum. Esse + assumenda aperiam veritatis, ratione minima officia tenetur magnam eum + laudantium odit ullam suscipit nostrum sapiente minus quo sint + deserunt dicta vitae. Suscipit dolor, repellendus accusamus eligendi + eos facere voluptas ducimus et. Vel aut quas quae ex numquam corporis, + velit tempore nobis excepturi earum sint accusantium esse hic animi at + atque distinctio nostrum amet, repellendus aliquam vero doloremque + dolorem magni. Asperiores reprehenderit eveniet inventore, unde, + nesciunt, nemo id eius sit voluptas ad qui esse placeat a. Harum esse + ea pariatur omnis praesentium ratione quam tempora dolore expedita + maiores labore in fuga fugiat, autem error voluptatibus aliquam dolor + architecto similique vel hic nihil earum sit sunt! Cupiditate, + suscipit maxime. Quasi ipsum consectetur temporibus distinctio culpa + ut dolorem amet nihil. +

+
+
+ + + +