A Pen by Laura Moraiti

Developer
Laura Moraiti
Size
5,467 Kb
Views
46,552
  1. A Pen by Laura Moraiti Previews
  2. A Pen by Laura Moraiti HTML Codes
  3. A Pen by Laura Moraiti CSS Codes
  4. A Pen by Laura Moraiti JS Codes

How do I make an a pen by laura moraiti?

What is a a pen by laura moraiti? How do you make a a pen by laura moraiti? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

A Pen by Laura Moraiti Previews
IQ Test

A Pen by Laura Moraiti - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Laura Moraiti</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/http___codepen_io_fixie_p.css'>
<link rel='stylesheet prefetch' href='css/http___codepen_io_fixie_p.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page"> <header> <nav> <div class="nav--item" data-trigger="open-search"><i class="material-icons">search</i></div> <div class="logo"><i class="material-icons">fingerprint</i></div> <div class="nav--item" data-trigger="open-menu"><i class="material-icons">menu</i></div> </nav> </header> <div class="this-is-my-nav"> <!-- Search --> <div class="page--dropdown-search" data-open="open-search"> <div class="dd-search--input"> <div class="back-to-menu" data-child="false"><i class="material-icons">arrow_back</i></div> <input type="text" id="search" placeholder="Wut yo lookin 4?"> <button><span>Buscar</span><i class="material-icons">search</i></button> </div> <div class="dd-search--suggestions"> <div class="title--aid">Other searched:</div> <ul> <li><a>Mobile search</a></li> <li><a>Type</a></li> <li><a>Awesome</a></li> <li><a>Colorful</a></li> <li><a>Control panel for website</a></li> </ul> </div> <div class="title--aid">Popular searches</div> <div class="dd-search--popular"><div class="scroll"> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/67979/screenshots/2856425/fla-sunglasses-dribbble_1x.jpg" alt="" /> </div> <div class="title"> <h2>Sunnies For Sunny Fla</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/31664/screenshots/2848801/scene-5---boulder-2.gif" alt="" /> </div> <div class="title"> <h2>Boulder</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/27903/screenshots/2854094/k_planet_1x.png" alt="" /> </div> <div class="title"> <h2>K letter + Saturn Planet</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2844744/preview_1x.png" alt="" /> </div> <div class="title"> <h2>Roomie - Color Picker</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/67979/screenshots/2856425/fla-sunglasses-dribbble_1x.jpg" alt="" /> </div> <div class="title"> <h2>Sunnies For Sunny Fla</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/31664/screenshots/2848801/scene-5---boulder-2.gif" alt="" /> </div> <div class="title"> <h2>Boulder</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/27903/screenshots/2854094/k_planet_1x.png" alt="" /> </div> <div class="title"> <h2>K letter + Saturn Planet</h2> </div> </article> <article> <div class="img"> <img src="https://d13yacurqjgara.cloudfront.net/users/14501/screenshots/2844744/preview_1x.png" alt="" /> </div> <div class="title"> <h2>Roomie - Color Picker</h2> </div> </article> </div></div> </div> <!-- Menu --> <nav class="page--dropdown-menu" data-open="open-menu"> <div class="back-to-menu" data-child="false"><i class="material-icons">arrow_back</i></div> <ul class="dd-menu--main"> <li> <a class="menu--section-name">Panorama</a> <div class="open" data-open="panorama"><i class="material-icons">expand_more</i></div> </li> <li> <a class="menu--section-name">Deportes</a> <div class="open" data-open="deportes"><i class="material-icons">expand_more</i></div> </li> <li> <a class="menu--section-name">Conocer</a> <div class="open" data-open="conocer"><i class="material-icons">expand_more</i></div> </li> <li> <a class="menu--section-name">Placer</a> <div class="open" data-open="placer"><i class="material-icons">expand_more</i></div> <li> <a class="menu--section-name">Cultura</a> <div class="open" data-open="cultura"><i class="material-icons">expand_more</i></div> </li> </ul> <div class="dd-submenus"> <div class="back-to-menu" data-child="true"><i class="material-icons">arrow_back</i></div> <ul data-submenu="panorama"><a class="menu--section-name">Panorama</a><li><a href="/lared21/category.php?cat=panorama&amp;id=politica">Política</a></li> <li><a href="/lared21/category.php?cat=panorama&amp;id=comunidad">Comunidad</a></li> <li><a href="/lared21/category.php?cat=panorama&amp;id=mundo">Mundo</a></li> </ul> <ul data-submenu="deportes"><li><a href="/lared21/category.php?cat=deportes&amp;id=futbol">Fútbol</a></li> <li><a href="/lared21/category.php?cat=deportes&amp;id=suarez">Suárez</a></li> <li><a href="/lared21/category.php?cat=deportes&amp;id=copa-america">Copa América</a></li> </ul> <ul data-submenu="conocer"><li><a href="/lared21/category.php?cat=conocer&amp;id=ecologia">Ecología</a></li> <li><a href="/lared21/category.php?cat=conocer&amp;id=mujeres">Mujeres</a></li> <li><a href="/lared21/category.php?cat=conocer&amp;id=ciencia">Ciencia</a></li> <li><a href="/lared21/category.php?cat=conocer&amp;id=tecnologia">Tecnología</a></li> <li><a href="/lared21/category.php?cat=conocer&amp;id=salud">Salud</a></li> </ul> <ul data-submenu="placer"><li><a href="/lared21/category.php?cat=placer&amp;id=destinos">Destinos</a></li> <li><a href="/lared21/category.php?cat=placer&amp;id=viajes">Viajes</a></li> <li><a href="/lared21/category.php?cat=placer&amp;id=moda">Moda</a></li> <li><a href="/lared21/category.php?cat=placer&amp;id=actividades">Actividades</a></li> <li><a href="/lared21/category.php?cat=placer&amp;id=tours">Tours</a></li> <li><a href="/lared21/category.php?cat=placer&amp;id=video">Video</a></li> </ul> <ul data-submenu="cultura"><li><a href="/lared21/category.php?cat=cultura&amp;id=teatro">Teatro</a></li> <li><a href="/lared21/category.php?cat=cultura&amp;id=cine">Cine</a></li> <li><a href="/lared21/category.php?cat=cultura&amp;id=opera-y-ballet">Ópera y Ballet</a></li> <li><a href="/lared21/category.php?cat=cultura&amp;id=musica">Música</a></li> <li><a href="/lared21/category.php?cat=cultura&amp;id=uruguay">Uruguay</a></li> </ul> </div> <div class="dd-menu--extra"> <ul class="scroll"> <li><a>Tabaré Vázquez</a></li> <li><a>Hospital Británico</a></li> <li><a>Recetas fáciles</a></li> <li><a>Obituarios</a></li> <li><a>Clima hoy</a></li> </ul> </div> </nav> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Laura Moraiti - Script Codes CSS Codes

body { background-color: #cfdff7;
}
* { box-sizing: border-box; padding: 0; margin: 0; list-style-type: none;
}
.page { width: 375px; height: 700px; margin: 3em auto; background-color: #fff; position: relative;
}
.this-is-my-nav .page--dropdown-search, .this-is-my-nav .page--dropdown-menu { width: 100%; position: absolute; top: 0; height: 100%; background-color: #fff; transition: transform .7s ease-in-out;
}
.this-is-my-nav .active.page--dropdown-search, .this-is-my-nav .active.page--dropdown-menu { transform: translateX(0); transition: transform .3s ease-in-out;
}
.this-is-my-nav .page--dropdown-search:not(.active), .this-is-my-nav .page--dropdown-menu:not(.active) { transition: transform .7s ease-in-out;
}
header > nav { display: flex; flex-direction: row; justify-content: space-between;
}
header > nav .nav--item i { padding: 1em;
}
header > nav .logo i { font-size: 60px; padding: 1rem;
}
.this-is-my-nav { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; visibility: hidden; transition: all .7s ease-in-out;
}
.this-is-my-nav.active { visibility: visible;
}
.this-is-my-nav .page--dropdown-search { transform: translateX(-100%);
}
.this-is-my-nav .page--dropdown-menu { transform: translateX(100%);
}
button { position: absolute; right: 0; padding: .75rem 1.5rem !important;
}
.easy-autocomplete { width: 100%;
}
.easy-autocomplete-container { background-color: #fff; position: absolute; width: 100%; display: block !important; left: 0;
}
.easy-autocomplete-container ul { padding: 2em;
}
.easy-autocomplete-container li { display: block; border-bottom: 1px solid #ddd; padding: .5em; cursor: pointer;
}
.easy-autocomplete-container .selected { color: deepskyblue;
}

A Pen by Laura Moraiti - Script Codes JS Codes

$('.nav--item').on('click', function() { var ele = $(this), data = ele.data('trigger'); $('.this-is-my-nav').addClass('active'); $('[data-open="' + data + '"]').addClass('active'); $('[data-open="' + data + '"]').siblings().removeClass('active'); $('[data-open="' + data + '"]').find('input').focus();
});
$('.open').on('click', function(){ var e = $(this), data = e.data('open'); $('.dd-submenus').addClass('active'); $('[data-submenu="' + data + '"]').addClass('active');
});
$('.back-to-menu').on('click', function(){ var e = $(this), child = e.data('child'); if( child == true ) { e.siblings().removeClass('active'); e.parent('.active').removeClass('active'); } else { e.parents('.active').removeClass('active').addClass('ass'); $('.this-is-my-nav').removeClass('active'); }
});
var options = {	data: ["tabaré vázquez", "veganismo", "clima hoy", "casas ecológicas", "vida sana"]
};
$('#search').easyAutocomplete(options);
A Pen by Laura Moraiti - Script Codes
A Pen by Laura Moraiti - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 5,467 Kb
Views 46,552
Do you need developer help for A Pen by Laura Moraiti?

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!

Laura Moraiti (Fixie) Script Codes
Name
Responsive Equal Height Columns using jQuery
Fluid section title with border on both sides
Two column of responsive height
Dynamic prefix, transition and transform SASS mixins
Edit inline text and hidden input with jQuery
Music equalizer bars with jQuery
Text and headings flow for a health site, on the making
Simple gallery jquery
Fun responsive split layout
Responsive three column fixed layout
Create amazing sales emails 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!