diff --git a/UI/index.html b/UI/index.html new file mode 100644 index 0000000..f939467 --- /dev/null +++ b/UI/index.html @@ -0,0 +1,48 @@ + + + + + + Stackoverflow-Lite|Signup + + + + +
+ +
+ + +
+

Welcome to Stackoverflow-Lite

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + + +
+ + + diff --git a/UI/profile.html b/UI/profile.html new file mode 100644 index 0000000..7a44cf1 --- /dev/null +++ b/UI/profile.html @@ -0,0 +1,312 @@ + + + + + Stackoverflow-Lite|Forum + + + + + +
+ +
+ +
+
+
+ + + + + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+
+ Username +
+ 0 questions +
+ 0 answers +
+
+ +
+
+ +
+
+ + + +
+
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+
+
+ +
+ username +
+ 0 Answers +
+ 2/2/2018 @ 11:00 am +
+ +
+

sed do eiusmod tempor inckjvkfjlv sfdjdkjsflsdn djfguifr jfdjfkwd Lorem ipsum dolor sit amet, consectetur adipisicing ollit anim id est laborum.

+ + +
+
+ +
+ +
+ + + + +
+
+ +
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+
+
+
+
+
+ Ask Question + +
+ +
+ + +
+
+ + + diff --git a/UI/question.html b/UI/question.html new file mode 100644 index 0000000..b29ec15 --- /dev/null +++ b/UI/question.html @@ -0,0 +1,322 @@ + + + + + Stackoverflow-Lite|Question_details + + + + + + +
+ +
+ +
+
+
+ + + + + +
+
+ + +
+
+
+ +
+
+ +
+ + Home + + + + + All Questions + + + + Hot questions + + +
+

consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+

Answers

+
+
+ + + Username + + 0 votes +
+ +
+ 22 Aug 2017 @ 11:000 am +
+ Upvote Downvote +
+
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

Comments

+
+
+ Username + 22 Aug 2017 @ 11:000 am + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+
+ Username + 22 Aug 2017 @ 11:000 am + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ + +
+
+
+
+ +
+
+ + + Username + + 0 votes +
+
+ 22 Aug 2017 @ 11:000 am +
+ Upvote Downvote +
+
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

Comments

+
+
+ Username + 22 Aug 2017 @ 11:000 am + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+
+ Username + 22 Aug 2017 @ 11:000 am + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ + +
+
+
+
+ +
+

Your answer

+
+ + +
+
+
+ +
+ +
+ +
+ + + username +
+ 0 + votes +
+ 2/2/2018 @ 11:00 am + + +
+ +
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ +
+
+
+ Ask Question + +
+ +
+ + +
+
+ + + diff --git a/UI/signup.html b/UI/signup.html new file mode 100644 index 0000000..f2fd095 --- /dev/null +++ b/UI/signup.html @@ -0,0 +1,63 @@ + + + + + + Stackoverflow-Lite|Signup + + + + +
+ +
+ + +
+
+
+ Signup + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ Already have an account? Signin here +
+ +
+ + + diff --git a/UI/static/css/img/avatar.png b/UI/static/css/img/avatar.png new file mode 100644 index 0000000..4d955d8 Binary files /dev/null and b/UI/static/css/img/avatar.png differ diff --git a/UI/static/css/img/background.jpg b/UI/static/css/img/background.jpg new file mode 100644 index 0000000..2107020 Binary files /dev/null and b/UI/static/css/img/background.jpg differ diff --git a/UI/static/css/img/hamburger_icon.png b/UI/static/css/img/hamburger_icon.png new file mode 100644 index 0000000..41d4509 Binary files /dev/null and b/UI/static/css/img/hamburger_icon.png differ diff --git a/UI/static/css/img/refresh_btn.png b/UI/static/css/img/refresh_btn.png new file mode 100644 index 0000000..7d80418 Binary files /dev/null and b/UI/static/css/img/refresh_btn.png differ diff --git a/UI/static/css/img/search_image.png b/UI/static/css/img/search_image.png new file mode 100644 index 0000000..d028f54 Binary files /dev/null and b/UI/static/css/img/search_image.png differ diff --git a/UI/static/js/script.js b/UI/static/js/script.js new file mode 100644 index 0000000..dd2c920 --- /dev/null +++ b/UI/static/js/script.js @@ -0,0 +1,31 @@ +//this module is intented to run web js script + +//init ask_question modal +var question_modal =document.getElementById('question_modal') + +var isopen=false; +// init ask questio button +var ask_question=document.getElementById('ask_question'); + + + +// initialize the cancel button +var cancel=document.getElementById('cancel'); + +// display the question_modal when clicked +function open_model () { + question_modal.classList.toggle('question_modal') +} + +//closes the question_modal on cancel clicked + +function close_modal(){ + question_modal.classList.toggle('question_modal') +}; + +//close the question_modal if the user closes otside the question_modal +window.onclick= function (event) { + if(event.target==question_modal){ + question_modal.classList.toggle('question_modal') + } +} diff --git a/ui/forum.html b/ui/forum.html new file mode 100644 index 0000000..e55f984 --- /dev/null +++ b/ui/forum.html @@ -0,0 +1,405 @@ + + + + + Stackoverflow-Lite|Forum + + + + + +
+ +
+ +
+
+
+ + + + + +
+
+ + +
+
+
+ +
+
+ +
+ + Home + + + + + All Questions + + + + Hot questions + + +
+
+

Recently Asked Questions

+
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+ +
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+ +
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+
+ +
+ +
+ + + username +
+ + 0 + votes +
+ 2/2/2018 @ 11:00 am +
+ +
+ +

I am a question click me to see my details

+ +
+
+ +
+ +
+ + + + +
+
+

Users

+
+ +
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+ + Username + 0 questions + 0 answers +
+
+
+
+
+
+
+ Ask Question + +
+ +
+ + +
+
+ + + diff --git a/ui/signin.html b/ui/signin.html new file mode 100644 index 0000000..b61ac75 --- /dev/null +++ b/ui/signin.html @@ -0,0 +1,52 @@ + + + + + + Stackoverflow-Lite|Signup + + + + +
+ +
+ + +
+
+
+ Signin + +
+ +
+ +
+ Forget password? +
+ Don't have an account? Signup here +
+ +
+ + + diff --git a/ui/static/css/style.css b/ui/static/css/style.css new file mode 100644 index 0000000..4916c58 --- /dev/null +++ b/ui/static/css/style.css @@ -0,0 +1,706 @@ +/**style sheet**/ +/**rvwove margin**/ +* +{ + margin: 0; +} +/**clear float attribute**/ +.clear +{ + clear: both; +} +/**style body**/ +body +{ + background-image: url("img/background.jpg"); + animation: fadein 3s; + scroll-behavior: smooth; +} + + +/* style legend */ +legend +{ + font-size: 2vw; + font-style: normal; + font-weight: bold; + font-family: monospace; + color: ghostwhite; +} +/**styling up the labels**/ +label +{ + font-size: 1.2vw; + font-style: normal; + font-weight: bold; + color: ghostwhite; +} +/**edit button**/ +button +{ + background-color: #4CAF50; + color: white; + padding: 12px; + border: none; + cursor: pointer; + box-shadow: 5px 5px 5px #888888; + width: 100%; + border-radius: 10px; + font-family: monospace; + opacity: 0.8; +} + +/* Full-width inputs */ +input[type=text], +input[type=password], +input[type=email], +textarea +{ + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display:inline-block; + border-radius: 10px; + border: 1px solid #ccc; + box-sizing: border-box; + opacity: 0.8; + font-size: 1.2vw; + font-weight: bold; + color: blue; + font-weight: bold; + font-family: serif; + +} + +input[type=text]:hover, +input[type=password]:hover, +input[type=email]:hover, +textarea:hover +{ + opacity: 1; +} + +/**formaat a**/ +a +{ + text-decoration: none; + text-decoration-style: solid; + color: #2196F3; +} +/**animations**/ +/**fade in animations**/ + +@keyframes fadein +{ + from{opacity: 0;} + to{opacity: 1;} +} + +@-webkit-keyframes fade +{ + from{opacity: 0;} + to{opacity: 1;} +} +@-moz-keyframes fade +{ + from{opacity: 0;} + to{opacity: 1;} +} + + + +/***style navigation bar*/ +/**style header**/ +.nav_header +{ + height:40px; + position: fixed; + top: 0; + padding: 10px; + width: 100%; + transition: top 3s; +} +/**format logo class**/ +.logo +{ + float: left; +} + +.logo span +{ + font-weight: 400; + font-size: 2vw; + align-self: center; + text-align: center; + float: left; +} + +/**format hambuger icon**/ + +.logo img +{ + width: 2%; + height: 2%; + opacity: 0.8; + float: left; + margin-left: 10px; + margin-right: 10px; +} +.logo img:hover +{ + opacity: 1; +} + +/ +.right_bar img +{ + width: 5%; +} +.search_form +{ + width: 60%; + float: left; +} + + +/**format right_bar**/ +.right_bar +{ + float: right; + padding: 10px; +} + +.right_bar span +{ + font-size: 1.2vw; + width: 20%; + text-align: center; + margin-right: 50px; + margin-bottom: 10px + padding: 10px; + opacity: 0.8; + color: ghostwhite; +} + +.right_bar span:hover +{ + opacity: 1; +} + +/**edit signin_content**/ +.signin_content +{ + margin-left: 35%; + margin-top: 10%; + width: 25%; +} +/**style signup content**/ +.signin_content button +{ + margin-top: 10px; + margin-bottom: 10px +} + +.signin_form +{ + width: 90%; +} +.signin_content button:hover +{ + opacity: 1; +} + +.signin_content fieldset +{ + border-radius: 10px; +} + +.signin_content a:hover +{ + color: ghostwhite; + +} +.signin_content fieldset:hover +{ + box-shadow: 3px 3px 3px #888888; +} + +/**style ask question and side nav bar**/ +.side_navbar +{ + float: left; + width: 10%; + margin-left: 1%; + padding: 2%; + box-shadow: 1px 1px 1px ghostwhite; + border-width: thin; + border-color: cyan; + height: 100vh; +} +/**style ask question button**/ +/**format search field**/ +.search_form input[type=search] +{ + width: 50%; + border-radius: 5px; + opacity: 0.9; + float: left; + color: ghostwhite; + margin-bottom: 20px; + font-size: 1.4vw; + background: none; + margin-left: 25%; + margin-top: 9%; +} + +.nav_header input[type=search]:hover +{ + opacity: 1; +} +/**edit logo search button**/ +#search_btn +{ + opacity: 0.8; + width: 12%; + margin-top: 9%; + margin-left: 0.5%; +} + +#search_btn:hover +{ + opacity: 1; +} +/**styling create button**/ +#ask_question +{ + float: left; + margin-top: 5%; + margin-bottom: 20px; + width:10%; + margin-left: 2%; + border-radius: 50px; + box-shadow: 5px 5px 5px ghostwhite; + color: ghostwhite; + background: none; + font-size: 1vw; + font-style: oblique; + font-weight: bold; + opacity: 0.8; +} + +#ask_question:hover +{ + opacity: 1; +} +/**styling sidebar**/ +.side_navbar img +{ + width: 10%; + margin-left: 45%; + margin-top: 5%; +} + +.side_navbar span +{ + font-size: 1.2vw; + color: ghostwhite +} + +.side_navbar a{ + padding: 10px; + display: block; + opacity: 0.8; +} +.side_navbar a:hover{ + box-shadow: 2px 1px 1px ghostwhite; + opacity: 1; +} + +/**style question holder**/ +.question_holder +{ + + float: left; + width: 100%; + margin-bottom: 1%; + background-color: #9FA8DA; + box-shadow: 2px 2px 2px ghostwhite; + border-radius: 10px; + padding: 1%; +} + +/**format answers user_holder**/ +.question_description +{ + float: left; + width: 100%; + margin-bottom: 1%; + background-color: #C5CAE9; + box-shadow: 2px 2px 2px ghostwhite; + border-radius: 10px; + padding: 2%; + font-size: 1.2vw; +} + +/**answer_labels**/ + +/**style answer_holder**/ +.answer_holder +{ + float: left; + width: 100%; + margin-bottom: 1%; + background-color: #E8EAF6; + box-shadow: 2px 2px 2px ghostwhite; + border-radius: 10px; + padding: 1%; + font-size: 1.2vw; +} + +.answer_holder img +{ + width: 2%; + float: left; +} + +.answer_holder a +{ + color: black; + font-size: 1vw; + opacity: 0.8; +} + +.answer_holder a:hover{ + opacity: 1; +} + +/***styling upvote and downvote***/ + +.votes +{ + float:right; + padding-left: 15%; +} + +.votes span +{ + margin-right: 2%; +} + +/**styling answers textarea**/ + +.answer_form h3{ + color: ghostwhite; +} + +.answer_form button{ + float: right; + width: 20%; + opacity: 0.8; +} +.answer_form button:hover{ + opacity: 1; +} +.answer_holder textarea +{ + float: left; + width: 85%; + padding-left: 1%; + padding-right: 1%; +} +/***styling commnet***/ +#answer +{ + box-shadow: 1px 1px 1px #607D8B; + background-color: #CFD8DC; + padding: 1%; + font-size: 1.2vw; + margin-bottom: 1%; + border-radius: 10px; +} +/**styling answers labels i.e votes, username**/ + +.answers_labels{ + background-color: white; + height: 2%; + width: 100%; + border-radius: 10px; +} + + +#answer_username{ + margin-left: 1%; +} +/**styling comment button**/ +.answer_holder button{ + float: left; + width: 10%; + margin-left: 1%; + padding: 1%; + margin-top: 3%; + font-size: 1vw; + opacity: 0.8; +} +.answer_holder button:hover{ + opacity: 1; +} + + +/**styling forum content**/ +.forum_content +{ + float: left; + margin-left: 1%; + border-radius: 10px; + width: 60%; + overflow-x: hidden; + overflow-y: scroll; + height: 110vh; + padding: 1%; +} + +/** styling comeholder **/ + +.comment_holder span{ + float: right; +} +.comment_labels{ + margin-bottom: 1%; + box-shadow: 1px 1px 1px #B0BEC5; + border-radius: 10px +} +/**style forum_title**/ +#forum_title +{ +padding-left: 3%; +margin-left: 35%; +font-size: 2vw; +font-style: oblique; +font-family: monospace; +} + +h4{ + font-size: 1.5vw; +} + +/**style question_title**/ + +#question_title{ + margin-bottom: 1%; + margin-left: 16%; + font-size: 2vw; +} + +/**style labels**/ +.username{ + font-size: 1.5vw; + color: ghostwhite; + opacity: 0.8; +} + +.username:hover{ + opacity: 1; +} + +.question_header +{ + float: left; + color: black; + margin-left: 1%; + font-size: 1.2vw; + opacity:0.8; +} + +.question_header:hover{ + opacity: 1; +} + +.question_numbers +{ + margin-right: 1%; + font-size: 1vw; + color: ghostwhite; + opacity: 0.8; +} + +.numbers_labels +{ + font-size: 1vw; + color: ghostwhite; + opacity: 0.8; +} + +.time{ + font-size: 1vw; + color: ghostwhite; + opacity: 0.8; +} + +/*style profile pic*/ +.user_image img{ + width: 8%; + height:8%; + border-radius: 50px; + float: left; + margin-right: 1%; +} + + +/**style right_navbar**/ +.users{ + float: left; + width: 20%; + padding: 1%; + overflow-y: scroll; + overflow-x: hidden; + height: 110vh; +} + +.user_holder{ + margin-bottom: 1%; + box-shadow: 1px 1px 1px #CFD8DC; + border-radius: 20px; + padding: 3%; +} +.users a{ + display: block; + margin-left: 22%; + margin-bottom: 1%; + font-size: 1.2vw; + opacity: 0.8; + color: ghostwhite; +} + +.users a:hover{ + opacity: 1; +} + +.users span{ + display: block; + font-size: 1.2vw; + margin-bottom: 1%; + color: ghostwhite; + margin-left: 22%; + opacity: 0.8; +} +.right_bar_container img{ + width: 5%; + margin-left: 1%; +} +.users img{ + width: 20%; + float: left; + border-radius: 50px; +} +/**format user account**/ + /**format user image**/ + + #user_account_image{ + width: 80%; + float: left; + margin-left: 1%; + border-radius: 50px; + margin-bottom: 3%; + } + + #sort_by{ + display: block; + background: none; + color: white; + opacity: 0.8; + font-size: 1.2vw; + box-shadow: 1px 1px 1px grey; + width: 100%; + padding: 5%; + margin-top: 10%; + background: #5C6BC0; + border-radius:10px; + opacity: 0.8; + } + + #sort_by:hover{ + opacity: 1; + } + + option { + color: black; + box-shadow: 1px 1px 1px grey; + border-radius: 10px; + } + + .hide{ + display: none; + } +/**styling head_labels***/ + .head_labels a + { + padding-left: 1%; + padding-right: 1%; + margin-left: 1%; + color: ghostwhite; + box-sizing: border-box; + box-shadow: 1px 1px 1px ghostwhite; + } + + /**style the question modal**/ + .question_modal{ + display: block; + position: fixed; + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + animation: fadein 1s; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } +/**format textarea***/ + textarea{ + font-size: 1.2v + } + + .question_modal form{ + width: 40%; + font-size: 1.2vw; + border-radius: 10px; + margin-left: 25%; + margin-top: 10%; + } + .question_modal fieldset{ + border-radius: 10px; + font-size: 1.2vh; + } + #ask{ + width: 30%; + float: right; + font-size: 1.2vw; + } + + #cancel{ + width: 30%; + float: left; + background-color: red; + font-size: 1.2vw; + } + .show{ + display: block; + } +.home_content{ + color: white; + width: 50%; + margin-top: 15%; + margin-left: 25%; + font-size: 1.2vw; +} + +.home_content p{ + margin-top: 2%; + margin-bottom: 2%; +} + +.home_content button{ + width: 40%; + float: right; +}