diff --git a/images/contact.jpg b/images/contact.jpg index 3fb6df5..b798305 100644 Binary files a/images/contact.jpg and b/images/contact.jpg differ diff --git a/issues/images/contact.jpg b/issues/images/contact.jpg new file mode 100644 index 0000000..b798305 Binary files /dev/null and b/issues/images/contact.jpg differ diff --git a/issues/images/logo.png b/issues/images/logo.png new file mode 100644 index 0000000..2f3266e Binary files /dev/null and b/issues/images/logo.png differ diff --git a/issues/images/user-female.jpg b/issues/images/user-female.jpg new file mode 100644 index 0000000..a0ef8ba Binary files /dev/null and b/issues/images/user-female.jpg differ diff --git a/issues/images/user-male.jpg b/issues/images/user-male.jpg new file mode 100644 index 0000000..d147c4e Binary files /dev/null and b/issues/images/user-male.jpg differ diff --git a/issues/index.html b/issues/index.html new file mode 100644 index 0000000..456b4b7 --- /dev/null +++ b/issues/index.html @@ -0,0 +1,244 @@ + + + + + + + + Issues + + + + + + +
+
+ + +
+
+ + +
+
+
+

Issues

+ Add issue +
+
+
+ + +
+
+
+

Issue Name

+ + +
+

Statement:

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Maxime ducimus expedita dolore, commodi illo beatae eos recusandae sapiente quibusdam, + explicabo nesciunt? Optio consectetur expedita blanditiis repellat, + beatae numquam adipisci iste.

+
+
+
+

Discussions

+ +
+ + +
+
+
+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Excepturi itaque molestias magnam ipsa repudiandae, praesentium consequatur impedit, + earum

+
+ Reply +
+
+ 18 +
+
+ 1 +
+
+
+
+
+
+ + + + +
+
+
+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Excepturi itaque molestias magnam ipsa repudiandae, praesentium consequatur impedit, + earum

+
+ Reply +
+
+ 18 +
+
+ 1 +
+
+
+
+
+ + + +
+
+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Excepturi itaque molestias magnam ipsa repudiandae Lorem ipsum dolor sit + amet consectetur adipisicing elit. +

+
+ Reply +
+
+ 18 +
+
+ 1 +
+
+
+
+
+ + +
+ +
+
+ + +
+ +
+
+ +
+
+
+ 18 +
+
+ 1 +
+
+ View Details +
+ + + +
+
+ +
+
+
+ 18 +
+
+ 1 +
+
+ View Details +
+ + + +
+
+ +
+
+
+ 18 +
+
+ 1 +
+
+ View Details +
+ + + +
+
+ +
+
+
+ 18 +
+
+ 1 +
+
+ View Details +
+ + + +
+
+ +
+
+
+ 18 +
+
+ 1 +
+
+ View Details +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/issues/styles.css b/issues/styles.css new file mode 100644 index 0000000..5a2cfae --- /dev/null +++ b/issues/styles.css @@ -0,0 +1,369 @@ +:root { + --main: #f9cb3e; + --hover: #6d5a22; + --header-bg: #777777; + --title-text: #21190f; + --issue-bg: #fff5cf; +} + +@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + max-width: 1300px; + margin: auto; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +body { + overflow-x: hidden; +} + +/* Header */ +header { + position: sticky; + top: 0; + z-index: 99; + background-color: var(--header-bg); + width: 100%; + padding: 1.5rem 0; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +header .logo { + height: 60px; +} + +header .menu { + display: flex; + justify-content: space-between; + gap: 3rem; +} + +header .menu a { + color: white; + font-size: 1.2rem; + transition: all .5s ease; + -webkit-transition: all .5s ease; + -moz-transition: all .5s ease; + -ms-transition: all .5s ease; + -o-transition: all .5s ease; +} + +header .menu a:hover { + color: var(--main); + border-bottom: 1px solid var(--main); +} + +header .menu a.active { + color: var(--main); + border-bottom: 1px solid var(--main); +} + +header .menu .btn-auth { + background-color: var(--hover); + border: 2px solid var(--main); + padding: 1rem; + border-radius: .5rem; + -webkit-border-radius: .5rem; + -moz-border-radius: .5rem; + -ms-border-radius: .5rem; + -o-border-radius: .5rem; +} + + +header .menu .btn-auth:hover { + border-bottom: 2px solid var(--main); + color: white; +} +/* Hero */ +.hero { + min-height: 90vh; + background-image: url("./images/contact.jpg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + position: relative; +} + +.hero .content { + position: absolute; + bottom: 3rem; + background-color: var(--header-bg); + padding: 2rem; + min-width: 50vw; + min-height: 50vh; + display: flex; + justify-content: space-between; + align-items: center; +} + +.hero .title { + color: var(--main); + font-size: 4rem; + font-family: 'Kaushan Script', cursive; +} + +.hero a { + border: 2px solid var(--main); + background-color: var(--hover); + padding: 1rem 1.2rem; + color: white; + text-transform: capitalize; + align-self: end; + border-radius: .5rem; + -webkit-border-radius: .5rem; + -moz-border-radius: .5rem; + -ms-border-radius: .5rem; + -o-border-radius: .5rem; +} + +/* Issues */ +.issues { + padding: 100px 0 200px 0; +} + +.issues > .container { + display: flex; + justify-content: space-between; +} + +.issues-main { + flex: 1; + border-right: 2px solid black; + padding-right: 5rem; +} + +.issues-side { + flex: .3; + margin-left: 5rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.issues-main .issue-heading { + background-color: var(--main); + padding: 2rem; + text-transform: uppercase; + margin-bottom: 2rem; + font-size: 2rem; + font-weight: normal; + color: var(--title-text); +} + +.issues-main .issue { + margin-bottom: 5rem; +} + +.issues-main .issue-title { + margin-bottom: 1rem; + text-transform: uppercase; + font-size: 1.6rem; + font-weight: normal; + color: var(--title-text); +} + +.discussions .discussion-heading { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--main); + padding: 2rem; + margin-bottom: 3rem; +} + +.discussions .discussion-title { + font-size: 1.8rem; + font-weight: normal; +} + +.discussion >.container { + display: flex; + align-items: center; + gap: 2rem; + padding: 1rem 2rem; +} + +.discussion img { + width: 100px; + height: 100px; + border-radius: 50%; + -webkit-border-radius:; + -moz-border-radius:; + -ms-border-radius:; + -o-border-radius:; + border-bottom: 5px solid var(--main); +} + +.discussion .discussion-content { + border: 1px solid var(--title-text); + padding: 1.5rem; + display: flex; + justify-content: space-between; + gap: 3rem; +} + +.discussion .discussion-description { + flex: 1; +} + +.discussion .discussion-side { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; +} + +.discussion .discussion-side a { + color: var(--main); + text-decoration: underline; +} + +.discussion .discussion-cta { + background-color: var(--main); + padding: 0.5rem; + -moz-border-radius:; + border-radius: .5rem; + -webkit-border-radius:; + -ms-border-radius:; + -o-border-radius:; + display: flex; + gap: 1rem; + align-items: center; +} + +.discussion .discussion-cta i { + color: white; +} + +.discussion .discussion-upvote { + display: flex; + align-items: center; +} + +.discussion .discussion-upvote i { + margin-left: 0.3rem; +} + +.discussion .discussion-downvote i { + margin-right: 0.3rem; +} + +.discussion-container { + display: flex; + justify-content: space-between; + gap: 2rem; + align-items: center; + margin-left: 10rem; + margin-top: 2rem; +} + +.discussion-container img { + width: 100px; + height: 100px; + border-radius: 50%; + -webkit-border-radius:; + -moz-border-radius:; + -ms-border-radius:; + -o-border-radius:; +} + +.issues-side .issue { + position: relative; +} + +.issues-side .discussion-cta { + position: absolute; + background-color: gray; + bottom: .7rem; + left: 1.8rem; + display: flex; + gap: .3rem; + align-items: center; + padding: .2rem; + border-radius: .3rem; + -webkit-border-radius: .3rem; + -moz-border-radius: .3rem; + -ms-border-radius: .3rem; + -o-border-radius: .3rem; +} + +.issues-side .discussion-cta i { + color: white; +} + +.issues-side .discussion-downvote i { + margin-right: 0.2rem; +} + +.issues-side .discussion-upvote i { + margin-left: 0.2rem; +} + +.issues-side .issue a { + bottom: .7rem; + right: 1.8rem; + position: absolute; + background-color: var(--main); + color: white; + padding: .4rem; + border-radius: .3rem; + -webkit-border-radius: .3rem; + -moz-border-radius: .3rem; + -ms-border-radius: .3rem; + -o-border-radius: .3rem; + font-size: .8rem; +} + +.issues-side .issue-img { + background-color: transparent; + padding: .5rem; + transition: all .5s ease; + -webkit-transition: all .5s ease; + -moz-transition: all .5s ease; + -ms-transition: all .5s ease; + -o-transition: all .5s ease; + display: flex; + justify-content: center; + align-items: center; + border-radius: 2rem; + -webkit-border-radius: 2rem; + -moz-border-radius: 2rem; + -ms-border-radius: 2rem; + -o-border-radius: 2rem; +} + +.issues-side .issue-img:hover { + background-color: var(--issue-bg); +} + +.issues-side img { + padding: 1rem 0; + width: 220px; + height: 220px; + border-radius: .3rem; + -webkit-border-radius: .3rem; + -moz-border-radius: .3rem; + -ms-border-radius: .3rem; + -o-border-radius: .3rem; + filter: grayscale(100%); + -webkit-filter: grayscale(100%); +} \ No newline at end of file