modification of user interface of the survey
This commit is contained in:
soyed
parent
b90d24396d
commit
0f86a7faeb
3 changed files with 86 additions and 64 deletions
BIN
public/images/facebook_ui.png
Normal file
BIN
public/images/facebook_ui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
|
|
@ -58,26 +58,15 @@ p{
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.questions {
|
||||
/* .questions {
|
||||
padding-top: 20px;
|
||||
}
|
||||
} */
|
||||
|
||||
.fb {
|
||||
width: 10%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* .footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: rgb(87, 139, 216);
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
.button {
|
||||
background-color: rgb(87, 139, 216);
|
||||
border-color: transparent;
|
||||
|
|
@ -97,33 +86,55 @@ p{
|
|||
}
|
||||
|
||||
/* Shared classes */
|
||||
.questions{
|
||||
margin: 4% 3%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Title section */
|
||||
#title {
|
||||
background-color: #F4C983;
|
||||
padding : 3% 7%;
|
||||
padding : 3% 4%;
|
||||
}
|
||||
/* Form Section */
|
||||
#form {
|
||||
padding: 3% 7%;
|
||||
padding: 3% 5%;
|
||||
text-align: center;
|
||||
/* background-color: #5B6D5B; */
|
||||
/* #F4C983; */
|
||||
}
|
||||
.SurveyIntro{
|
||||
margin: 3%;
|
||||
.surveryForm {
|
||||
/* #DDDDDD; */
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.surveyIntro{
|
||||
/* margin: 4%; */
|
||||
/* background-color: #F39189; */
|
||||
padding : 5%;
|
||||
}
|
||||
.headerImg{
|
||||
width: 40%;
|
||||
}
|
||||
.userInfo{
|
||||
margin: 2.5%;
|
||||
}
|
||||
|
||||
.surveryForm {
|
||||
/* #DDDDDD; */
|
||||
/* background-color: #5B6D5B; */
|
||||
.userLabel{
|
||||
margin: 3% 20%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.questions{
|
||||
margin: 5% 7%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.commentBox{
|
||||
margin: 4% 15%;
|
||||
}
|
||||
|
||||
.btnClass{
|
||||
margin: 4%;
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<title>Survey of Facebook UI</title>
|
||||
<meta name="description" content="Survey of Facebook UI">
|
||||
<meta name="author" content="SitePoint">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- Bootstrap Extensions -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
|
||||
|
|
@ -18,37 +19,40 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- The Nav section for the survey title---->
|
||||
<section id="title">
|
||||
<div class="container-fluid">
|
||||
<navbar>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h1>Questionnaire of the Facebook UI/UX</h1>
|
||||
<a href="https://www.facebook.com/"><img src="images/fb.png" alt="Facebook" class="fb"></a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<img src="images/facebook.jpg" alt="UI" class="facebook">
|
||||
<p style="font-size:150%;">Give us your opinion about <a href="https://www.facebook.com/">Facebook</a> user interface</p>
|
||||
</div>
|
||||
</div>
|
||||
</navbar>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- the form section for the survey -->
|
||||
<section id="form">
|
||||
<div class="container-fluid">
|
||||
<!-- the content of the form -->
|
||||
<form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);">
|
||||
<!-- The form header -->
|
||||
<div class="SurveyIntro">
|
||||
<h2>Facebook Evaluation Form</h2>
|
||||
<p>Please let us about your thoughts/experience with facebook user interface.</p>
|
||||
<div class="surveyIntro">
|
||||
<h1>Facebook UI/UX Survey</h1>
|
||||
<p>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</p>
|
||||
<!-- Carousel for different User Interfaces -->
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/fb.png" class="headerImg" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/facebook_ui.png" alt="UI" class="headerImg">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <img src="images/facebook_ui.png" alt="UI" class="headerImg"> -->
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<!-- the content of the form -->
|
||||
<!-- action="index.html" method="post" -->
|
||||
<form class="surveryForm" onsubmit="setTimeout(function(){window.location.reload();},10);">
|
||||
<!-- User Information -->
|
||||
<div class="userInfo">
|
||||
<h2>User Information</h2>
|
||||
|
|
@ -56,23 +60,22 @@
|
|||
</div>
|
||||
<!-- the text box for the user filling the form -->
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="row userLabel">
|
||||
<div class="col-6">
|
||||
<label for="fnameLabel">First Name</label>
|
||||
<input type="text" id="fname" name="firstName" placeholder="First Name" required>
|
||||
<input type="text" class="form-control" id="fname" name="firstName" placeholder="First Name" required>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="lnameLabel">Last Name</label>
|
||||
<input type="text" id="lname" name="lastName" placeholder="Last Name" required>
|
||||
<input type="text" class="form-control" id="lname" name="lastName" placeholder="Last Name" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<!-- style="float: right;" -->
|
||||
<div class="row userLabel">
|
||||
<div class="col-6">
|
||||
<label for="emailLabel">Email</label>
|
||||
<input type="text" id="email" name="email" placeholder="Email" required>
|
||||
<input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -145,26 +148,34 @@
|
|||
<input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- feeback section -->
|
||||
<!-- texto -->
|
||||
<div class="questions">
|
||||
<p style="font-size:120%;">Please write down your comments</p>
|
||||
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea>
|
||||
<div class="commentBox">
|
||||
<!-- <p>Please write down your comments</p>
|
||||
<textarea rows="10" cols="100" maxlength="3000" name="comments" placeholder=""></textarea> -->
|
||||
<label for="exampleFormControlTextarea1">Please write down your comments</label>
|
||||
<textarea class="form-control" name="comments" id="exampleFormControlTextarea1" rows="8"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<div class="btnClass">
|
||||
<button type="submit" class="button" id="bb">Submit</button>
|
||||
<!-- <button type="submit" class="button" >Submit</button> -->
|
||||
<button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer of the form -->
|
||||
<footer id="footer">
|
||||
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||
</footer>
|
||||
<!-- Sources -->
|
||||
<!-- https://cdn.vox-cdn.com/thumbor/8mDnaewReT78MFwXUsOJGp9u64Q=/0x0:2732x1536/920x0/filters:focal(0x0:2732x1536):format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19819048/News_Feed.jpg -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue