first commit
This commit is contained in:
ruchi
commit
4753d14347
7 changed files with 198 additions and 0 deletions
1
.vscode/settings.json
vendored
Normal file
1
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
123,125
|
||||||
BIN
images/background.jpg
Normal file
BIN
images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
images/bg2.jpg
Normal file
BIN
images/bg2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/bg3.jpg
Normal file
BIN
images/bg3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
images/fb.png
Normal file
BIN
images/fb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
121
index.html
Normal file
121
index.html
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css?v=1.0">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>Questionnaire of the Facebook UI/UX</h1>
|
||||||
|
<a href="https://www.google.com/">
|
||||||
|
<img src="images/fb.png" alt="Facebook" class = "fb">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<section class = "survey_body">
|
||||||
|
<p style="font-size:150%;">Give us your opinion about <a = href="https://www.google.com/">Facebook</a></p>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
<div class="form-control">
|
||||||
|
<label id="name-label">First Name:</label>
|
||||||
|
<input type="text" placeholder="Enter the First Name" required >
|
||||||
|
</div>
|
||||||
|
<div class="form-control">
|
||||||
|
<label id="name-label">Last Name:</label>
|
||||||
|
<input type="text" placeholder="Enter the Last Name" required >
|
||||||
|
</div>
|
||||||
|
<div class="form-control">
|
||||||
|
<label id="name-label">E-mail:</label>
|
||||||
|
<input type="text" placeholder="Enter the Email" required >
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div id="questions">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="gender">
|
||||||
|
<form>
|
||||||
|
<label id="radio" >Did you enjoy your experience using Facebook</label>
|
||||||
|
<br>
|
||||||
|
<input type="radio" value="yes" name = "enjoy">
|
||||||
|
<label for="yes">Yes</label>
|
||||||
|
<input type="radio" value="no" name ="enjoy">
|
||||||
|
<label for="no">No</label>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<label >Select the web browser you are using:</label>
|
||||||
|
<form action="/action_page.php" method="get">
|
||||||
|
<label for="browser"></label>
|
||||||
|
<input list="browsers" name="browser" id="browser">
|
||||||
|
<datalist id="browsers">
|
||||||
|
<option value="Edge">
|
||||||
|
<option value="Firefox">
|
||||||
|
<option value="Chrome">
|
||||||
|
<option value="Opera">
|
||||||
|
<option value="Safari">
|
||||||
|
</datalist>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="radio" >Number of times a day you check Facebook.</label><br>
|
||||||
|
<input type="radio" name="Times " >0 times<br>
|
||||||
|
<input type="radio" name="Times " >1-2 times<br>
|
||||||
|
<input type="radio" name="Times " >3-4 times<br>
|
||||||
|
<input type="radio" name="Times " >5 times or more<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-control">
|
||||||
|
<label id="checkbox;">What does Facebook do better than its competitors?</label><br>
|
||||||
|
<input type="checkbox" value="">Recommending Friends</input><br>
|
||||||
|
<input type="checkbox" value="">User Feed</input><br>
|
||||||
|
<input type="checkbox" value="">Advertisements</input><br>
|
||||||
|
<input type="checkbox" value="">Usability</input><br>
|
||||||
|
<input type="checkbox" value="">Nothing</input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<div id="texto">
|
||||||
|
<p style="font-size:120%;">Please enter your comments here:<p>
|
||||||
|
<textarea rows="10" cols="100" maxlength="3000" placeholder="Enter your text...."></textarea>
|
||||||
|
</div>
|
||||||
|
<div id="submit"> <input type="Submit">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
76
styles.css
Normal file
76
styles.css
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
body {
|
||||||
|
background-color: #66BFBF;
|
||||||
|
text-align: center;
|
||||||
|
background-image: url("images/bg3.jpg");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font-family: "Helvetica ", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
color: rgb(45, 43, 170);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.survey_body{
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin: 20px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control{
|
||||||
|
padding-right: 43%;
|
||||||
|
text-align: right;
|
||||||
|
margin: 10px 0px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.texto{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-top: 20x;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-control{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 41%;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.questions{
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fb{
|
||||||
|
width: 10%;
|
||||||
|
height:auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgb(87, 139, 216);
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue