diff --git a/UI/images/Face With Open Mouth.svg b/UI/images/Face With Open Mouth.svg new file mode 100644 index 0000000..0834fdb --- /dev/null +++ b/UI/images/Face With Open Mouth.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/UI/images/Grinning Face.svg b/UI/images/Grinning Face.svg new file mode 100644 index 0000000..6b50cb8 --- /dev/null +++ b/UI/images/Grinning Face.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/UI/images/IMG-7870.JPG b/UI/images/IMG-7870.JPG deleted file mode 100644 index d472e25..0000000 Binary files a/UI/images/IMG-7870.JPG and /dev/null differ diff --git a/UI/images/Thumbs Up.svg b/UI/images/Thumbs Up.svg new file mode 100644 index 0000000..d479152 --- /dev/null +++ b/UI/images/Thumbs Up.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/UI/singleblogpage.css b/UI/singleblogpage.css new file mode 100644 index 0000000..cf1c0d2 --- /dev/null +++ b/UI/singleblogpage.css @@ -0,0 +1,441 @@ +/* Importing goole the outfit google font */ + +@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500&family=Roboto:wght@400;500;700&display=swap'); + +/* General body styles */ + +body { + font-family: 'Helvetica', sans-serif; + margin: 0; + padding: 0; + background-color: #0B0621; + color: #fff; + line-height: 1.4; + width: 86%; + margin: auto; +} + +/* styling the hamburger menu for smaller screens */ + +.hamburger{ + display: none; + cursor: pointer; +} + +.hamburger > span{ + border: 1px solid #fff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 2px; +} + +/* styling the navbar */ + +nav{ + /* background-color: rgb(0, 0, 0); */ + height: 80px; + width: 94%; + display: flex; + align-items: center; + justify-content: space-between; + font-family: 'Outfit', sans-serif; + font-family: 'Roboto', sans-serif; +} + +nav > .navlinks > ul > li{ + display: inline; + font-size: 20px; + font-weight: 400; +} + +nav > .logo > a, .navlinks > ul > li > a{ + text-decoration: none; + color: #fff; +} + +nav > .logo{ + font-size: 26px; + font-weight: bold; +} + +.navlinks > ul, .socials > ul{ + display: flex; + gap: 46px; + align-items: center; + padding: 10px; + list-style: none; + margin: 0px; + padding-inline-start: 0px; +} + +.login-btn{ + background-color: #1840CF; + padding: 4px 18px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 24px; +} + +.article{ + width: 750px; + margin: auto; +} + +.article > .image{ + width: 750px; + height: 400px; + background: url(images/IMG-7870.JPG); + background-size: cover; + background-position: center; + margin: auto; + margin-bottom: 20px; + margin-top: 0px; +} + +.article > .title{ + font-weight: bold; + width: clamp(0px, 100%, 500px); + font-size: 18px; +} + +.info{ + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 40px; + border-bottom: 2px solid #fff; +} + +.writer{ + display: flex; + align-items: center; + gap: 6px; +} + +.writer > .image{ + width: 40px; + height: 40px; + background-color: #BBB6B6; + border-radius: 50%; +} + +.date{ + display: flex; + gap: 30px; +} + +.body{ + margin: 40px 0px; + font-size: 17px; + line-height: 1.4; +} + +.reactions{ + display: flex; + align-items: center; + width: 750px; + margin: auto; + gap: 20px; + font-size: 20px; + margin-bottom: 30px; +} + +.reactions > .react{ + display: flex; + align-items: center; + gap: 10px; +} + +.react > div { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + background-color: #D9D9D9; + color: #000; + padding: 1px 14px; + border-radius: 26px; + cursor: pointer; +} + +.reactions > div:first-child > span{ + font-size: 22px; +} + +.react > div > span > img{ + width: 24px; + height: 24px; +} + +.react > div > span:first-child{ + font-size: 24px; +} + +.comments{ + width: 750px; + margin: auto; + position: relative; +} + +.commentform{ + display: flex; + flex-direction: column; + gap: 14px; +} + +.commentform > span:first-child{ + font-size: 22px; +} + +.commentform > div > input{ + width: 300px; + font-size: 16px; + padding: 10px 10px; + margin-bottom: 20px; + border: none; + background-color: #D9D9D9; + border-radius: 12px; + outline: none; +} + +.commentform > div > textarea{ + outline: none; + width:300px; + font-size: 16px; + padding: 10px 10px; + border: none; + background-color: #D9D9D9; + border-radius: 12px; +} + +.comments > button{ + position: absolute; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 100px; + left: 200px; + padding: 12px 20px; + border: none; + border-radius: 14px; + color: #fff; + background-color: #1840CF; + font-size: 18px; +} + +.topcomments{ + width: 750px; + margin: auto; + margin-top: 80px; +} + +.topcomments > span:first-child{ + font-size: 22px; +} + +.content > h4, .content > p{ + margin: 0px; +} + +.items{ + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 20px; +} + +.items > .item{ + display: flex; + gap: 14px; + align-items: flex-start; +} + +.item > .content{ + display: flex; + margin-top: 6px; + flex-direction: column; + gap: 4px; +} + +.imagee{ + min-width: 60px; + height: 60px; + background-color: #BBB6B6; + border-radius: 50%; +} + +footer { + margin: 40px 0px 30px 0px; + text-align: center; + font-size: 18px; +} + + + + + + +@media screen and (max-width: 990px) { + /* making the navlinks responsive */ + .navlinks > ul, .socials > ul{ + gap: 20px; + } + + .article, .reactions, .comments,.topcomments{ + width: 500px; + margin: auto; + } + + .reactions{ + margin-bottom: 30px; + } + + .article > .image{ + width: 500px; + height: 400px; + } +} + +@media screen and (max-width: 720px) { + body{ + width: 92%; + margin: auto; + } + + nav{ + height: 60px; + } + + nav > .logo{ + font-size: 20px; + } + + nav > .navlinks > ul > li{ + font-size: 18px; + } +} + +@media screen and (max-width: 675px) { + body{ + width: 86%; + margin: auto; + } + + .navlinks{ + display: none; + } + + .socials{ + display: none; + } + + .hamburger{ + display: block; + } + + nav{ + width: 86%; + margin: auto; + } + + .article, .reactions, .comments, .topcomments{ + width: 400px; + margin: auto; + } + + .topcomments{ + margin-top: 70px; + } + + .reactions{ + margin-bottom: 30px; + } + + .article > .image{ + width: 400px; + height: 300px; + } + + .date{ + display: flex; + gap: 10px; + } + + .article > .title{ + font-size: 16px; + } +} + +@media screen and (max-width: 530px){ + .article, .reactions, .comments, .topcomments{ + width: 94%; + margin: auto; + } + + .topcomments{ + margin-top: 70px; + } + + .article > .image{ + width: 96%; + height: 300px; + } +} +@media screen and (max-width: 500px){ + .reactions{ + gap: 10px; + width: 320px; + margin-bottom: 30px; + } + + .react > div > span:first-child{ + font-size: 18px; + } + + .reactions > div:first-child > span{ + font-size: 18px; + } + + .react > div > span > img{ + width: 20px; + height: 20px; + } + + .react > div{ + padding: 1px 8px; + } +} + +@media screen and (max-width: 400px){ + .commentform > div > input{ + width: 250px; + } + + .commentform > div > textarea{ + width: 250px; + } + + .comments > button{ + position: absolute; + width: 100px; + left: 170px; + padding: 12px 20px; + } +} + +@media screen and (max-width: 390px){ + .info{ + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 14px; + } + + .info > .date{ + padding-left: 8px; + } +} \ No newline at end of file diff --git a/UI/singleblogpage.html b/UI/singleblogpage.html new file mode 100644 index 0000000..d96a060 --- /dev/null +++ b/UI/singleblogpage.html @@ -0,0 +1,107 @@ + + + + + + + + Olivier | Blog + + + + + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ante velit, dictum quis justo non.

+
+
+
+ Billie jean +
+
+ 19 jan, 2022 + 5 min read +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis ullamcorper tortor. Cras auctor quam ut est sollicitudin mattis. Maecenas consectetur placerat ante, a vestibulum risus. Nam rhoncus augue at elit efficitur, nec euismod arcu mattis. Quisque sed elit ante. In lacinia purus sapien. Vivamus et vulputate quam. Ut consectetur mattis leo eu suscipit. Fusce libero ante, convallis nec congue at, fringilla sed dui. Nam mattis quam non commodo gravida. Nam sit amet elementum risus.

+

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id sodales nibh, ut laoreet lectus. Donec nibh lectus, tincidunt at posuere vel, molestie vitae leo. Sed mi mauris, gravida eu pellentesque ac, rutrum quis lorem. Vivamus consectetur, velit eget blandit dictum, nisi lectus tempor risus, at pretium augue augue luctus eros. Proin eleifend massa ac quam tempor, vel aliquam dui lacinia.

+

In in venenatis justo. Maecenas eu fermentum lacus. Quisque venenatis efficitur quam, at varius sem pharetra nec.Nunc eu dui et neque venenatis venenatis. Vestibulum blandit, quam in aliquet ornare, nunc nunc suscipit velit, a faucibus leo magna sed dolor. Nulla facilisi. Integer sodales mi vel diam commodo, accumsan efficitur elit sollicitudin. Suspendisse bibendum sollicitudin turpis, dictum aliquam felis euismod non. Pellentesque nec urna metus. Quisque pulvinar metus sed egestas tincidunt. Donec ut felis nunc.

+

Morbi in iaculis arcu. Curabitur ut ex vel lectus lacinia aliquam ut ac nulla. Nunc sed luctus quam, sed interdum metus. Pellentesque cursus ultrices purus, quis tempus risus varius sit amet. Cras commodo, lectus nec facilisis aliquam, arcu lectus bibendum lectus, in malesuada nisl nibh dictum lorem.

+

Integer sodales mi vel diam commodo, accumsan efficitur elit sollicitudin. Suspendisse bibendum sollicitudin turpis, dictum aliquam felis euismod non. Pellentesque nec urna metus. Quisque pulvinar metus sed egestas tincidunt. Donec ut felis nunc.

+
+
+ +
+
+ React: +
+
+ +
5
+
4
+
2
+
+
+ +
+
+ Leave a comment: +
+
+ +
+
+ +
+ +
+ Top comments: +
+
+
+
+

Billie Jean

+ Great share, I was wondering how everything works behind the scenes. +
+
+
+
+
+

Marie jane

+ Integer sodales mi vel diam commodo, accumsan efficitur elit sollicitudin. Suspendisse bibendum sollicitudin turpis, dictum aliquam felis euismod non. Pellentesque nec urna metus. Quisque pulvinar metus sed egestas tincidunt. Donec ut felis nunc. +
+
+
+
+
+

Billie Jean

+ Great share, I was wondering how everything works behind the scenes. +
+
+
+
+ + + + + \ No newline at end of file