ERC Search panels mockup

Developer
Aurer
Size
4,970 Kb
Views
48,576
  1. ERC Search panels mockup Previews
  2. ERC Search panels mockup HTML Codes
  3. ERC Search panels mockup CSS Codes
  4. ERC Search panels mockup JS Codes

How do I make an erc search panels mockup?

What is a erc search panels mockup? How do you make a erc search panels mockup? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

ERC Search panels mockup Previews
IQ Test

ERC Search panels mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ERC Search panels mockup</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body{ padding: 1em;
}
form.filter{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 15px; margin-top: 15px; position: relative; background: #3AB5EA; overflow: hidden; margin: 0 0 1em;
}
form.filter label{ display: none;
}
form.filter .field{ float: left; width: 95%;
}
form.filter .field input{ width: 100%; display: block; background: #fff; padding: .5em; font-size: 1.4em; border-radius: 5px; border: none;
}
form.filter .submit input{ border: 5px solid; border-radius: 50%; width: 60px; height: 60px; text-align: center; background: #fff; position: absolute; top: .6em; right: .8em; color: #2080A6; font-weight: bold;
}
.panel{ margin: .3em 0; overflow: hidden; background: #EAEAEA; border-radius: 8px 8px 0 0;
}
.panel .panel-header{ overflow: hidden; background: #D6D6D6;
}
.panel .panel-header h2,
.panel .panel-header h3{ margin: 0; padding: .5em 1em; font-size: 1.1em; float: left; min-width: 15%; text-align: center; background-color: #3AB5EA; background-image: url(data:image/x-png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALBAMAAABWnBpSAAAAA3NCSVQICAjb4U/gAAAAFVBMVEX///////////////////////////9nSIHRAAAAB3RSTlMAETO7zO7/xFZuYAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMDkvMTQvm3IVAAAANklEQVQImWNgYGBQYgADplAFMK2aFgTmhqWlCgBpkbS0NEcGBkY3IJ0iAOampRkw4AJsYPkEAK3wCsQzLfQaAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 15px 49%; color: #fff;
}
.panel .panel-header a.control{ float: right; padding: .8em 1em 0 1em; color: #000; font-style: italic; font-size: .9em;
}
.panel .panel-content{ padding: 0 1em; border: 1px solid #999;
}
.panel.closed{ border-radius: 8px;
}
.panel.closed .panel-content{
}
.panel.open h2,
.panel .panel.open h3{ background-image: url(data:image/x-png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALBAMAAABWnBpSAAAAA3NCSVQICAjb4U/gAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAC3RSTlMAM2Z3iJmqzN3u/3QCXXgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA1LzA5LzE0L5tyFQAAADZJREFUCJlj4FoFAgsY0AEHWLyAgXEWkFopwMAgBaQnAiWYgLQCSIXVqkVglayrHCBaUpG0AwDdvxK8m8bukAAAAABJRU5ErkJggg==); background-position: 15px 47%;
}
.panel .panel{ border-radius: 5px 5px 0 0; background: #666;
}
.panel .panel + .panel{ margin-top: -.6em;
}
.panel .panel.closed{ border-radius: 5px;
}
.panel .panel .panel-header{ background: #333; color: #fff;
}
.panel .panel .panel-header h3{ background-color: transparent; font-size: 1em;
}
.panel .panel a.control{ color: #fff;
}
.panel .panel .panel-content{ color: #fff;
}
.panel form{ padding: .5em; overflow: hidden; margin-bottom: 1em; background: #3AB5EA; border-radius: 5px;
}
.panel form .field{ float: left; padding: .3em; margin: 0 .5em; width: 30%; background: #fff; border-radius: 8px;
}
.panel form label{ display: none;
}
.panel form .field input,
.panel form .field select{ border: none; color: #000; width: 100%;
}
.panel form .submit input{ padding: .3em 1em; color: #207EA5; background: #fff; border: 2px solid #217EA6; border-radius: 8px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <form action="" class="filter"> <div class="field"> <label for="in-name">Name</label> <span class="input"> <input type="text" name="name" placeholder="Name"> </span> </div> <div class="submit"> <input type="submit" value="Find"> </div>
</form>
<div class="panel">	<div class="panel-header">	<h2>Heading</h2>	<a class="control" href="javascript:">Read more</a>	</div>	<div class="panel-content">	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> <div class="panel"> <div class="panel-header"> <h3>Heading</h3> <a href="javascript:" class="control">Read more</a> </div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> <form> <div class="field"> <label for="">Enter postcode</label> <input type="text" placeholder="Enter postcode" /> </div> <div class="field"> <label for="">Distance</label> <select name='options'> <option value='option-1'>Option 1</option> <option value='option-2'>Option 2</option> <option value='option-3'>Option 3</option> </select> </div> <div class="submit"> <input type="submit" value="Search by postcode" /> </div> </form> </div> </div> <div class="panel"> <div class="panel-header"> <h3>Heading</h3> <a href="javascript:" class="control">Read more</a> </div> <div class="panel-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> </div> </div>	</div>
</div>
<div class="panel">	<div class="panel-header">	<h2>Heading</h2>	<a class="control" href="javascript:">Read more</a>	</div>	<div class="panel-content">	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p>	</div>
</div>
<div class="panel">	<div class="panel-header">	<h2>Heading</h2>	<a class="control" href="javascript:">Read more</a>	</div>	<div class="panel-content">	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.	Ad, nihil, consectetur quibusdam culpa eveniet hic laborum vel	voluptatibus obcaecati quia asperiores adipisci error ipsum	earum ducimus reprehenderit aperiam. Distinctio, illum.</p>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ERC Search panels mockup - Script Codes CSS Codes

body{ padding: 1em;
}
form.filter{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 15px; margin-top: 15px; position: relative; background: #3AB5EA; overflow: hidden; margin: 0 0 1em;
}
form.filter label{ display: none;
}
form.filter .field{ float: left; width: 95%;
}
form.filter .field input{ width: 100%; display: block; background: #fff; padding: .5em; font-size: 1.4em; border-radius: 5px; border: none;
}
form.filter .submit input{ border: 5px solid; border-radius: 50%; width: 60px; height: 60px; text-align: center; background: #fff; position: absolute; top: .6em; right: .8em; color: #2080A6; font-weight: bold;
}
.panel{ margin: .3em 0; overflow: hidden; background: #EAEAEA; border-radius: 8px 8px 0 0;
}
.panel .panel-header{ overflow: hidden; background: #D6D6D6;
}
.panel .panel-header h2,
.panel .panel-header h3{ margin: 0; padding: .5em 1em; font-size: 1.1em; float: left; min-width: 15%; text-align: center; background-color: #3AB5EA; background-image: url(data:image/x-png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALBAMAAABWnBpSAAAAA3NCSVQICAjb4U/gAAAAFVBMVEX///////////////////////////9nSIHRAAAAB3RSTlMAETO7zO7/xFZuYAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMDkvMTQvm3IVAAAANklEQVQImWNgYGBQYgADplAFMK2aFgTmhqWlCgBpkbS0NEcGBkY3IJ0iAOampRkw4AJsYPkEAK3wCsQzLfQaAAAAAElFTkSuQmCC); background-repeat: no-repeat; background-position: 15px 49%; color: #fff;
}
.panel .panel-header a.control{ float: right; padding: .8em 1em 0 1em; color: #000; font-style: italic; font-size: .9em;
}
.panel .panel-content{ padding: 0 1em; border: 1px solid #999;
}
.panel.closed{ border-radius: 8px;
}
.panel.closed .panel-content{
}
.panel.open h2,
.panel .panel.open h3{ background-image: url(data:image/x-png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALBAMAAABWnBpSAAAAA3NCSVQICAjb4U/gAAAAIVBMVEX///////////////////////////////////////////9/gMdvAAAAC3RSTlMAM2Z3iJmqzN3u/3QCXXgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA1LzA5LzE0L5tyFQAAADZJREFUCJlj4FoFAgsY0AEHWLyAgXEWkFopwMAgBaQnAiWYgLQCSIXVqkVglayrHCBaUpG0AwDdvxK8m8bukAAAAABJRU5ErkJggg==); background-position: 15px 47%;
}
.panel .panel{ border-radius: 5px 5px 0 0; background: #666;
}
.panel .panel + .panel{ margin-top: -.6em;
}
.panel .panel.closed{ border-radius: 5px;
}
.panel .panel .panel-header{ background: #333; color: #fff;
}
.panel .panel .panel-header h3{ background-color: transparent; font-size: 1em;
}
.panel .panel a.control{ color: #fff;
}
.panel .panel .panel-content{ color: #fff;
}
.panel form{ padding: .5em; overflow: hidden; margin-bottom: 1em; background: #3AB5EA; border-radius: 5px;
}
.panel form .field{ float: left; padding: .3em; margin: 0 .5em; width: 30%; background: #fff; border-radius: 8px;
}
.panel form label{ display: none;
}
.panel form .field input,
.panel form .field select{ border: none; color: #000; width: 100%;
}
.panel form .submit input{ padding: .3em 1em; color: #207EA5; background: #fff; border: 2px solid #217EA6; border-radius: 8px;
}

ERC Search panels mockup - Script Codes JS Codes

(function($) { var allPanels = $('.panel').addClass('closed'); allPanels.find('> .panel-content').hide(); $('.panel .panel-header > .control').click(function() { $this = $(this); $target = $this.parents('.panel').first(); $siblings = $target.siblings(); $children = $target.find('.panel'); if($target.hasClass('open')){ $target.removeClass('open').addClass('closed').find('> .panel-content').slideUp(200); $this.text('Read more'); } else { $siblings.removeClass('open').addClass('closed'); $siblings.find('> .panel-content').slideUp(200); $siblings.find('.panel-header > .control').text('Read more'); $target.removeClass('closed').addClass('open').find('> .panel-content').slideDown(200); $this.text('Close panel'); } if($children.length && $target.hasClass('open')){ $children.first().filter('.closed').find('.control').click(); } return false; });
})(jQuery);
ERC Search panels mockup - Script Codes
ERC Search panels mockup - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 4,970 Kb
Views 48,576
Do you need developer help for ERC Search panels mockup?

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!

Aurer (aurer) Script Codes
Name
Update manager experimental UI
Vue form theme
Webkit CSS Scrollbars
Fixed banners and parallax backgrounds
Collapsing list indicator animation
CSS cube experiment
Menu handle
Squished forms mockup
One of those text scrollers
Laravel AutoSchema Mockup
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!