Skip to content

Instantly share code, notes, and snippets.

@timothy-okoduwa

timothy-okoduwa/timothy.html

Last active October 10, 2022 15:14
Show Gist options
  • Save timothy-okoduwa/8e6516ccfcfde57f495177f7af3732e4 to your computer and use it in GitHub Desktop.
Save timothy-okoduwa/8e6516ccfcfde57f495177f7af3732e4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
timothy.html
<!doctype html>
<html lang="en">
<head>
<script src="https://use.fontawesome.com/c96e5d2d10.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./Assets/images/feedback.ico">
<title>Ufeedback</title>
<link rel="stylesheet" href="./Assets/stylesheet/style.css">
<link rel="stylesheet" href="./Assets/stylesheet/Responsivness.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand flex-up" href="./index.html">
<img src="./Assets/images/feeLogo.svg" alt="" width="50" class="d-inline-block align-text-top">
<span class="feed">ufeedback</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="centrall">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 danger">
<li class="nav-item"style="margin-left:20px; border:#FD6C5E; margin-top:30px">
<div class="dropdown picturee ">
<div onclick="myFunction2()" class="dropbtn2" style="margin-bottom: 20px;">Our Company
<i class="fa fa-chevron-down endd2" aria-hidden="true" style="font-size: 13px;color: #0B1644;" ></i>
</div>
<div id="myDropdown2" class="dropdown-content2">
<a class="blockk">About Us</a>
<a class="blockk">Contact Us</a>
</div>
</div>
</li>
<li class="nav-item dropdown serve " style="margin-left:20px; border: #FD6C5E;">
<a class="nav-link dropdown-toggle Act22" href="./About.html" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-family: 'Lexend Deca';
font-style: normal;
font-weight: 300;
font-size: 16px;
color: #0B1644;" >
Our Company
<i class="fa fa-chevron-down " aria-hidden="true " style="font-size: 13px;color: #0B1644;"></i>
</a>
<!-- wweb dropdown -->
<div class="rrrr">
<ul class="dropdown-menu Cdrop " >
<div>
<div class="container" >
<div class="row">
<div class="col d-flex justify-content-start mt-4 ">
<div class="grab">
<div>
<div class="DropNav active ">
<div style="padding-left: 20px;">
<a href="./About.html" class="">About</a>
<div class="know">Know more about<br/> ufeedback</div>
</div>
</div>
<div class="DropNav mt-3 active ">
<div style="padding-left: 20px;">
<a href="./Contact.html">Contact us</a>
<div class="know">Want to give us feedback or ask question? Contact us</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</li>
<li class="nav-item"style="margin-left:20px; border:#FD6C5E;">
<div class="dropdown picturee ">
<div onclick="myFunction()" class="dropbtn" style="margin-bottom: 20px;">Services
<i class="fa fa-chevron-down endd" aria-hidden="true" style="font-size: 13px;color: #0B1644;" ></i>
</div>
<div id="myDropdown" class="dropdown-content">
<a class="blockk">User Interviews</a>
<a class="blockk">User Testing</a>
<a class="blockk">Surveys</a>
<a class="blockk">Card sorting</a>
<a class="blockk">Click testing</a>
<a class="blockk">Participant Recruitment</a>
</div>
</div>
</li>
<li class="nav-item dropdown serve" style="margin-left:20px; ">
<a class="nav-link dropdown-toggle Act22" href="./Services.html" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-family: 'Lexend Deca';
font-style: normal;
font-weight: 300;
font-size: 16px;
color: #0B1644;">
Services
<i class="fa fa-chevron-down " aria-hidden="true" style="font-size: 13px;color: #0B1644;" ></i>
</a>
<ul class="dropdown-menu Cdrop2">
<div class="container tryhard" >
<div class="d-flex justify-content-center w-100">
<div class="row">
<div class="col-12 col-lg-4 ">
<div class="grab2">
<div class="DropNav active ">
<div style="padding-left: 20px;">
<a href="./About.html" class="">User Interviews</a>
<div class="know2">Get to know your users through Interviews</div>
</div>
</div>
</div>
<div class="grab2 " style="margin-top: 20px;">
<div class="DropNav active " >
<div style="padding-left: 20px;">
<a href="./About.html" class="">Card sorting</a>
<div>
<img src="./Assets/images/tag.svg" alt="" >
</div>
<div class="know2">Watch how users think their train of thoughts</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 ">
<div class="grab2">
<div class="DropNav active ">
<div style="padding-left: 20px;">
<a href="./About.html" class="">User Testing</a>
<div class="know2">Build the right products through moderated/<br/>unmoderated test</div>
</div>
</div>
</div>
<div style="padding-top: 20px;">
<div class="DropNav active " >
<div style="padding-left:20px">
<a href="./About.html" class="">Click testing</a>
<div >
<img src="./Assets/images/tag.svg" alt="" >
</div>
<div class="know2">A cost-effective way to ensure your design works for your users.</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 ">
<div class="grab2">
<div class="DropNav active ">
<div style="padding-left: 20px;">
<a href="./About.html" class="">Surveys</a>
<div >
<img src="./Assets/images/tag.svg" alt="" >
</div>
<div class="know2">Collect data from your user to get their opinion</div>
</div>
</div>
</div>
<div class="grab2" style="margin-top: 20px;">
<div class="DropNav active " >
<div style="padding-left:20px">
<a href="./About.html" class="">Participant Recruitment</a>
<div>
<img src="./Assets/images/tag.svg" alt="" >
</div>
<div class="know2">Agile UX research for confident decisions</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
</li>
<li class="nav-item" style="margin-left:20px;">
<a class="nav-link Act22" href="./Pricing.html" style="font-family: 'Lexend Deca';
font-style: normal;
font-weight: 300;
font-size: 16px;
color: #0B1644;">Pricing</a>
</li>
<li class="nav-item"style="margin-left:20px;">
<a class="nav-link Act22" href="./Tester.html" style="font-family: 'Lexend Deca';
font-style: normal;
font-weight: 300;
font-size: 16px;
width: 180px;
color: #0B1644;">Become a Tester</a>
</li>
</ul>
</div>
<form class="push" role="search">
<button class="btn Btn mt-2" type="submit" style="background: #0B1644; color: white;" >Get Started</button>
<button class="btn Btn mt-2 mx-3 " type="submit"style="">Sign in</button>
</form>
</div>
</div>
</nav>
<!-- hero part -->
<div style="margin-top: 77px;">
<div class="background">
<div class="container " style="padding-top: 90px;">
<div class="row ">
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="tool">
A tool to give users a<br/> better experience
</div>
<div class="select">
We select the right audience, ensure quality insights to <br/>develop your user centered products
</div>
<div style=" margin-top: 40px;">
<button class="btn Btn2 mt-2" type="submit" style="background:#FD6C5E; color: white;" >Get Started</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 mt-4">
<div>
<img src="./Assets/images/lady2.svg" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- our clients -->
<div style="margin-top: 80px;">
<div class="trust ">
<div class="container ">
<div class="clien">Our Clients</div>
<div class="people">Trusted by experience-leading brands across the globe</div>
<div class=" pb-5 " >
<div class=" Start">
<div class="row Sstat pt-5">
<div class="col-12 col-md-3 Relen">
<div class="Each-icon">
<img class="bnw" src="./Assets/images/seed.svg" alt=""style="width: 90%;" >
<p class="pt-4 coins"></p>
</div>
</div>
<div class="col-12 col-md-3 Relen">
<div class="Each-icon">
<img class="bnw" src="./Assets/images/cowry.svg" alt=""style="width: 90%;" >
<p class="pt-4 coins"></p>
</div>
</div>
<div class="col-12 col-md-3 Relen">
<div class="Each-icon">
<img class="bnw" src="./Assets/images/hotels.svg" alt="" style="width: 80%;">
<p class="pt-4 coins"></p>
</div>
</div>
<div class="col-12 col-md-3 Relen">
<div class="Each-icon">
<img class="bnw" src="./Assets/images/aso.svg" alt=""style="width: 80%;">
<p class="pt-4 coins"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- reasons why ufeedback -->
<div class="centerrr">
<div class="why">Why ufeedback?</div>
<div class="convince">We bring your users closer. </div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="tool">
Make the right<br/>design by testing<br/>with users
</div>
<div class="select">
Experience the joy and frustrations your users face when using your product.
</div>
</div>
</div>
<div class="col-12 col-md-6 mt-4">
<div>
<img src="./Assets/images/emojis2.svg" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-12 col-md-6 mt-4">
<div>
<img src="./Assets/images/chat2.svg" alt="" style="width: 100%;">
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="tool">
Get to know your<br/> users through<br/> Interviews
</div>
<div class="select">
With a video based interview, get to know what the expecations of your users are.
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row mt-5">
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="tool">
Work with the right<br/> insights
</div>
<div class="select">
Use research to identify market opportunities and to address challenges from competitors.
</div>
</div>
</div>
<div class="col-12 col-md-6 mt-4">
<div>
<img src="./Assets/images/teaching.svg" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
<!-- user insights -->
<div style="background-color: #F5F5F5;margin-top:130px;padding: 50px;">
<div class="container ">
<div class="row">
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="tool">User insight,<br/> delivered in real-time</div>
<div class="select">
Improve your products, services, and<br/> brands by watching user interact with<br/> your product and meet with user for <br/> feedback through interviews
</div>
<div style=" margin-top: 20px;">
<button class="btn Btn2 mt-2" type="submit" style="background:#FD6C5E; color: white;" >Get Started</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 mt-5 d-flex justify-content-center">
<div>
<img src="./Assets/images/stripes.svg" alt="" style="width: 100%;">
</div>
</div>
</div>
</div>
</div>
<!-- Frequently Asked Questions -->
<div style="background-color: #19244F; object-fit: contain;">
<div class="element" style="width: 97%; ">
<div class="FAQ">Frequently Asked Questions </div>
<div >
<div class="questions">
</div>
<div class="d-grid gap-3" style="display: flex;">
<div class="p-2 bg-transparent border rounded" style="height: 94px;">
<div class="answers">
<div>What is Ufeedback?</div>
<div>+</div>
</div>
</div>
</div>
<br/>
<div class="d-grid gap-3" style="display: flex;">
<div class="p-2 bg-transparent border rounded" style="height: 94px;">
<div class="answers">
<div>How many particpants can I get to tes a product<br/> with ufeedback?</div>
<div>+</div>
</div>
</div>
</div>
<br/>
<div class="d-grid gap-3" style="display: flex;">
<div class="p-2 bg-transparent border rounded" style="height: 94px;">
<div class="answers">
<div>Will ufeedback give me accurate information about my product?</div>
<div>+</div>
</div>
</div>
</div>
<br/>
<div class="d-grid gap-3" style="display: flex;">
<div class="p-2 bg-transparent border rounded" style="height: 94px;">
<div class="answers">
<div>How much do I get from testing a product with Ufeedback ?</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="arrow">See more →</div>
</div>
</div>
<!-- enter your email address-->
<div>
<div class="container mt-5 mb-5" style="background-color: #F5F5F5; border-radius: 24px;" >
<div class="row d-flex align-items-center" style="height: 240px;">
<div class="col-12 col-md-6 d-flex justify-content-center">
<div>
<div class="Sign" >Sign up for free</div>
<div class="start">Start getting product feedback today </div>
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-center">
<div class="form-group">
<input type="text" placeholder="Enter your email" class="innput"/>
<button class="btn Btn3 mt-2" type="submit" style="background:#FD6C5E; color: white;" >Get Started</button>
</div>
</div>
</div>
</div>
</div>
<!-- footer element -->
<div style="background-color: #edf1f7;margin-top: 32px; ">
<div class="stripes pb-5" style="width: 100%;">
<div class="container ">
<div class="trick">
<div class="row w-100">
<div class="col-12 col-md-2 flex-up2 " >
<div class="mt-4 ">
<div class="">
<a class="" href="#">
<img src="./Assets/images/logo.svg" alt="" width="100" class="mt-3">
<!-- <span class="feed">ufeedback</span> -->
</a>
</div>
<div style="margin-top: 50%;">
<div class="icons">
<img src="./Assets/images/instagram.svg" alt="" >
<img src="./Assets/images/twitter.svg" alt="" >
<img src="./Assets/images/linkedin.svg" alt="" >
</div>
<div class="proivacy">Terms of Service | Privacy Policy</div>
</div>
</div>
</div>
<div class="col-12 col-md-2 ">
<div class="mt-5">
<div class="company">
Company
</div>
<div class="navvs">
<div class="mt-5">company</div>
<div class="mt-5">About us</div>
</div>
</div>
</div>
<div class="col-12 col-md-2" >
<div class="mt-5">
<div class="company">
Partners
</div>
<div class="navvs">
<div class="mt-5">Our Clients</div>
<div class="mt-5">Testimonals</div>
</div>
</div>
</div>
<div class="col-12 col-md-2 ">
<div class="mt-5">
<div class="company">
Payment
</div>
<div class="navvs">
<div class="mt-5">Pricing</div>
<div class="mt-5">FAQ</div>
</div>
</div>
</div>
<div class="col-12 col-md-2 d-flex " >
<div class="mt-5">
<div class="company">
Work with us
</div> <div class="navvs">
<div class="mt-5">Register as a tester</div>
<div class="mt-5">Career</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 60px;">
<hr/>
</div>
<div class="copyright">Copyright 2022. Ufeedback</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".one").click(function () {
$(this).addClass("active").siblings().removeClass("active");
});
});
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment