From ad5819399329a3f838f4df88e0ac0934f959ba9b Mon Sep 17 00:00:00 2001 From: AndyR <50073313+Andy-Robertson@users.noreply.github.com> Date: Mon, 31 May 2021 20:47:55 +0100 Subject: [PATCH 01/15] Basic html page structure complete, with lorem ipsum content --- css/style.css | 13 ++-- index.html | 172 +++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 174 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..cfb0993a 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,5 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +/* Article styles */ + +article:first-child { + background-color: rgb(156, 156, 161); +} diff --git a/index.html b/index.html index 67dfc7f5..ca9ff9e4 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Andy's Blog - - +
+ Cool Andy Logo +

Andy's blog

+

This site documents Andy's adventures

+ +
+ +
+
+
+

Article 1 Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu, + interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet + gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque + arcu. Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed + dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien + suscipit. Quisque dui leo, congue eget nibh vel, aliquam ultricies + urna. Aenean at libero sed nibh feugiat finibus. Praesent pretium + sodales nibh. Donec faucibus magna a maximus porttitor. Vestibulum + laoreet arcu ex, sed vulputate sapien aliquet ac. Integer at enim + eget tortor efficitur commodo. Nunc venenatis nunc erat, nec + eleifend odio ultricies a. Phasellus blandit tellus in diam + efficitur, sit amet iaculis sapien scelerisque. Sed tempor arcu + arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, + auctor id malesuada ut, aliquet faucibus purus. Cras congue sagittis + elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a + imperdiet urna mollis. Suspendisse lacinia, dolor tempor fringilla + euismod, nisl risus lacinia felis, vel porttitor tortor lectus sit + amet dui. Ut tempor, purus vel finibus viverra, lorem nibh tempus + tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis + scelerisque lacus nec vestibulum. Pellentesque felis enim, accumsan + in accumsan vitae, dapibus suscipit est. In sollicitudin eget sem + mattis euismod. Vestibulum eleifend blandit massa vitae semper. + Quisque hendrerit eros non ultrices cursus. Mauris lobortis ligula + eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum + rhoncus varius eros. Donec dictum massa lacus, at elementum velit + posuere non. Morbi maximus augue ut mi faucibus ornare. Etiam vitae + mauris vel dolor tincidunt vulputate. Morbi sollicitudin diam nec + neque maximus pulvinar. Nullam at elementum quam, pharetra porttitor + odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et + dictum ex. +

+ Link 1 +
+
+

Article 2 Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu, + interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet + gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque + arcu. Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed + dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien + suscipit. Quisque dui leo, congue eget nibh vel, aliquam ultricies + urna. Aenean at libero sed nibh feugiat finibus. Praesent pretium + sodales nibh. Donec faucibus magna a maximus porttitor. Vestibulum + laoreet arcu ex, sed vulputate sapien aliquet ac. Integer at enim + eget tortor efficitur commodo. Nunc venenatis nunc erat, nec + eleifend odio ultricies a. Phasellus blandit tellus in diam + efficitur, sit amet iaculis sapien scelerisque. Sed tempor arcu + arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, + auctor id malesuada ut, aliquet faucibus purus. Cras congue sagittis + elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a + imperdiet urna mollis. Suspendisse lacinia, dolor tempor fringilla + euismod, nisl risus lacinia felis, vel porttitor tortor lectus sit + amet dui. Ut tempor, purus vel finibus viverra, lorem nibh tempus + tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis + scelerisque lacus nec vestibulum. Pellentesque felis enim, accumsan + in accumsan vitae, dapibus suscipit est. In sollicitudin eget sem + mattis euismod. Vestibulum eleifend blandit massa vitae semper. + Quisque hendrerit eros non ultrices cursus. Mauris lobortis ligula + eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum + rhoncus varius eros. Donec dictum massa lacus, at elementum velit + posuere non. Morbi maximus augue ut mi faucibus ornare. Etiam vitae + mauris vel dolor tincidunt vulputate. Morbi sollicitudin diam nec + neque maximus pulvinar. Nullam at elementum quam, pharetra porttitor + odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et + dictum ex. +

+ Link 2 +
+
+

Article 3 Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + efficitur molestie erat, nec accumsan velit tempor interdum. + Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed + eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu + accumsan bibendum. Donec pretium justo tempus, finibus purus non, + euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus + finibus consectetur a vel dui. Sed volutpat lectus felis, non + gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id + fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt + ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius + pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel, + tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus + condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean + iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu, + interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet + gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque + arcu. Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed + dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien + suscipit. Quisque dui leo, congue eget nibh vel, aliquam ultricies + urna. Aenean at libero sed nibh feugiat finibus. Praesent pretium + sodales nibh. Donec faucibus magna a maximus porttitor. Vestibulum + laoreet arcu ex, sed vulputate sapien aliquet ac. Integer at enim + eget tortor efficitur commodo. Nunc venenatis nunc erat, nec + eleifend odio ultricies a. Phasellus blandit tellus in diam + efficitur, sit amet iaculis sapien scelerisque. Sed tempor arcu + arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, + auctor id malesuada ut, aliquet faucibus purus. Cras congue sagittis + elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a + imperdiet urna mollis. Suspendisse lacinia, dolor tempor fringilla + euismod, nisl risus lacinia felis, vel porttitor tortor lectus sit + amet dui. Ut tempor, purus vel finibus viverra, lorem nibh tempus + tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis + scelerisque lacus nec vestibulum. Pellentesque felis enim, accumsan + in accumsan vitae, dapibus suscipit est. In sollicitudin eget sem + mattis euismod. Vestibulum eleifend blandit massa vitae semper. + Quisque hendrerit eros non ultrices cursus. Mauris lobortis ligula + eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum + rhoncus varius eros. Donec dictum massa lacus, at elementum velit + posuere non. Morbi maximus augue ut mi faucibus ornare. Etiam vitae + mauris vel dolor tincidunt vulputate. Morbi sollicitudin diam nec + neque maximus pulvinar. Nullam at elementum quam, pharetra porttitor + odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et + dictum ex. +

+ Link 3 +
+
+
+ + + + From ff066f18a10dbb0c2e9c9ba26f72c1b308a2aa92 Mon Sep 17 00:00:00 2001 From: AndyR <50073313+Andy-Robertson@users.noreply.github.com> Date: Tue, 1 Jun 2021 22:44:54 +0100 Subject: [PATCH 02/15] First pass of design complete This was a major update which mainly focused on fleshing out the concept, design and function. Improved the html structure, added several class selectors, a page navigation system and split the content into paragraphs. Completed basic CSS with the aim of putting most styling options behind class selectors. Created a new folder for images and added a logo image. --- css/style.css | 128 ++++++++++++++++++++++++++- images/logo.png | Bin 0 -> 6348 bytes index.html | 225 +++++++++++++++++++++++++++++------------------- 3 files changed, 261 insertions(+), 92 deletions(-) create mode 100644 images/logo.png diff --git a/css/style.css b/css/style.css index cfb0993a..489735ea 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,129 @@ +/* */ +* { + font-family: "Courier New", Courier, monospace; + background-color: #000; + color: #fff; + scroll-behavior: smooth; + scroll-padding-top: 8.75rem; +} + +body { + margin: 0; + padding: 0; +} + +/* Header styles */ + +.logo { + width: 4rem; + height: 4rem; + margin-right: 0.625rem; + margin-top: 0.3125rem; +} + +.headerSection { + display: flex; + justify-content: space-between; + background-color: #000; + position: fixed; + width: 100%; + height: 7rem; +} + +.siteInfoContainer { + display: flex; + margin-left: 1.25rem; +} + +.siteInfoContainer p { + color: #29af22; + font-weight: bold; +} + +.titleContainer > p { + font-style: italic; +} + +.mainHeadng { + margin-top: 1.25rem; + margin-left: 0.625rem; +} + +.pageNavigation { + margin-right: 1.25rem; + margin-top: 0.1875rem; +} + +.pageNavigation > ul { + display: flex; + justify-content: space-around; + list-style: none; +} + +.pageNavigation > ul > li { + text-decoration: none; + font-weight: bold; + background-color: #fff; + color: #000; + border: 1px solid #fff; + border-radius: 10px; + margin: 0.5rem; + width: 8.4375rem; +} + +.pageNavigation > ul > li > a { + text-decoration: none; + font-weight: bold; + display: flex; + justify-content: center; + border-radius: 10px; +} + +.getInTouch { + background-color: #fff; + color: #000; +} + +.pageNavigation > ul > li a:hover, +.pageNavigation > ul > li a:focus { + background-color: #fff; + color: #000; + transition: 0.8s; +} + +.pageNavigation > ul > li .getInTouch:hover, +.pageNavigation > ul > li .getInTouch:focus { + background-color: #000; + color: #fff; + transition: 1.5s; +} + /* Article styles */ -article:first-child { - background-color: rgb(156, 156, 161); +/* Just a bit of fun to show the site information can be used as a selector :) */ +.yourSelectorToTheLatestSoftwareDevelopment > .news > article { + background-color: #000; + border: 1px ridge #fff; + border-radius: 4px; + margin: 0.625rem; +} + +.articleSection article:first-child { + border: 1px groove #e6d408; +} + +.articleSection { + padding-top: 7.5rem; +} + +article > p, +article > a { + margin-left: 3.125rem; + margin-right: 3.125rem; + color: #fff; +} + +article > h2 { + margin-left: 0.625rem; + color: #6aa2e4; } diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..62eed0fd21eeca1b5d94f0319bcd006c3ca496ba GIT binary patch literal 6348 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index ca9ff9e4..bab5dc32 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - Andy's Blog + BINARY BYTE BLOG -
- Cool Andy Logo -

Andy's blog

-

This site documents Andy's adventures

-
-
+

Article 1 Title:

From 1e90b845aae68fb43cb032cc0757cc611f44a306 Mon Sep 17 00:00:00 2001 From: AndyR <50073313+Andy-Robertson@users.noreply.github.com> Date: Wed, 2 Jun 2021 23:58:00 +0100 Subject: [PATCH 06/15] fleshed out the navigation system, and tweaked html/CSS Completed a major re-write of the navigation system which now properly uses pseudo classes, this was awesome to work on! Completed HTML structure Added content links Made many tweaks to the CSS --- css/style.css | 94 ++++++++++++++++++++-------- index.html | 166 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 222 insertions(+), 38 deletions(-) diff --git a/css/style.css b/css/style.css index 7d41ae4c..9b44d57b 100644 --- a/css/style.css +++ b/css/style.css @@ -4,7 +4,7 @@ background-color: #000; color: #fff; scroll-behavior: smooth; - scroll-padding-top: 8.75rem; + scroll-padding-top: 9.5rem; } body { @@ -27,7 +27,7 @@ body { background-color: #000; position: fixed; width: 100%; - height: 7rem; + height: 7.95rem; } .siteInfoContainer { @@ -36,7 +36,7 @@ body { } .siteInfoContainer p { - color: #29af22; + color: #baa309; font-weight: bold; } @@ -52,66 +52,94 @@ body { .pageNavigation { margin-right: 1.25rem; margin-top: 0.1875rem; + height: 7.75rem; } .pageNavigation > ul { display: flex; justify-content: space-around; list-style: none; + height: 2.3rem; } .pageNavigation > ul > li { text-decoration: none; font-weight: bold; - background-color: #fff; color: #000; - border: 1px solid #fff; - border-radius: 10px; margin: 0.5rem; width: 8.4375rem; + height: 1.2rem; } .pageNavigation > ul > li > a { text-decoration: none; font-weight: bold; display: flex; + width: 9rem; justify-content: center; + border: 2px solid #fff; border-radius: 10px; } -.getInTouch { - background-color: #fff; - color: #000; +.pageNavigation > ul > li:first-child > a:hover { + padding-bottom: 5.3rem; + border: 2px ridge #e6d408; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: 1.2s; + color: #e6d408; +} + +.pageNavigation > ul > li:nth-child(2) > a:hover { + padding-bottom: 5.4rem; + border: 2px ridge #cf7208; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: 1.2s; + color: #cf7208; } -.pageNavigation > ul > li a:hover, -.pageNavigation > ul > li a:focus { +.pageNavigation > ul > li:nth-child(3) > a:hover { + padding-bottom: 5.4rem; + border: 2px ridge #29af22; + border-radius: 8px 8px 0 0; + border-bottom: 0; + transition: 1.2s; + color: #29af22; +} + +.pageNavigation > ul > li:nth-last-child(1) > a { background-color: #fff; color: #000; - transition: 0.8s; } -.pageNavigation > ul > li .getInTouch:hover, -.pageNavigation > ul > li .getInTouch:focus { - background-color: #000; +.pageNavigation > ul > li:nth-last-child(1) > a:hover { + background-color: #6aa2e4; + border: 2px solid #6aa2e4; color: #fff; - transition: 1.5s; + transition: 1s; } /* Article styles */ /* Just a bit of fun to show the site information paragraph content can be used as a selector and to play with the nth-last-type() and last-of-type Pseudo selectors :) */ -.yourSelectorToTheLatestSoftwareDevelopment article:nth-last-of-type(2), +.yourSelectorToTheLatestSoftwareDevelopment article:nth-last-of-type(2) { + background-color: #000; + border: 2px ridge #cf7208; + border-radius: 4px; + margin: 0 0.625rem 0.625rem 0.625rem; +} + .yourSelectorToTheLatestSoftwareDevelopment article:last-of-type { background-color: #000; - border: 1px ridge #fff; + border: 2px ridge #29af22; border-radius: 4px; - margin: 0.625rem; + margin: 0 0.625rem 0.625rem 0.625rem; } -.articleSection article:first-child { - border: 1px groove #e6d408; +.yourSelectorToTheLatestSoftwareDevelopment article:first-child { + border: 2px groove #e6d408; margin: 0.625rem; border-radius: 15px; } @@ -120,19 +148,37 @@ body { padding-top: 7.5rem; } -article > p, -article > a { +article > p { margin-left: 3.125rem; margin-right: 3.125rem; - color: #fff; + color: #d67f3c; } article > h2 { margin-left: 0.625rem; color: #6aa2e4; + font-size: 1.5rem; +} + +.sourceLink { + font-size: 1rem; + color: #6bb590; + margin-left: 3.125rem; + text-decoration: none; } .footerDetails { text-align: center; font-size: 0.8rem; } + +.articleSemicolon { + font-size: 1.5rem; + font-weight: bold; + color: #fff; +} + +.mainCurlyBracket { + color: #baa309; + font-weight: bold; +} diff --git a/index.html b/index.html index 5a2f6a6a..90ba915d 100644 --- a/index.html +++ b/index.html @@ -34,13 +34,13 @@

THE BINARY BYTE

-
@@ -69,7 +68,6 @@

html-css:

gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque arcu.

-

Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien @@ -89,7 +87,6 @@

html-css:

tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis scelerisque lacus nec vestibulum.

-

Pellentesque felis enim, accumsan in accumsan vitae, dapibus suscipit est. In sollicitudin eget sem mattis euismod. Vestibulum @@ -130,7 +127,6 @@

tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus condimentum non. Duis eget lacus in felis feugiat rhoncus.

-

Aenean iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. Cras @@ -147,7 +143,6 @@

arcu arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, auctor id malesuada ut, aliquet faucibus purus.

-

Cras congue sagittis elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor @@ -161,7 +156,6 @@

Mauris lobortis ligula eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum rhoncus varius eros.

-

Donec dictum massa lacus, at elementum velit posuere non. Morbi maximus augue ut mi faucibus ornare. Etiam vitae mauris vel dolor @@ -169,7 +163,6 @@

pulvinar. Nullam at elementum quam, pharetra porttitor odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et dictum ex.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur molestie erat, nec accumsan velit tempor interdum. @@ -186,7 +179,6 @@

condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean iaculis semper diam, a condimentum leo pulvinar a.

-

Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, @@ -196,7 +188,6 @@

quam, pharetra porttitor odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et dictum ex.

-

forms-frameworks:

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur molestie erat, nec accumsan velit tempor interdum. @@ -225,7 +215,6 @@

forms-frameworks:

condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean iaculis semper diam, a condimentum leo pulvinar a.

-

Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur @@ -240,7 +229,6 @@

forms-frameworks:

blandit tellus in diam efficitur, sit amet iaculis sapien scelerisque.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur molestie erat, nec accumsan velit tempor interdum. @@ -257,7 +245,6 @@

forms-frameworks:

condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean iaculis semper diam, a condimentum leo pulvinar a.

-

Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur @@ -272,7 +259,6 @@

forms-frameworks:

blandit tellus in diam efficitur, sit amet iaculis sapien scelerisque.

-

Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras @@ -286,7 +272,6 @@

forms-frameworks:

sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit massa vitae semper. Quisque hendrerit eros non ultrices cursus.

-

Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, @@ -296,7 +281,6 @@

forms-frameworks:

quam, pharetra porttitor odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et dictum ex.

-

Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras @@ -310,7 +294,6 @@

forms-frameworks:

sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit massa vitae semper. Quisque hendrerit eros non ultrices cursus.

-

Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus, @@ -320,7 +303,6 @@

forms-frameworks:

quam, pharetra porttitor odio. Sed et sapien sit amet lorem consequat luctus. Maecenas et dictum ex.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur molestie erat, nec accumsan velit tempor interdum. @@ -337,7 +319,6 @@

forms-frameworks:

condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean iaculis semper diam, a condimentum leo pulvinar a.

-

Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur @@ -352,7 +333,6 @@

forms-frameworks:

blandit tellus in diam efficitur, sit amet iaculis sapien scelerisque.

- forms-frameworks:

};

-