A Pen by Mohomed Anees

Developer
Mohomed Anees
Size
12,597 Kb
Views
34,408
  1. A Pen by Mohomed Anees Previews
  2. A Pen by Mohomed Anees HTML Codes
  3. A Pen by Mohomed Anees CSS Codes
  4. A Pen by Mohomed Anees JS Codes

How do I make an a pen by mohomed anees?

What is a a pen by mohomed anees? How do you make a a pen by mohomed anees? This script and codes were developed by Mohomed Anees on 27 August 2022, Saturday.

A Pen by Mohomed Anees Previews
IQ Test

A Pen by Mohomed Anees - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Mohomed Anees</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header" id="header" role="banner"> <nav class="header__secondary-menu" id="secondary-menu" role="navigation"> <h2 class="element-invisible" data-thmr="thmr_208">User menu</h2> <ul class="links inline clearfix" data-thmr="thmr_208"> <li class="menu-6 first"><a href="/user" data-thmr="thmr_209 thmr_210">My account</a></li> <li class="menu-71 last"><a href="/user/logout" data-thmr="thmr_211 thmr_212">Log out</a></li> </ul> </nav> <div class="header__region region region-header" data-thmr="thmr_227"> <div class="container"> <div id="block-block-5" class="block block-block main-logo first odd" data-thmr="thmr_213"> <p><img alt="" src="/sites/all/themes/equalityd7/images/logo.png" data-pin-nopin="true"></p> </div> <div id="block-lang-dropdown-language" class="block block-lang-dropdown language-select-container even" data-thmr="thmr_224"> <h2 class="block__title block-title">Languages</h2> <form class="lang_dropdown_form language" id="lang_dropdown_form_language" action="/take-action" method="post" accept-charset="UTF-8" data-thmr="thmr_223"> <div> <div class="form-item form-type-select form-item-lang-dropdown-select" data-thmr="thmr_215"> <select style="width:165px" class="lang-dropdown-select-element form-select" id="lang-dropdown-select-language" name="lang_dropdown_select" data-thmr="thmr_214"> <option value="ar">العربية</option> <option value="en" selected="selected">English</option> <option value="fr">Français</option> </select> </div> <input type="hidden" name="ar" value="/ar/node/66" data-thmr="thmr_216"> <input type="hidden" name="en" value="/take-action" data-thmr="thmr_217"> <input type="hidden" name="fr" value="/fr/node/66" data-thmr="thmr_218"> <noscript>&lt;div&gt; &lt;input type="submit" id="edit-submit" name="op" value="Go" class="form-submit" data-thmr="thmr_219" /&gt; &lt;/div&gt; </noscript> <input type="hidden" name="form_build_id" value="form-oq7pZlj5slsly2Ig2OoTXK8dqRZgWECoSXAm-fPQSQY" data-thmr="thmr_220"> <input type="hidden" name="form_token" value="HGRm9Hxw6rC-YzmQpF0Hp5FTO0lS_ITQesjjGunEgEQ" data-thmr="thmr_221"> <input type="hidden" name="form_id" value="lang_dropdown_form" data-thmr="thmr_222"> </div> </form> </div> <div id="block-webform-client-block-56" class="block block-webform header-sign-up odd" data-thmr="thmr_225"> <h2 class="block__title block-title">header joinus</h2> <form class="webform-client-form webform-client-form-56" enctype="multipart/form-data" action="/take-action" method="post" id="webform-client-form-56" accept-charset="UTF-8" data-thmr="thmr_4 thmr_18"> <div> <div class="form-item webform-component webform-component-textfield webform-component--email-address" data-thmr="thmr_5 thmr_7"> <label class="element-invisible" for="edit-submitted-email-address" data-thmr="thmr_8">Email Address </label> <input placeholder="Email Address" class=" form-text" type="text" id="edit-submitted-email-address" name="submitted[email_address]" value="" size="60" maxlength="128" data-thmr="thmr_6"> </div> <input type="hidden" name="details[sid]" data-thmr="thmr_5 thmr_9"> <input type="hidden" name="details[page_num]" value="1" data-thmr="thmr_5 thmr_10"> <input type="hidden" name="details[page_count]" value="1" data-thmr="thmr_5 thmr_11"> <input type="hidden" name="details[finished]" value="0" data-thmr="thmr_5 thmr_12"> <input type="hidden" name="form_build_id" value="form-hC996gYcy-dx9UspxqcV4t60ciciQnJNAqE2dMJCrIw" data-thmr="thmr_5 thmr_13"> <input type="hidden" name="form_token" value="W0mR7RZwVVwwRx18Urip8S6o9h4uYIFqSmc-ZUE0OTo" data-thmr="thmr_5 thmr_14"> <input type="hidden" name="form_id" value="webform_client_form_56" data-thmr="thmr_5 thmr_15"> <div class="form-actions" data-thmr="thmr_5 thmr_17"> <input class="webform-submit button-primary form-submit" type="submit" name="op" value="Submit" data-thmr="thmr_16"> </div> </div> </form> </div> <div id="block-block-11" class="block block-block nav-toggle-section last even" data-thmr="thmr_226"> <p><a href="#" class="nav-toggle" aria-hidden="false"><span></span><span></span><span></span></a></p> </div> </div> </div> <div class="header-navigation"> <div class="region region-navigation" data-thmr="thmr_329"> <div class="container"> <div id="block-system-main-menu" class="block block-system en-menu-block block-menu first odd" role="navigation" data-thmr="thmr_327"> <h2 class="block__title block-title">Main menu</h2> <ul class="menu main-menu-1" data-thmr="thmr_326"> <li class="menu__item is-leaf first leaf logo-on-scroll" data-menu-parent="main-menu-1" data-thmr="thmr_228"><a href="/" class="menu__link" data-thmr="thmr_229 thmr_230">Logo</a></li> <li class="menu__item is-expanded expanded menu-item" data-menu-parent="main-menu-1" data-thmr="thmr_231"><span class="menu__link wge-ul nolink" data-thmr="thmr_268">Why gender equality</span> <ul class="menu main-menu-2" data-thmr="thmr_267"> <li class="menu__item is-expanded first expanded gde-left" data-menu-parent="main-menu-2" data-thmr="thmr_232"><a href="/" class="menu__link left-a" data-thmr="thmr_246 thmr_247">Left</a> <ul class="menu main-menu-3" data-thmr="thmr_245"> <div class="left"> <li class="menu__item is-leaf first leaf sub-menu-item our-aproach" data-menu-parent="main-menu-3" data-thmr="thmr_233"><a href="/" class="menu__link" data-thmr="thmr_234 thmr_235">Our Approach</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_236"><a href="/" class="menu__link" data-thmr="thmr_237 thmr_238">Our Impact</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_239"><a href="/" class="menu__link" data-thmr="thmr_240 thmr_241">Where we work</a></li> <li class="menu__item is-leaf last leaf sub-menu-item last" data-menu-parent="main-menu-3" data-thmr="thmr_242"><a href="/" class="menu__link" data-thmr="thmr_243 thmr_244">Global Policiy Tools</a></li> </div> </ul> </li> <li class="menu__item is-expanded last expanded gde-right sub-menu-item title" data-menu-parent="main-menu-2" data-thmr="thmr_248"><a href="/" class="menu__link our-programs" data-thmr="thmr_265 thmr_266">Our Programs</a> <ul class="menu main-menu-3" data-thmr="thmr_264"> <div class="right"> <li class="menu__item is-leaf first leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_249"><a href="/" class="menu__link" data-thmr="thmr_250 thmr_251">Female Genital Mutilation</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_252"><a href="/" class="menu__link" data-thmr="thmr_253 thmr_254">Justice For Girls</a></li> <li class="menu__item is-leaf leaf sub-menu-item l-equality" data-menu-parent="main-menu-3" data-thmr="thmr_255"><a href="/" class="menu__link" data-thmr="thmr_256 thmr_257">Legal Equality</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_258"><a href="/" class="menu__link" data-thmr="thmr_259 thmr_260">Sex Trafficking</a></li> <li class="menu__item is-leaf last leaf sub-menu-item" data-menu-parent="main-menu-3" data-thmr="thmr_261"><a href="/" class="menu__link" data-thmr="thmr_262 thmr_263">Sexual Violence</a></li> </div> </ul> </li> </ul> </li> <li class="menu__item is-active-trail is-expanded expanded active-trail menu-item" data-menu-parent="main-menu-1" data-thmr="thmr_269"><span class="menu__link is-active-trail active-trail nolink" data-thmr="thmr_286">Get Involved</span> <ul class="menu main-menu-2" data-thmr="thmr_285"> <li class="menu__item is-active-trail is-leaf first leaf active-trail sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_270"><a href="/take-action" class="menu__link is-active-trail active-trail active" data-thmr="thmr_271 thmr_272">Take Action</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_273"><a href="/" class="menu__link" data-thmr="thmr_274 thmr_275">Campaigns</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_276"><a href="/" class="menu__link" data-thmr="thmr_277 thmr_278">Events</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_279"><a href="/" class="menu__link" data-thmr="thmr_280 thmr_281">Gifts</a></li> <li class="menu__item is-leaf last leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_282"><a href="/" class="menu__link" data-thmr="thmr_283 thmr_284">Shop</a></li> </ul> </li> <li class="menu__item is-expanded expanded menu-item" data-menu-parent="main-menu-1" data-thmr="thmr_287"><span class="menu__link nolink" data-thmr="thmr_307">About Us</span> <ul class="menu main-menu-2" data-thmr="thmr_306"> <li class="menu__item is-leaf first leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_288"><a href="/" class="menu__link" data-thmr="thmr_289 thmr_290">Board &amp; Staff</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_291"><a href="/" class="menu__link" data-thmr="thmr_292 thmr_293">Careers</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_294"><a href="/" class="menu__link" data-thmr="thmr_295 thmr_296">Contact Us</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_297"><a href="/" class="menu__link" data-thmr="thmr_298 thmr_299">Financials</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_300"><a href="http://#" class="menu__link" data-thmr="thmr_301 thmr_302">History</a></li> <li class="menu__item is-leaf last leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_303"><a href="/" class="menu__link" data-thmr="thmr_304 thmr_305">Partners</a></li> </ul> </li> <li class="menu__item is-expanded last expanded menu-item" data-menu-parent="main-menu-1" data-thmr="thmr_308"><span class="menu__link nolink" data-thmr="thmr_325">Media &amp; Resources</span> <ul class="menu main-menu-2" data-thmr="thmr_324"> <li class="menu__item is-leaf first leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_309"><a href="/" class="menu__link" data-thmr="thmr_310 thmr_311">Blog</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_312"><a href="/" class="menu__link" data-thmr="thmr_313 thmr_314">Fact Sheets</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_315"><a href="/" class="menu__link" data-thmr="thmr_316 thmr_317">News &amp; Press</a></li> <li class="menu__item is-leaf leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_318"><a href="/" class="menu__link" data-thmr="thmr_319 thmr_320">Publications</a></li> <li class="menu__item is-leaf last leaf sub-menu-item" data-menu-parent="main-menu-2" data-thmr="thmr_321"><a href="/" class="menu__link" data-thmr="thmr_322 thmr_323">Videos</a></li> </ul> </li> </ul> </div> <div id="block-block-3" class="block block-block nav-right last even" data-thmr="thmr_328"> <p> <button class="button donate-btn" type="submit">Donate</button><img src="/sites/all/themes/equalityd7/images/search.png"></p> </div> </div> </div> </div>
</header> <script src='http://code.jquery.com/jquery-latest.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Mohomed Anees - Script Codes CSS Codes

/* ------------------------------------------ MEDIA QUERIES
--------------------------------------------- */
/* ------------------------------------------ FONT VARIABLES
--------------------------------------------- */
/* ------------------------------------------ COLOUR VARIABLES
--------------------------------------------- */
/* ------------------------------------------ BASE FONT STYLES
--------------------------------------------- */
/* ------------------------------------------ COMPASS PLUGINS
--------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
/* ------------------------------------------ PARTIAL SCSS
--------------------------------------------- */
/* ------------------------------------------ SUSY SETTINGS
--------------------------------------------- */
html { font-size: 100%; line-height: 1.5em;
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* ============================================= * * FIXED RESPONSIVE NAV * * (c) 2014 @adtileHQ * http://www.adtile.me * http://twitter.com/adtilehq * * Free to use under the MIT License. * * ============================================= */
@-webkit-viewport { width: device-width;
}
@-moz-viewport { width: device-width;
}
@-ms-viewport { width: device-width;
}
@-o-viewport { width: device-width;
}
@viewport { width: device-width;
}
/* ------------------------------------------ FIXED HEADER
--------------------------------------------- */
@media (min-width: 768px) { .header-wrapper { max-width: 1260px; margin: 0 auto; }
}
header { position: fixed; background-color: #FFFFFF; z-index: 3; width: 100%; left: 0; top: 0; padding: 1rem 0 0 0;
}
header .language-select-container { display: none;
}
header .language-select-container .lang-dropdown-select-element,
header .language-select-container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 85px; height: 28px; border-radius: 0px; padding: 0.1rem 1rem; background-color: transparent; border-color: #9BC5C8; color: #9BC5C8;
}
header .language-select-container .lang-dropdown-select-element:focus,
header .language-select-container select:focus { outline: none;
}
@media (min-width: 768px) { header .language-select-container { display: block; float: right; }
}
header .region-header { padding: 0.75rem 0;
}
header a#logo { float: left; margin: 15px 0 15px 55px; background-image: url("/sites/all/themes/equalityd7/images/logo.png"); background-repeat: no-repeat; width: 302px; height: 76px;
}
header a#logo img { display: none;
}
header input#edit-submitted-email-address { float: left;
}
header #name-and-slogan { display: none;
}
header #secondary-menu { display: none;
}
header h2.block-title { display: none;
}
header #block-locale-language { float: right; margin: 0 55px 0 40px;
}
/* ------------------------------------------ NAV STYLES
--------------------------------------------- */
.fixed { position: fixed; width: 100%; left: 0; top: 0;
}
.nav-collapse,
.nav-collapse * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.header { -moz-transition: all, 0.3s, ease; -o-transition: all, 0.3s, ease; -webkit-transition: all, 0.3s, ease; transition: all, 0.3s, ease;
}
.header .main-logo { float: left; max-width: 50%;
}
@media (min-width: 992px) { .header .main-logo { max-width: 100%; }
}
.header .nav-right { float: right; padding-top: 7px;
}
.header .header-navigation { border-top: 1px solid #F3E6D6; display: none;
}
@media (min-width: 992px) { .header .header-navigation { display: block; }
}
.header .language-select-container,
.header .header-sign-up,
.header .logo-on-scroll a,
.header .main-menu-2 .left-a { display: none;
}
.header .en-menu-block { float: left; width: 100%; background: #FFFFFF; min-height: 50px; border-bottom: 1px solid #F3E6D6; line-height: 50px;
}
@media (min-width: 992px) { .header .en-menu-block { width: auto; padding: 0 0 0 70px; }
}
.header .en-menu-block .main-menu-1 > li { text-transform: uppercase;
}
@media (min-width: 992px) { .header .en-menu-block .main-menu-1 li:hover ul { display: block; }
}
.header .en-menu-block .main-menu-1 li > ul { display: none;
}
.header .en-menu-block .main-menu-1 li > ul > li > ul { display: block;
}
@media (min-width: 992px) { .header .en-menu-block .main-menu-1 li > ul > li > ul { display: none; }
}
.header .en-menu-block li { float: left; width: 100%; font-size: 1.5rem;
}
.header .en-menu-block li a, .header .en-menu-block li span { -webkit-tap-highlight-color: transparent; border-left: none; text-decoration: none; padding: 0 1rem; cursor: pointer; color: #12355B; letter-spacing: 1px; font-family: "BwStretchMedium";
}
@media (min-width: 992px) { .header .en-menu-block li a, .header .en-menu-block li span { padding: 0 2rem; }
}
.header .en-menu-block li .gde-right a.title { font-family: "BwStretchMedium"; text-transform: uppercase; color: #16A3C4;
}
@media (min-width: 992px) { .header .en-menu-block li { position: static; border-left: 1px solid #F3E6D6; width: auto; transition: all 0.2s ease-out; font-size: 1rem; } .header .en-menu-block li:last-child { border-right: 1px solid #F3E6D6; } .header .en-menu-block li:nth-child(2) .main-menu-2 { padding: 1.5rem 0; } .header .en-menu-block li:nth-child(2) .main-menu-2 li { line-height: 2rem; } .header .en-menu-block li.menu-item { float: left; } .header .en-menu-block li.menu-item a { text-transform: uppercase; } .header .en-menu-block li.menu-item:hover { background-color: #131D2C; } .header .en-menu-block li.menu-item:hover a, .header .en-menu-block li.menu-item:hover span { color: #FFFFFF; } .header .en-menu-block li.menu-item:hover a.our-programs, .header .en-menu-block li.menu-item:hover span.our-programs { text-transform: uppercase; font-family: "BwStretchMedium"; color: #16A3C4; } .header .en-menu-block li.menu-item.sub-menu-item a { font-family: "AlegreyaSans"; } .header .en-menu-block li.menu-item .main-menu-2 { position: absolute; background-color: #131D2C; left: 0px; right: 0px; padding-left: 10rem; } .header .en-menu-block li.menu-item .main-menu-2 a:hover { color: #16A3C4; } .header .en-menu-block li.menu-item .main-menu-2 .left-a { display: none; } .header .en-menu-block li.menu-item .main-menu-2 li a { font-family: "Alegreya Sans"; } .header .en-menu-block li.menu-item li { border-left: none; } .header .en-menu-block li.menu-item li:last-child { border-right: none; } .header .en-menu-block li.menu-item li.submenu { position: absolute; top: 100%; left: 0; z-index: 99; background-color: #131D2C; width: 100%; opacity: 0; padding: 0rem 1rem; } .header .en-menu-block li.menu-item:hover > .mega { display: block; } .header .en-menu-block li .mega { width: 100%; } .header .en-menu-block li .mega .menu li { display: inline-block; }
}
@media (min-width: 992px) and (max-width: 1199px) { .header .en-menu-block li.menu-item .main-menu-2 { padding-left: 5.35714rem; }
}
@media (min-width: 1200px) { .header .en-menu-block li.menu-item .main-menu-2 { padding-left: 10rem; }
}
.header .en-menu-block .left { float: left;
}
@media (min-width: 992px) { .header .en-menu-block .left { border-right: 1px solid black; }
}
.header .en-menu-block .left li { display: block !important; float: none;
}
.header .en-menu-block .left li.is-leaf.first.leaf.sub-menu-item.our-aproach { margin: 0px;
}
@media (min-width: 992px) { .header .en-menu-block .right { -moz-columns: auto 2; -webkit-columns: auto 2; columns: auto 2; }
}
.header .en-menu-block .right li.is-leaf.first.leaf.sub-menu-item { margin: 0px;
}
.header .en-menu-block .right .sub-menu-item { float: none; display: block !important;
}
.header .en-menu-block .right .sub-menu-item.title { font-family: "BwStretchMedium"; color: #16A3C4; text-transform: uppercase; height: 35px; -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all;
}
.header .en-menu-block .right .sub-menu-item.title a { color: #16A3C4; padding: 0 2rem;
}
.header .en-menu-block .right .sub-menu-item.title a:hover { color: #FFFFFF;
}
@media (min-width: 992px) { .header { height: 162px; } .header li.en-logo-container-li { display: none; } .header .language-select-container, .header .header-sign-up { display: block; padding: 8px 0 0 0; } .header .logo-on-scroll { -moz-transition: all, 0.3s, ease; -o-transition: all, 0.3s, ease; -webkit-transition: all, 0.3s, ease; transition: all, 0.3s, ease; padding-left: 0; } .header .logo-on-scroll a { display: none; } .header.scrolling { top: -108px; border-bottom: 1px solid #F3E6D6; } .header.scrolling .en-menu-block { padding-left: 0; } .header.scrolling .en-menu-block .logo-on-scroll { display: block; padding-left: 170px; background-image: url("/sites/all/themes/equalityd7/images/small-logo.png"); background-repeat: no-repeat; border-left: 0px; background-position-y: 5px; } .header.scrolling .en-menu-block .logo-on-scroll a { display: block; color: transparent; padding: 0; } .header.scrolling .en-menu-block li .submenu { width: 150%; left: -42.8%; } .header.scrolling .en-menu-block li a { padding: 0 1rem; } .header.scrolling .en-menu-block .container { padding: 0; }
}
/*------------------------------------------------------------------------------*/
.nav-collapse { display: block; min-width: 100%; background: #FFFFFF; min-height: 50px; line-height: 50px; border-top: 1px solid #F3E6D6; border-bottom: 1px solid #F3E6D6; padding: 0 0 0 45px;
}
.nav-collapse .nav-left { float: left;
}
.nav-collapse .nav-right { float: right;
}
.nav-collapse .nav-right button { vertical-align: middle;
}
.nav-collapse .nav-right img { vertical-align: middle;
}
.nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left;
}
.nav-collapse ul { margin: 0; padding: 0; width: 100%; display: block; list-style: none;
}
@media (min-width: 992px) { .nav-collapse ul { width: auto; }
}
.nav-collapse li { display: block; float: left; width: 100%;
}
@media (min-width: 992px) { .nav-collapse li { position: static; border-left: 1px solid #F3E6D6; width: auto; transition: all 0.2s ease-out; } .nav-collapse li:last-child { border-right: 1px solid #F3E6D6; } .nav-collapse li .submenu { position: absolute; top: 100%; left: 0; z-index: 99; background-color: #131D2C; width: 100%; opacity: 0; padding: 0rem 1rem; transition: all 0.2s ease-out; } .nav-collapse li .submenu li { border-left: none; border-right: none; } .nav-collapse li .submenu li a { color: #FFFFFF; text-transform: none; font-family: "Alegreya Sans"; padding: 0 2rem; } .nav-collapse li .submenu li a:hover { color: #16A3C4; } .nav-collapse li.menu-item:hover { background-color: #131D2C; } .nav-collapse li.menu-item:hover a { color: #FFFFFF; } .nav-collapse li.menu-item:hover .submenu { opacity: 1; } .nav-collapse li.menu-item .mega { display: none; } .nav-collapse li.menu-item:hover > .mega { display: block; }
}
.nav-collapse li a { -webkit-tap-highlight-color: transparent; border-top: 1px solid white; border-left: none; text-decoration: none; padding: 0.7rem 1rem; color: #131D2C; width: 100%; float: left; font-family: "BwStretchMedium"; text-transform: uppercase;
}
@media (min-width: 992px) { .nav-collapse li a { padding: 0 2rem; text-align: center; border-top: 0; float: left; margin: 0; }
}
.nav-collapse .opened { max-height: 9999px;
}
.nav-collapse a:active,
.nav-collapse .active a { color: #16A3C4;
}
.nav-collapse ul ul a { background: #ca3716; padding-left: 2em;
}
@media (min-width: 768px) { .nav-collapse ul ul a { display: block; }
}
.js .nav-collapse { clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; zoom: 1;
}
.disable-pointer-events { pointer-events: none !important;
}
@media (min-width: 768px) { .js .nav-collapse { position: relative; } .js .nav-collapse.closed { max-height: none; }
}
/* ------------------------------------------ MASK
--------------------------------------------- */
.mask { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: rgba(0, 0, 0, 0.5); visibility: hidden; position: fixed; opacity: 0; z-index: 2; bottom: 0; right: 0; left: 0; top: 0;
}
.android .mask { -webkit-transition: none; transition: none;
}
.js-nav-active .mask { visibility: visible; opacity: 1;
}
@media (min-width: 768px) { .mask { display: none !important; opacity: 0 !important; }
}
/* ------------------------------------------ NAV TOGGLE STYLES
--------------------------------------------- */
.nav-toggle-section .nav-toggle { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; text-indent: -300px; margin: 1.5em 1em 0 0; position: relative; overflow: hidden; float: right;
}
.nav-toggle-section .nav-toggle:before { color: #fff; /* Edit this to change the icon color */ font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */ text-transform: none; text-align: center; position: absolute; content: "\2261"; /* Hamburger icon */ text-indent: 0; speak: none; width: 100%; left: 0; top: 0;
}
.nav-toggle-section .nav-toggle.active:before { font-size: 24px; content: "\78"; /* Close icon */
}
@media (min-width: 992px) { .nav-toggle-section .nav-toggle { display: none; }
}
.nav-toggle-section .nav-toggle span { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-radius: 1px; margin-left: 20px; margin-bottom: 6px; background: #000000; height: 2px; width: 28px; display: block;
}
.nav-toggle-section .nav-toggle.active span { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-radius: 1px; margin-left: 20px; margin-bottom: 6px; background: #000000; height: 2px; width: 28px;
}
.nav-toggle-section .nav-toggle.active span:nth-child(1) { -webkit-transform: rotate(45deg) translate3d(3px, 8px, 0); transform: rotate(45deg) translate3d(3px, 8px, 0);
}
.nav-toggle-section .nav-toggle.active span:nth-child(2) { opacity: 0;
}
.nav-toggle-section .nav-toggle.active span:nth-child(3) { -webkit-transform: rotate(-45deg) translate3d(3px, -8px, 0); transform: rotate(-45deg) translate3d(3px, -8px, 0);
}

A Pen by Mohomed Anees - Script Codes JS Codes

// Place your code here.
$(document).ready(function() { console.log("document loaded"); //$(".main-menu-2").wrap("<div class='mega'></div>"); $(".gde-left .main-menu-3").wrapInner("<div class='left'></div>"); $(".gde-right .main-menu-3").wrapInner("<div class='right'></div>");
});
console.log($('.views-row-1 .en-sent'));
console.log($('.views-row-1 .en-all'));
$(window).resize(function() { // Function for dynamicaly calculating the progress bar width and value $(".urgent-alert").each(function() { $(this).addClass('js-percent'); var percentageValue = (parseInt($('.js-percent .en-sent').text()) / parseInt($('.js-percent .en-all').text())) * 100; var getPercent = percentageValue / 100; var getProgressWrapWidth = $('.js-percent .progress-wrap').width(); var progressTotal = getPercent * getProgressWrapWidth; var animationLength = 2500; // on page load, animate percentage bar to data percentage length // .stop() used to prevent animation queueing $('.js-percent .progress-bar').stop().animate({ left: progressTotal }, animationLength); $('.js-percent .percentage-number').text(percentageValue + "%"); $(".urgent-alert").removeClass('js-percent'); });
});
// Function for dynamicaly calculating the progress bar width and value
$(".urgent-alert").each(function() { $(this).addClass('js-percent'); var percentageValue = (parseInt($('.js-percent .en-sent').text()) / parseInt($('.js-percent .en-all').text())) * 100; var getPercent = percentageValue / 100; var getProgressWrapWidth = $('.js-percent .progress-wrap').width(); var progressTotal = getPercent * getProgressWrapWidth; var animationLength = 2500; // on page load, animate percentage bar to data percentage length // .stop() used to prevent animation queueing $('.js-percent .progress-bar').stop().animate({ left: progressTotal }, animationLength); $('.js-percent .percentage-number').text(percentageValue + "%"); $(".urgent-alert").removeClass('js-percent');
});
$(document).scroll(function() { if ($(document).scrollTop() > 100) { $("#header").addClass("scrolling"); } else { $("#header").removeClass("scrolling"); }
});
(function($) { $(document).ready(function() { //Hamburger Menu $('.main-menu-1 > li > span').click(function() { $('.main-menu-1 li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); //console.log('slideUp'); } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('.main-menu-1 ul:visible').slideUp('normal'); checkElement.slideDown('normal'); //console.log('slideDown'); } if ($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); var navcontainer = $('.header-navigation'); var submenu = $('.header .en-menu-block .menu-item > ul') $('.nav-toggle').click(function() { navcontainer.slideToggle(); }); $(window).resize(function() { var width = $(window).width(); if (width > 992 && navcontainer.is(':hidden')) { navcontainer.removeAttr('style'); } if (width > 992 && submenu.is(':hidden')) { submenu.removeAttr('style'); } }); });
})(jQuery);
A Pen by Mohomed Anees - Script Codes
A Pen by Mohomed Anees - Script Codes
Home Page Home
Developer Mohomed Anees
Username mohomedanees
Uploaded August 27, 2022
Rating 3
Size 12,597 Kb
Views 34,408
Do you need developer help for A Pen by Mohomed Anees?

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!

Mohomed Anees (mohomedanees) Script Codes
Name
Button Fix 2
Image Caption
Button Effects
Relative Aspect Ratio
Transparent CSS Triangle with Borders
Custom input file
Outer border to a Div
Image Caption on Hover
Modal Popup
Button using SVG
Create amazing SEO content 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!