diff options
| -rw-r--r-- | assets/css/style.css | 84 | ||||
| -rw-r--r-- | assets/images/dummy-sol1.png | bin | 0 -> 52117 bytes | |||
| -rw-r--r-- | assets/images/dummy-sol2.png | bin | 0 -> 154029 bytes | |||
| -rw-r--r-- | user_solutions.html | 38 |
4 files changed, 102 insertions, 20 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index a91d984..e176aef 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -210,11 +210,14 @@ main .search img { /*************************** USER SOLUTIONS - user_solutions.html *********************************/ +main div { + background: none; +} main #solutions button#add-solution { display: inline-block; border-radius: 10px; - background-color: #F79F79; + background-color: #87B6A7; color: white; width: 110px; @@ -223,58 +226,64 @@ main #solutions button#add-solution { main p#show-path { display: inline-block; margin-left: 30px; + } main #solutions { - margin-top: 2%; + padding-top: 2%; text-align: left; width: 86%; height: 100%; - border-top: 1px solid black; - border-left: 1px solid black; - border-right: 1px solid black; margin-left: 7%; + } -[id^="sol-"] { - border-radius: 10px; - padding-top: 30px; +main [id^="sol-"] { + color: #333; + margin-top: 30px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } -[id^="sol-"] .post-info { +main [id^="sol-"] .post-info { + display: flex; + justify-content: space-between; background: #F79F79; + padding-top: 2%; + border-top-right-radius: 15px; + border-top-left-radius: 15px; + padding-bottom: 5px; } -[id^="sol-"] .left{ +main [id^="sol-"] .left{ float: left; display: inline-block; } -[id^="sol-"] .right { +main [id^="sol-"] .right { float: right; display: inline-block; } -[id^="sol-"] img.user-image { +main [id^="sol-"] img.user-image { border-radius: 50%; border: 2px solid darkgray; margin-left: 25px; } -[id^="sol-"] img.user-image, [id^="sol-"] p.username { +main [id^="sol-"] img.user-image, [id^="sol-"] p.username { display: inline-block; } -[id^="sol-"] p.username { +main [id^="sol-"] p.username { vertical-align: top; } -[id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button { +main [id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button { display: inline-block; } -[id^="sol-"] button.upvote, [id^="sol-"] button.downvote { +main [id^="sol-"] button.upvote, [id^="sol-"] button.downvote { background-color: transparent; background-repeat:no-repeat; border: none; @@ -283,24 +292,59 @@ main #solutions { outline:none; } -[id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img { +main [id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img { width: 30px; height: 30px; } -[id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes { +main [id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes { vertical-align: top; } -[id^="sol-"] p.username { +main [id^="sol-"] p.username { margin-left: 10px; } -[id^="sol-"] p.num-downvotes { +main [id^="sol-"] p.num-downvotes { margin-right: 25px; } +main [id^="sol-"] div.user-sol h3 { + background-color: #f0e9e1; + padding: 10px; + padding-left: 20px; + margin-top: 0; + margin-bottom: 0; +} + +main [id^="sol-"] div.user-sol p{ + padding: 10px; + margin: 0; + background-color: white; +} + +main [id^="sol-"] div.user-sol p img { + width: 60%; + height: auto; +} + +main [id^="sol-"] div.comments { /* BORDER RADIUS ISN'T WORKING - sad :( */ + background-color: #f0e9e1; + border-bottom-right-radius: 15px; + border-bottom-left-radius: 15px; +} + +main [id^="sol-"] div.comments:hover { + +} + +main [id^="sol-"] div.comments h3 { + padding: 10px; + padding-left: 20px; + margin-top: 0; + margin-bottom: 0; +} diff --git a/assets/images/dummy-sol1.png b/assets/images/dummy-sol1.png Binary files differnew file mode 100644 index 0000000..1fb3427 --- /dev/null +++ b/assets/images/dummy-sol1.png diff --git a/assets/images/dummy-sol2.png b/assets/images/dummy-sol2.png Binary files differnew file mode 100644 index 0000000..80eb52b --- /dev/null +++ b/assets/images/dummy-sol2.png diff --git a/user_solutions.html b/user_solutions.html index f0261f0..c57a9e8 100644 --- a/user_solutions.html +++ b/user_solutions.html @@ -60,10 +60,48 @@ <p class="num-downvotes">-1</p> </div> </div> + + <div class="user-sol"> + <h3>Solution</h3> + <p><img src="assets/images/dummy-sol1.png"> </p> + </div> + + <div class="comments"> + <h3><span>3</span> comments</h3> + + </div> + + </section> + + <section id="sol-2"> + <div class="post-info"> + <div class="left"> + <img class="user-image" src="assets/images/user-default.png"> + <p class="username">janeDoe456</p> + </div> + + <div class="right"> + <button class="upvote"><img src="assets/images/up_arrow.png"></button> + <p class="num-upvotes">4</p> + <button class="downvote"><img src="assets/images/down_arrow.png"></button> + <p class="num-downvotes">-8</p> + </div> + </div> + + <div class="user-sol"> + <h3>Solution</h3> + <p><img src="assets/images/dummy-sol2.png"> </p> + </div> + + <div class="comments"> + <h3><span>2</span> comments</h3> + + </div> </section> + </div> |
