Modification to the user interface
This commit is contained in:
soyed
parent
9e2f13cb5c
commit
85c474c482
2 changed files with 78 additions and 126 deletions
|
|
@ -4,116 +4,59 @@ body {
|
|||
|
||||
h1 {
|
||||
font-family: "Helvetica ", sans-serif;
|
||||
font-size: 3rem;
|
||||
font-size: 3.5rem;
|
||||
color: rgb(45, 43, 170);
|
||||
padding: 5%;
|
||||
}
|
||||
h2{
|
||||
font-size: 2rem;
|
||||
padding: 1%;
|
||||
}
|
||||
h3{
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5%;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size : 1rem;
|
||||
}
|
||||
|
||||
.browser {
|
||||
padding-left: 10px;
|
||||
hr{
|
||||
border: dotted #FFD591 6px;
|
||||
border-bottom: none;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.survey_body {
|
||||
/* background-color: #53dfe4; */
|
||||
/* margin: 20px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; */
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding-right: 43%;
|
||||
text-align: left;
|
||||
margin: 10px 0px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.texto {
|
||||
text-align: center;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.two {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding-bottom: 30px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.btn-control {
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40%;
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* .questions {
|
||||
padding-top: 20px;
|
||||
} */
|
||||
|
||||
.fb {
|
||||
width: 10%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: rgb(87, 139, 216);
|
||||
border-color: transparent;
|
||||
margin: 0 auto;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgb(103, 163, 253);
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btnClass {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Shared classes */
|
||||
|
||||
|
||||
|
||||
/* Title section */
|
||||
#title {
|
||||
background-color: #F4C983;
|
||||
padding : 3% 4%;
|
||||
}
|
||||
/* Form Section */
|
||||
#form {
|
||||
padding: 3% 5%;
|
||||
padding: 7% 15%;
|
||||
text-align: center;
|
||||
/* background-color: #5B6D5B; */
|
||||
/* #F4C983; */
|
||||
background-image: url('images/bg3.jpg');
|
||||
}
|
||||
.surveryForm {
|
||||
/* #DDDDDD; */
|
||||
background-color: #fafafa;
|
||||
border-radius: 2rem;
|
||||
border: #5B6D5B solid 2rem;
|
||||
}
|
||||
|
||||
.surveyIntro{
|
||||
/* margin: 4%; */
|
||||
/* background-color: #F39189; */
|
||||
padding : 5%;
|
||||
}
|
||||
.headerImg{
|
||||
width: 40%;
|
||||
.carouselSection {
|
||||
margin: 2% 8%;
|
||||
}
|
||||
|
||||
.headerImg1{
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.headerImg2{
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.userInfo{
|
||||
margin: 2.5%;
|
||||
}
|
||||
|
|
@ -123,27 +66,6 @@ p{
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.questions{
|
||||
margin: 5% 7%;
|
||||
text-align: left;
|
||||
padding-left: 15%;
|
||||
}
|
||||
|
||||
|
||||
.commentBox{
|
||||
margin: 4% 15%;
|
||||
}
|
||||
|
||||
.btnClass{
|
||||
margin: 4%;
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
#footer {
|
||||
padding: 3% 4%;
|
||||
background-color: #ffd591;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
|
|
@ -166,4 +88,40 @@ p{
|
|||
content: '<';
|
||||
font-size: 55px;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.commentBox{
|
||||
margin: 4% 15%;
|
||||
}
|
||||
.questions{
|
||||
margin: 5% 7%;
|
||||
text-align: left;
|
||||
padding-left: 10%;
|
||||
padding-right: 4%;
|
||||
}
|
||||
|
||||
.btnClass {
|
||||
text-align: center;
|
||||
margin: 4%;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: rgb(87, 139, 216);
|
||||
border-color: transparent;
|
||||
margin: 0 auto;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: rgb(103, 163, 253);
|
||||
color: #ffffff;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Footer section */
|
||||
#footer {
|
||||
padding: 3% 4%;
|
||||
background-color: #ffd591;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
</head>
|
||||
|
||||
<body style="background-image: url('images/bg3.jpg');">
|
||||
<body>
|
||||
<!-- the form section for the survey -->
|
||||
<section id="form">
|
||||
<div class="container-fluid">
|
||||
|
|
@ -27,18 +27,18 @@
|
|||
<!-- The form header -->
|
||||
<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>
|
||||
<h3>What are your thoughts/experience with <a href="https://www.facebook.com">facebook</a> user interface?</h3>
|
||||
<!-- Carousel for different User Interfaces -->
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div id="carouselExampleControls" class="carousel slide carouselSection" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="images/fb.png" class="headerImg" alt="fb">
|
||||
<img src="images/fb.png" class="headerImg1" alt="fb">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/facebook_ui.png" alt="UI" class="headerImg">
|
||||
<img src="images/facebook_ui.png" alt="UI" class="headerImg2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="images/facebook.jpg" class="headerImg" alt="UI">
|
||||
<img src="images/facebook.jpg" class="headerImg2" alt="UI">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <img src="images/facebook_ui.png" alt="UI" class="headerImg"> -->
|
||||
</div>
|
||||
<hr>
|
||||
<!-- User Information -->
|
||||
|
|
@ -84,16 +83,15 @@
|
|||
<!-- Quetion 1 and 2 -->
|
||||
<div class="row questions">
|
||||
<!-- Question 1 -->
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<label for="" id="radio"><span>1.</span> Do you use the Facebook user interface often?</label>
|
||||
<br>
|
||||
<!-- style="margin-right: 4px;" -->
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<input type="radio" name="question1" value="yes">
|
||||
<label for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="col-6">
|
||||
<input type="radio" name="question1" value="no">
|
||||
<label for="no">No</label>
|
||||
</div>
|
||||
|
|
@ -115,7 +113,7 @@
|
|||
<!-- Question3 and 4 -->
|
||||
<div class="row questions">
|
||||
<!-- Question 3-->
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<label id="radio"><span>3.</span> How difficult is reading characters on the screen?</label><br>
|
||||
<input type="radio" name="question3"> Very Hard<br>
|
||||
<input type="radio" name="question3"> Somewhat hard<br>
|
||||
|
|
@ -123,7 +121,7 @@
|
|||
<input type="radio" name="question3"> Very easy<br>
|
||||
</div>
|
||||
<!-- Question 4 -->
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<label id="checkbox;"><span>4.</span> Please state your level of agreement for the following:</label><br>
|
||||
<input type="checkbox" name="question4" value="Use of terms throughout the system is consistent "> Use of terms throughout the system is consistent</input><br>
|
||||
<input type="checkbox" name="question4" value="Position of messages on the screen is consistent "> Position of messages on the screen is consistent</input><br>
|
||||
|
|
@ -135,7 +133,7 @@
|
|||
<!-- Question 5 and 6 -->
|
||||
<div class="row questions">
|
||||
<!-- Question 5-->
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<label id="radio"><span>5.</span> In which section of facebook does the user interface look most awful?</label><br>
|
||||
<input type="radio" name="question5"> Photos<br>
|
||||
<input type="radio" name="question5"> News<br>
|
||||
|
|
@ -143,24 +141,20 @@
|
|||
<input type="radio" name="question5"> Games<br>
|
||||
</div>
|
||||
<!-- Question 6 -->
|
||||
<div class="col-5">
|
||||
<div class="col-6">
|
||||
<label id="radio"><span>6.</span> Is there a problem in UI that bothers you?</label><br>
|
||||
<input type="text" name="question6" placeholder="Enter the name of your problem" size="43">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- feeback section -->
|
||||
<!-- texto -->
|
||||
<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" >Submit</button> -->
|
||||
<button type="submit" id="bb" class="btn btn-lg btn-outline-primary">Submit</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue