Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions answers.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">

<head>
Comment thread
Kimaiyo077 marked this conversation as resolved.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/icon.png">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Answer Question | StackOverflow-Lite</title>
</head>

<body>
<header>
<div class="header">
<div id="heading">
<h1>StackOverflow-Lite</h1>
</div>
<nav class="nav-bar">
<ul>
<li>
<a href="index.html">Home</a>
</li>
</ul>
</nav>
</div>
</header>
<div>
<section class="question">
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work

<div class="user">
<img src="images/icon3.jpg" class="avatar" alt="avatar">
<span>@OlderUser:</span>
</div>
<h3>This is the subject of a question</h3>
<div class="subject">
<p>This is the body of a question. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, ullam?</p>
</div>
<span>1 Answer</span>
<button type="button" class="vote">Up Vote</button>
<button type="button" class="vote">Down Vote</button>
</section>
<div>
<form action="" name="add-answer" class="add-answer">
<label>Body</label>
<br>
<textarea name="add-answer" id="add-answer" rows="10" cols="70"> Enter your answer here</textarea>
<br>
<button type="submit" class="post-answer btn">Post answer</button>
</form>
</div>
<section class="answers">
<div class="subject">
<div class="user">
<img src="images/icon.png" class="avatar" alt="avatar">
<span>@NewUser</span>
</div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis incidunt odit</p>
</div>
</div>
</section>
</div>
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Goode

</body>

</html>
56 changes: 56 additions & 0 deletions css/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/** body styling **/

body{
text-align: center;
}


/** header styling**/

header a{
color: aliceblue;
text-decoration: none;
}

header a:hover{
color: aliceblue;
text-decoration: none;
}

section img{
height: 50px;
}

/** sign up form styling **/

form label{
font-size: 20px;
}

form input{
padding: 3px;
text-align: center;
font-size: 15px;
height: 30px;
width: 40%;
Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Say

border: 1.5px solid;
border-radius: 30px;
}

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this correct

section button{
color: cornsilk;
background: orangered;
height: 25px;
margin-top: 30px;
border-radius: 20px;
width: 20%;
}

/** footer styling**/

footer{
position: absolute;
height: 50px;
bottom: 0;
width: 95%;
}
177 changes: 177 additions & 0 deletions css/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
/* Global Themes */
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
line-height: 1.5;
margin: 0;
padding: 0;
background-color: lightgrey;
}
header{
background: #35424a;
color: white;
padding-top: 30px;
min-height: 90px;
border-bottom: orange 3px solid;
}

/* end of global theme*/

/* header theme */
.header{
width: 80%;
margin: auto;
overflow: hidden;
}

header nav a{
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}

ul{
margin: 0;
padding: 0;
}

header li{
display: inline-flex;
float: left;
padding: 0 20px 0 20px;
}

header #heading{
float: left;
}

header #heading h1{
margin: 0;
}

header nav{
float: right;
margin-top: 10px;
}

header a:hover{
color: orange;
text-decoration-line: underline;
font-weight: bold;
}

#search-bar{
float: right;
margin-bottom: 5px;
}

/** end of header theme**/

/** beginning of body styling**/
.btn{
border-radius: 10% 10% 10% 10%;
background: red;
color: white;
}

.btn:hover{
background: white;
color: red;
}

.content{
margin-left: 1opx;
}

section{
padding-left: 2em;
display: inline-block;
width: 80%;
margin-bottom: 2em;
border-top: #35424a 1px solid;
}

section a{
padding: 3px;
color: white;
background: #35424a;
text-decoration: none;
font-size: 16px;
border: orange 1px solid;
box-shadow: 1px 1px 1px darkgray;
}

section button.vote{
margin-left: 3px;
float: right;
color: white;
background: orange;
}

section button:hover{
color: orange;
background: white;
}

section a:hover{
color: red;
text-decoration-line: underline;
}

section div.subject{
padding: 5px;
}

textarea{
padding: 10px;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}

input{
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}

/** end of body styling**/

/** beginning of footer styling**/
footer{
margin-top: 0;
display: block;
padding: 20px;
color: white;
background: orange;
}

/** end of footer styling**/


/** other styling**/

button.delete{
float: right;
}

a.view{
background-color: lightgray;
text-decoration: none;
border: none;
color: black;
margin-left: 10px;
}

.avatar{
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}

.user{
font-size: 2em;
}
56 changes: 56 additions & 0 deletions css/profile.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/** profile page styling**/
.header{
padding: 0;
margin: 0;
height: 50px;
}
.heading{
padding: 0;
margin: 0;
}
.navbar{
float: left;
margin-left: 10px;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}

/** side navigation bar styling**/
.side-nav a{
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size: 15px;
color: #ccc;
display: block;
transition: 0.8s;
}
.side-nav .btn-close{
position: absolute;
top: 0;
right:22px;
margin-left: 50px;
font-size: 36px;
}
a{
color: black;
text-decoration: underline;
}
#user-stats{
float: right;
padding: 10px;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}
Binary file added images/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icon2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/icon3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading