batuhan-basoglu/Questionnaire-of-the-Facebook-UI-UX-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added some fix.

Browse source
This commit is contained in:
Batuhan Berk Başoğlu 2021-01-27 20:07:42 -05:00
parent cea5e7a81c
commit 54c5461440
2 changed files with 85 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
index.html
View file

@ -1,85 +1,90 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>Survey of Facebook UI</title> <title>Survey of Facebook UI</title>
<meta name="description" content="Survey of Facebook UI"> <meta name="description" content="Survey of Facebook UI">
<meta name="author" content="SitePoint"> <meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0"> <link rel="stylesheet" href="css/styles.css?v=1.0">
</head> </head>
<body> <body>
<div> <div>
<h1>Questionnaire of the Facebook UI/UX</h1> <h1>Questionnaire of the Facebook UI/UX</h1>
<a href="https://www.google.com/"> <a href="https://www.google.com/">
<img src="images/fb.png" alt="Facebook" class = "fb"> <img src="images/fb.png" alt="Facebook" class="fb">
</a> </a>
</div> </div>
<section class = "survey_body"> <section class="survey_body">
<p style="font-size:150%;">Give us your opinion about <a = href="https://www.google.com/">Facebook</a></p> <p style="font-size:150%;">Give us your opinion about <a=href="https: //www.google.com/">Facebook</a></p>
<form> <form>
<div class="form-control"> <div class="form-control">
<label id="name-label">First Name:</label> <label id="name-label">First Name:</label>
<input type="text" placeholder="Enter the First Name" required > <input type="text" placeholder="Enter the First Name" required>
</div> </div>
<div class="form-control"> <div class="form-control">
<label id="name-label">Last Name:</label> <label id="name-label">Last Name:</label>
<input type="text" placeholder="Enter the Last Name" required > <input type="text" placeholder="Enter the Last Name" required>
</div> </div>
<div class="form-control"> <div class="form-control">
<label id="name-label">E-mail:</label> <label id="name-label">E-mail:</label>
<input type="text" placeholder="Enter the Email" required > <input type="text" placeholder="Enter the Email" required>
</div> </div>
<br> <br>
<div id="questions"> <div id="questions">
<div class="gender"> <div class="two">
<form> <form>
<label id="radio" >Did you enjoy your experience using Facebook</label> <label id="radio">Did you enjoy your experience using Facebook</label>
<br> <br>
<input type="radio" value="yes" name = "enjoy"> <div style="margin-right: 4px;">
<label for="yes">Yes</label> <input type="radio" value="yes" name="enjoy">
<input type="radio" value="no" name ="enjoy"> <label for="yes">Yes</label>
<label for="no">No</label> <input type="radio" value="no" name="enjoy">
<label for="no">No</label>
</div>
</form> </form>
<br> <br>
</div> </div>
<div class="box"> <div class="box">
<label >Select the web browser you are using:</label> <label>Select the web browser you are using:</label>
<form action="/action_page.php" method="get"> <div style="margin-left: 22px;">
<label for="browser"></label> <form action="/action_page.php" method="get">
<input list="browsers" name="browser" id="browser"> <label for="browser"></label>
<datalist id="browsers"> <input list="browsers" name="browser" id="browser">
<option value="Edge"> <datalist id="browsers">
<option value="Firefox"> <option value="Edge">
<option value="Chrome"> <option value="Firefox">
<option value="Opera"> <option value="Chrome">
<option value="Safari"> <option value="Opera">
</datalist> <option value="Safari">
</form> </datalist>
</form>
</div>
</div> </div>
<div class="btn-control"> <div class="btn-control">
<label id="radio" >Number of times a day you check Facebook.</label><br> <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 ">0 times<br>
<input type="radio" name="Times " >1-2 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 ">3-4 times<br>
<input type="radio" name="Times " >5 times or more<br> <input type="radio" name="Times ">5 times or more<br>
</div> </div>
<div class="btn-control"> <div class="btn-control">
@ -92,12 +97,13 @@
</div> </div>
<br> <br>
<div id="texto"> <div class="texto">
<p style="font-size:120%;">Please enter your comments here:<p> <p style="font-size:120%;">Please enter your comments here:
<textarea rows="10" cols="100" maxlength="3000" placeholder="Enter your text...."></textarea> <p>
</div> <textarea rows="10" cols="100" maxlength="3000" placeholder="Enter your text...."></textarea>
<div id="submit"> <input type="Submit">
</div> </div>
<button type="submit" class="button">Submit</button>
</div>
</form> </form>
@ -109,13 +115,11 @@
<p>Website created by Ruchira, Sam, Batuhan, and Kene</p> <p>Website created by Ruchira, Sam, Batuhan, and Kene</p>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

26
styles.css
View file

@ -13,6 +13,14 @@ h1{
} }
.browser{
padding-left: 10px;
}
.texto{
padding-left: 35px;
}
.survey_body{ .survey_body{
background-color: #ffffff; background-color: #ffffff;
margin: 20px; margin: 20px;
@ -32,18 +40,16 @@ h1{
text-align: center; text-align: center;
} }
.gender{ .two{
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
padding-top: 20x;
padding-left: 10px; padding-left: 10px;
} }
.box{ .box{
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
padding-top: 20px; padding-bottom: 30px;
padding-bottom: 20px;
} }
.btn-control{ .btn-control{
@ -75,3 +81,15 @@ h1{
} }
.button {
background-color: rgb(87, 139, 216);
border-color: transparent;
color: #ffffff;
font-size: 20px;
}
.button:hover {
background-color: rgb(103, 163, 253);
color: #ffffff;
border-color: transparent;
}