One - Feedback Modal v2

Developer
Ryan Hulseberg
Size
7,838 Kb
Views
28,336
  1. One - Feedback Modal v2 Previews
  2. One - Feedback Modal v2 HTML Codes
  3. One - Feedback Modal v2 CSS Codes
  4. One - Feedback Modal v2 JS Codes

How do I make an one - feedback modal v2?

What is a one - feedback modal v2? How do you make a one - feedback modal v2? This script and codes were developed by Ryan Hulseberg on 11 September 2022, Sunday.

One - Feedback Modal v2 Previews
IQ Test

One - Feedback Modal v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One - Feedback Modal v2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="mobile-nav" role="navigation"></nav>
<nav class="primary-nav" role="navigation"> <!-- Left Navigation --> <ul class="primary-nav__list"> <li class="primary-nav__list--box"> <a href="#" title="Dashboard"><img class="logo" height="30" src="https://s33.postimg.org/rbs19qhkv/ou_logo.png"></a> </li> <li class="primary-nav__list--item active"> <a href="#">Courses</a> </li> <li class="primary-nav__list--item"> <a href="#">Course Search</a> </li> <li class="primary-nav__list--item"> <a href="#">Resources</a> </li> </ul>
</nav>
<!-- Header -->
<div class="header"> <div class="header__inner"> <div class="header__menu__button"> <h1>Active Courses</h1> <svg class="dropdown-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="6px" viewBox="0 0 16.038 8.706" enable-background="new 0 0 16.038 8.706" xml:space="preserve"> <line class="dropdown-icon-line-left" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="7.681" y1="8.353" x2="15.685" y2="0.354"></line> <line class="dropdown-icon-line-right" fill="red" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="8.357" y1="8.353" x2="0.354" y2="0.354"></line> </svg> </div> <div class="header__menu"> <ul class="header__menu__items"> <li class="active">(7) Active Courses</li> <li>(4) Upcoming Courses</li> <li>(123) Archived Courses</li> </ul> </div> </div>
</div>
<!-- Course Cards -->
<section class="card__container"> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>General Chemistry</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>97 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-97"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Seminar in Biochemistry</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>TBA</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>40 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-40"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Practicum in Organic Chemistry</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>M 8:20am - 11:10am, W 8:30am - 9:20am</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>40 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-40"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Long Term Liberal Studies 2016</h5> <h2>General Anthropology</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>Online</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>20 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-20"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Lab-CHEM</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>40 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-40"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Senior Thesis</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>80 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-80"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Senior Thesis</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>60 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-60"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Directed Readings</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>20 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-20"></div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__header"> <h5>Spring 2017</h5> <h2>Independent Studies</h2> <span>Chem 1315-002</span> </div> <div class="card__content"> <p>January 17, 2017 - May 5, 2017</p> <p>MWF 11:30am - 12:20pm</p> <div class="card__seats"> <h5>Seats</h5> </div> <div class="card__available"> <h5>80 out of 100</h5> </div> <div class="card__bar"> <div class="card__bar--value value-80"></div> </div> </div> </div> </div>
</section>
<!-- Help Modal -->
<div id="support" class="modal"> <div class="modal__header"> <div class="close-container"> <span class="close thick"></span> </div> <h4>Need Help?</h4> <p>With so many different ways today to find information online, it can sometimes be hard to know where to go to first.</p> <ul class="modal__header--links"> <li><a href="facebook.com">Support Articles</a></li> <li><a href="facebook.com">Start Live Chat</a></li> </ul> <ul class="modal__header--links"> <li><a href="facebook.com">(405) 325-4357</a></li> <li><a href="facebook.com">[email protected]</a></li> </ul> </div> <div class="modal__content"> <p>How’s your experience with One? We’re constantly improving and would love to hear your feedback!</p> <button class="link-cta launch-feedback">Provide Feedback</button> </div>
</div>
<!-- Feedback Modal -->
<div id="feedback" class="modal"> <div class="modal__content"> <h4>Provide Feedback</h4> <div class="close-container"> <span class="close thick"></span> </div> <div class="modal__dropdown"> <span>General Feedback</span> </div> <div class="modal__input modal__input--message"> <input placeholder="Please provide a descriptive explanation of the issue, feature request, or feedback."> </div> <button class="primary-cta">Send Feedback</button> </div>
</div>
<div class="feedback__button"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

One - Feedback Modal v2 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
* { box-sizing: border-box;
}
body { font: 14px/23.8px Open Sans, Sans-serif; margin: 0; background: #F9F9F9; -webkit-font-smoothing: antialiased;
}
h4 { font-size: 16px; margin-bottom: 15px;
}
p { margin-bottom: 20px;
}
.container { max-width: 1160px; margin: 0 auto; padding: 20px 15px; overflow: hidden; -webkit-animation-delay: 3s; animation-delay: 3s;
}
@media (min-width: 768px) and (max-width: 1024px) { .container { padding: 30px; }
}
@media (min-width: 1024px) { .container { padding: 40px 30px; }
}
button { font-size: 14px; font-family: Open Sans; font-weight: 400; margin: 10px; padding: 14px 36px; text-decoration: none; border: none; color: #fff; border-radius: 3px; -webkit-transition: ease 0.35s all; transition: ease 0.35s all;
}
.primary-cta { background: #1DA8FF;
}
.primary-cta:hover { background-color: #50bcff; cursor: pointer;
}
.link-cta { background: none; color: #1DA8FF; font-weight: 600; padding: 14px 10px; margin: 15px 0;
}
.link-cta:hover { color: #0070b6; cursor: pointer;
}
.primary-nav { display: none; width: 100%; height: 52px; top: 0; left: 0; background: #9D1B1D; z-index: 2;
}
@media (min-width: 768px) and (max-width: 1024px) { .primary-nav { display: block; }
}
@media (min-width: 1024px) { .primary-nav { display: block; }
}
.primary-nav__list { margin: 0; list-style: none;
}
.primary-nav__list li { line-height: 52px; display: inline-block;
}
.primary-nav__list--item { position: relative; float: left; margin-bottom: 0; font-size: 14px;
}
.primary-nav__list--item.active a { background: #841617;
}
.primary-nav__list--item a { position: relative; display: inline-block; color: #fff; font-family: Open Sans; font-weight: 400; text-decoration: none; padding: 0 18px; line-height: 52px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.primary-nav__list--item a:hover { background: #841617;
}
.primary-nav__list--box { height: 52px; position: relative; float: left; margin-bottom: 0; font-size: 14px;
}
.primary-nav__list--box a { position: relative; display: inline-block; color: #fff; font-family: Open Sans; font-weight: 400; text-decoration: none; padding: 0 18px; line-height: 52px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.primary-nav__list--box img { vertical-align: middle; margin-bottom: 3px;
}
.mobile-nav { display: block; width: 100%; height: 52px; top: 0; left: 0; background: #9D1B1D; z-index: 2;
}
@media (min-width: 768px) and (max-width: 1024px) { .mobile-nav { display: none; }
}
@media (min-width: 1024px) { .mobile-nav { display: none; }
}
.header { background: #b01d1f;
}
.header__inner { max-width: 1160px; margin: 0 auto; padding: 60px 5px; overflow: hidden; -webkit-animation-delay: 3s; animation-delay: 3s;
}
@media (min-width: 768px) and (max-width: 1024px) { .header__inner { padding: 60px 20px; }
}
@media (min-width: 1024px) { .header__inner { padding: 60px 30px; }
}
.header__inner h1 { display: inline-block; font-size: 24px; color: white; padding-right: 5px;
}
.header__menu { position: absolute; top: 122px; background: white; padding: 10px 0; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); min-width: 240px; -webkit-transition: all 0.3s; transition: all 0.3s; transform: translateY(-10%); -webkit-transform: translateY(-10%); visibility: hidden; opacity: 0;
}
.header__menu.open { transform: translateY(0); -webkit-transform: translateY(0); visibility: visible; opacity: 1;
}
.header__menu__button { box-sizing: border-box; width: 66.66667%; float: left; padding-left: 10px; padding-right: 10px; padding: 20px 10px; opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.header__menu__button:hover { cursor: pointer;
}
.header__menu__button .dropdown-icon { display: inline-block; margin-bottom: 2px;
}
.header__menu__button.hide { opacity: 0; visibility: hidden;
}
.header__menu li { padding: 12px 20px; color: #525466;
}
.header__menu li:hover { background: #F3FAFF; cursor: pointer;
}
.header__menu li.active { background: #F3FAFF;
}
.modal { position: fixed; right: 10px; bottom: 10px; width: 360px; background: white; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); z-index: 2; -webkit-transition: all 0.3s; transition: all 0.3s; transform: translateY(10%); -webkit-transform: translateY(10%); visibility: hidden; opacity: 0;
}
@media (min-width: 768px) and (max-width: 1024px) { .modal { right: 20px; bottom: 20px; }
}
@media (min-width: 1024px) { .modal { right: 30px; bottom: 30px; }
}
.modal__container { padding-left: 10px; overflow: hidden;
}
.modal.open { transform: translateY(0); -webkit-transform: translateY(0); visibility: visible; opacity: 1;
}
.modal__header { background: #FAFBFF; border-bottom: 1px solid #EBECF0; padding: 20px; overflow: hidden;
}
.modal__header--links { box-sizing: border-box; width: 50%; float: left; padding-left: 10px; padding-right: 10px; padding-left: 0;
}
.modal__header--links li { padding-bottom: 10px;
}
.modal__header--links li a { text-decoration: none; color: #1DA8FF; -webkit-transition: ease 0.15s all; transition: ease 0.15s all;
}
.modal__header--links li a:hover { color: #0070b6;
}
.modal__content { padding: 20px; overflow: hidden;
}
.modal__content button { margin: 0; float: right;
}
.modal__dropdown, .modal__input { margin-bottom: 10px; border: 1px solid #EBECF0;
}
.modal__dropdown span, .modal__input span { padding: 0 15px; line-height: 40px;
}
.modal__dropdown input, .modal__input input { display: block; width: 100%; padding: 0 15px; font-size: 14px; border-width: 0; line-height: 40px;
}
.modal__dropdown--message, .modal__input--message { height: 130px;
}
.feedback__button { right: 10px; bottom: 10px; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; display: block; text-align: center; position: fixed; cursor: pointer; width: 46px; height: 46px; background: #B9BFCC; border-radius: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); -webkit-backface-visibility: hidden;
}
.feedback__button:after { content: "?"; font-size: 18px; font-weight: 600; color: white; line-height: 46px;
}
.feedback__button:hover { background: #9294A4; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) and (max-width: 1024px) { .feedback__button { right: 20px; bottom: 20px; }
}
@media (min-width: 1024px) { .feedback__button { right: 30px; bottom: 30px; }
}
.close-container { position: absolute; padding: 20px; right: 0; top: 0;
}
.close-container:hover .close::before, .close-container:hover .close::after { background: #292A33; cursor: pointer;
}
.close { position: relative; display: inline-block; width: 16px; height: 16px; overflow: hidden;
}
.close::before, .close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #9294A4;
}
.close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.close.thick::before, .close.thick::after { height: 2px; margin-top: -2px;
}
.card { box-sizing: border-box; width: 100%; float: left; padding-left: 10px; padding-right: 10px; margin-bottom: 20px;
}
@media (min-width: 768px) and (max-width: 1024px) { .card { box-sizing: border-box; width: 50%; float: left; padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 1024px) { .card { box-sizing: border-box; width: 33.33333%; float: left; padding-left: 10px; padding-right: 10px; }
}
.card__container { max-width: 1160px; margin: 0 auto; padding: 20px 5px; overflow: hidden; -webkit-animation-delay: 3s; animation-delay: 3s;
}
@media (min-width: 768px) and (max-width: 1024px) { .card__container { padding: 30px 20px; }
}
@media (min-width: 1024px) { .card__container { padding: 40px 30px; }
}
.card__inner { background: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: box-shadow 0.1s ease-in-out; transition: box-shadow 0.1s ease-in-out;
}
.card__inner:hover { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2); cursor: pointer;
}
.card__header { padding: 15px 20px 20px; background: #525466; color: white;
}
.card__header h2 { font-size: 21px; line-height: 30px; margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 1024px) { .card__header h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px; }
}
@media (min-width: 1024px) { .card__header h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 270px; }
}
.card__header h5 { font-size: 11px; letter-spacing: 1.38px; text-transform: uppercase; margin-bottom: 15px;
}
.card__header span { text-transform: uppercase; font-size: 14px; line-height: 23.8px;
}
.card__content { padding: 20px;
}
.card__content h5 { margin-top: 15px; font-size: 11px; color: #9294A4; letter-spacing: 1.38px; text-transform: uppercase;
}
.card__content p { margin: 0; line-height: 23.8px; color: #525466;
}
.card__seats { box-sizing: border-box; width: 50%; float: left; padding-left: 10px; padding-right: 10px; padding: 0 0 5px;
}
.card__available { box-sizing: border-box; width: 50%; float: left; padding-left: 10px; padding-right: 10px; padding: 0 0 5px; text-align: right;
}
.card__available h5 { color: #61C2FF;
}
.card__bar { background: #EBECF0; border-radius: 100px; height: 10px; width: 100%; overflow: hidden; margin-top: 5px;
}
.card__bar--value { background: #61C2FF; height: 10px; border-radius: 100px;
}
.card__bar .value-20 { width: 20%;
}
.card__bar .value-40 { width: 40%;
}
.card__bar .value-60 { width: 60%;
}
.card__bar .value-80 { width: 80%;
}
.card__bar .value-97 { width: 97%;
}
.card__bar .value-100 { width: 100%;
}

One - Feedback Modal v2 - Script Codes JS Codes

$( document ).ready(function() { $('.feedback__button').click(function() { $('#support').addClass('open'); }); $('.close-container').click(function() { $('#support').removeClass('open'); $('#feedback').removeClass('open'); }); $('.launch-feedback').click(function() { $('#support').removeClass('open'); $('#feedback').addClass('open'); }); $('.header__menu__button').click(function() { $('.header__menu__button').addClass('hide'); $('.header__menu').addClass('open'); }); $('.header__menu li').click(function() { $('.header__menu').removeClass('open'); $('.header__menu__button').removeClass('hide'); });
});
One - Feedback Modal v2 - Script Codes
One - Feedback Modal v2 - Script Codes
Home Page Home
Developer Ryan Hulseberg
Username ryanhulseberg
Uploaded September 11, 2022
Rating 3
Size 7,838 Kb
Views 28,336
Do you need developer help for One - Feedback Modal v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ryan Hulseberg (ryanhulseberg) Script Codes
Name
One - Card Updates v1
One - Announcement Banner
ONE Navigation
One, Modal
One - Welcome Modal
One - Sign In
One - Loading Indicator
One - Typography
Sign in
Front-End Example, 2
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!