Prototype jobboard6

Developer
Rob
Size
4,758 Kb
Views
32,384
  1. Prototype jobboard6 Previews
  2. Prototype jobboard6 HTML Codes
  3. Prototype jobboard6 CSS Codes
  4. Prototype jobboard6 JS Codes

How do I make an prototype jobboard6?

Final concept for job board item. What is a prototype jobboard6? How do you make a prototype jobboard6? This script and codes were developed by Rob on 15 August 2022, Monday.

Prototype jobboard6 Previews
IQ Test

Prototype jobboard6 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prototype jobboard6</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card"> <div class="initial"> <div class="header"> <img src="http://t3n.de/news/wp-content/uploads/2012/10/Xing-Logo-Featured-595x333.jpg" class="logo openlink"> <img src="http://www.library.manchester.ac.uk/firstimpressions/assets/images/make-your-mark/tools/icons/icon_black_Heart.png" title="favorite" class="favorite"> </div> <hr> <p class="desc">Lorem ipsum dolor sit amet, concesctetur adipisicing elit, sed do eiusmod tempor indididunt ut labore et dolore magna alique. Ut enim admit solor text text text texting... <a href="#" class="openlink"> read more</a></p> <div class="other-ad"> <span>Styled ad</span> <span>available</span> </div> <a class="price" id="priceopen">from €495</a> </div> <div class="hover" id="prices"> <div class="header"> <h2>Xing</h2> <a id="priceclose">close <span></span> </a> </div> <div class="price-toggle"> <a href="#" id="text1" class="current">text ad</a> <a href="#" id="styled1" >styled ad</a> </div> <div id="prices-wrap" class="prices text-prices"> <div class="price-item"> <p> <strong>1 text ad on Xing</strong> <span>30 day posting</span> </p> <a href="#" class="buy">€495</a> </div> <hr class="pi1"> <div class="price-item"> <p> <strong>5 text ads on Xing</strong> <span>30 day postings</span> </p> <a href="#" class="buy">€1.295</a> </div> <hr class="pi1"> <div class="price-item"> <p> <strong>10 text ads on Xing</strong> <span>30 day posting</span> </p> <a href="#" class="buy">€2.695</a> </div> <div class="price-item2"> <p> <strong>1 styled ad on Xing</strong> <span>30 day posting</span> </p> <a href="#" class="buy">€965</a> </div> <hr class="pi2"> <div class="price-item2"> <p> <strong>5 styled ads on Xing</strong> <span>30 day postings</span> </p> <a href="#" class="buy">€3.954</a> </div> <hr class="pi2"> <div class="price-item2"> <p> <strong>10 styled ads on Xing</strong> <span>30 day posting</span> </p> <a href="#" class="buy">€6.920</a> </div> <!--end of styled-prices--> <a class="price-link openprice" href="#">all price options</a> </div><!--end of prices--> </div>
</div><!--end of card--> <div class="modalshadow"></div>
<div class="modal desc-view"> <div class="modal-header"> <img src="http://t3n.de/news/wp-content/uploads/2012/10/Xing-Logo-Featured-595x333.jpg" class="logo"> <a class="close-modal">X</a> </div> <ul class="modal-nav"> <li class="nav-desc active-nav">Description</li> <li class="nav-text">Text Ads</li> <li class="nav-styled">Styled Ads</li> <li class="nav-packages">Packages</li> </ul> <div class="modal-desc"> <p class="desc">Lorem ipsum dolor sit amet, concesctetur adipisicing elit, sed do eiusmod tempor indididunt ut labore et dolore magna alique. Ut enim ad minim venaim do eisumod tempor indidudut ut labore et dolore magna alique.</p> <p class="desc">Lorem ipsum dolor sit amet, concesctetur adipisicing elit, sed do eiusmod tempor indididunt ut labore et dolore magna alique. Ut enim ad minim venaim do eisumod tempor indidudut ut labore et dolore magna alique.</p> </div><!--end of modal-desc--> <div class="text-desc"> <p class="desc">Text ads use only the text blocks and follow the specific styles of the job boards to which they are posted.</p> <p class="list-placeholder">a list of text ad packages with price buttons goes here</p> </div><!--end of text-desc--> <div class="styled-desc"> <p class="desc">Styled ads allow you to include photos, logos, and custom colors and layouts in your job ad. This is how your ad appears on your own career site.</p> <p class="list-placeholder">a list of styled ad packages with price buttons goes here</p> </div><!--end of styled-desc--> <div class="packages-desc"> <p class="desc">Packages offer tremendous value. Packages allow you to post a job on multiple boards while saving in the process. Here is a list of packages containing a Xing job posting:</p> <p class="list-placeholder">a list of job packages with price buttons goes here</p> </div><!--end of packages-desc-->
</div><!--end of modal--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Prototype jobboard6 - Script Codes CSS Codes

body {color:#232323;}
h1 {margin:20px 0 10px 20px;}
.notes { margin:0 20px; font-size:0.8em; color:#777;
}
a {color:#44c6f2;text-decoration:none;}
a:hover {color:#0b9fd3;}
a, .hover, .favorite, .logo, .price-item, span {-webkit-transition:all .15s ease-in; -moz-transition:all .15s ease-in; -o-transition:all .15s ease-in; transition:all .15s ease-in;}
.hover {-webkit-transition:all .15s ease-out; -moz-transition:all .15s ease-out; -o-transition:all .15s ease-out; transition:all .15s ease-out;}
.card {float:left; position:relative; width:300px; height:280px; margin:30px; overflow:hidden; border-top:5px solid #44c6f2;}
.card-type { position:absolute; color:#fff; font-size:0.8em; padding:0.2em; background:#777; z-index:100; top:0; left:0; right:0; height:20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.card .initial {position:absolute;top:0;left:0;width:300px;height:280px;background:#fff;}
.initial .header {position:relative;float:left;width:100%;height:80px;margin-top:10px;}
.initial .header .type {position:absolute;bottom:5px;left:2%;color:#e6e6e6;font-size:1.4em;}
.initial .header .logo { float:left; width:150px; cursor:pointer; padding-left:50%; margin-left:-75px; margin-top:-5px; opacity:1;
}
.initial .header .logo:hover { opacity:0.8;
}
.initial .header .favorite {position:absolute;top:5px;right:5px;width:12px;opacity:0.3;}
.initial .header .favorite:hover {cursor:pointer;opacity:0.6;}
.initial hr {width:96%;margin:0 2%;height:2px;border:none;background:#e6e6e6;}
.initial .desc {float:left;width:96%;margin:12px 2%;}
.initial .other-ad { position:absolute; bottom:0; left:2%; color:#777;
}
.initial .other-ad span:nth-child(1) { font-size:1em; float:left; clear:left; font-weight:bold;
}
.initial .other-ad span:nth-child(2) { font-size:1.1em; float:left; clear:left; font-weight:normal;
}
.price {position:absolute;bottom:0;right:0;background:#44c6f2;color:#fff;padding:10px 30px;font-size:1.2em;cursor:pointer;}
.card .hover { position:absolute; top:-280px; left:0; width:300px; height:280px; background:#ededed; z-index:10;}
.card .open {top:0;}
.hover .header {float:left;position:relative;width:100%;background:#fff;height:auto;}
.hover .header h2 {float:left; font-size:1.8em; margin:10px 0 10px 2%;}
.hover .header a {position:absolute;top:10px;right:6%;cursor:pointer;}
.hover .header a span { content:''; position:absolute;top:6px;right:-14px;	width: 0;	height: 0;	border-left: 5px solid transparent;	border-right: 5px solid transparent;	border-bottom: 5px solid #44c6f2;
}
.hover .header a:hover span {	border-bottom: 5px solid #0b9fd3;
}
.price-toggle {float:left;width:100%;font-size:14px;height:22px; background:#fff;}
.price-toggle a {float:left; padding:3px 10px 0; color:rgb(200,200,200); height:22px;}
.price-toggle a:hover {color:#44c6f2;}
.price-toggle .current {color:#111;background:#ededed;}
.price-toggle .current:hover {color:#111;}
.hover hr {float:left;width:92%;margin:2px 4%;background:rgb(204, 204, 204);height:1px;border:none;}
.prices {float:left;width:100%;padding-top:4px;}
.price-item, .price-item2 {float:left;width:96%;padding:0 2%;}
.price-item p, .price-item2 p {float:left;width:65%;margin:10px 0;}
.price-item strong, .price-item2 strong {color:#333;display:block;font-size:0.8em;}
.price-item span, .price-item2 span {color:#777;font-size:0.8em;}
.text-prices .price-item2 {display:none;}
.style-prices .price-item {display:none;}
.text-prices .pi2 {display:none;}
.style-prices .pi1 {display:none;}
.price-item:hover {background:#e2e2e2;}
.buy {float:right;width:30%;background:#44c6f2;color:#fff;padding:10px 0;text-align:center;margin:8px 0;}
.buy:hover, .price:hover {background:#0b9fd3;color:#fff;}
.buy:active, .price:active {background:#0b84af;}
.price-link {position:absolute;bottom:0;left:0;right:0;width:100%;padding:5px 0; background:#fff;text-align:center;border-bottom:1px solid rgb(204, 204, 204);}
.modalshadow {position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000; background:rgba(0,0,0,0.5);display:none;}
.openshadow {display:block;}
.modal { position:absolute; z-index:1001; width:600px; top:20%; left:50%; margin-left:-300px; background:#fff; padding-bottom:15px;
}
.modal-header {float:left;width:100%;height:120px;}
.modal .logo {float:left;width:200px;margin-left:-100px;padding-left:50%;}
.close-modal {position:absolute;top:5px;right:5px;cursor:pointer;}
.modal-nav {float:left; width:90%; margin:10px 5%; padding:0;
}
.modal-nav li {float:left; list-style:none; margin:0 15px 0 0; cursor:pointer; color:#999;
}
.modal-nav li:hover {color:#44c6f2;}
.modal-nav .active-nav {color:#111; text-decoration:underline;
}
.modal-nav .active-nav:hover {color:#111;
}
.modal {display:none;}
.modal p {float:left;width:90%;margin:10px 5%;}
.modal-desc {display:none;}
.text-desc {display:none;}
.styled-desc {display:none;}
.packages-desc {display:none;}
.desc-view .modal-desc {display:block;}
.text-view .text-desc {display:block;}
.styled-view .styled-desc {display:block;}
.packages-view .packages-desc {display:block;}
.list-placeholder {font-styled:italic;
color:#ef790f;}
.openmodal {display:block;}

Prototype jobboard6 - Script Codes JS Codes

$(document).ready(function() { $('#priceopen').click(function (e) {	$('#prices').addClass('open');	e.preventDefault(); }); $('#priceclose').click(function(e){	$('#prices').removeClass('open');	e.preventDefault(); });	$('#priceopen2').click(function (e) {	$('#prices2').addClass('open');	e.preventDefault(); }); $('#priceclose2').click(function(e){	$('#prices2').removeClass('open');	e.preventDefault(); }); $('.openlink').click(function() { $('.modal').removeClass('text-view styled-view packages-view').addClass('openmodal desc-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-desc').addClass('active-nav'); $('.modalshadow').addClass('openshadow'); }); $('.openprice').click(function() { if($(this).parent().hasClass('text-prices')) { $('.modal').removeClass('desc-view styled-view packages-view').addClass('openmodal text-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-text').addClass('active-nav'); $('.modalshadow').addClass('openshadow'); } else { $('.modal').removeClass('desc-view text-view packages-view').addClass('openmodal styled-view'); $('.modalshadow').addClass('openshadow'); $('.modal-nav li').removeClass('active-nav'); $('.nav-styled').addClass('active-nav'); }; }); $('.modalshadow').click(function() { $('.modal').removeClass('openmodal'); $('.modalshadow').removeClass('openshadow'); }); $('.close-modal').click(function() { $('.modal').removeClass('openmodal'); $('.modalshadow').removeClass('openshadow'); }); $('#text1').click(function() { if($(this).hasClass('current')) { } else { $(this).addClass('current'); $('#styled1').removeClass('current'); $('#prices-wrap').removeClass('style-prices').addClass('text-prices'); }; }); $('#styled1').click(function() { if($(this).hasClass('current')) { } else { $(this).addClass('current'); $('#text1').removeClass('current'); $('#prices-wrap').removeClass('text-prices').addClass('style-prices'); }; }); $('.nav-desc').click(function() { if($('.modal').hasClass('desc-view')) { } else { $('.modal').removeClass('text-view styled-view packages-view').addClass('desc-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-desc').addClass('active-nav'); }; }); $('.nav-text').click(function() { if($('.modal').hasClass('text-view')) { } else { $('.modal').removeClass('desc-view styled-view packages-view').addClass('text-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-text').addClass('active-nav'); }; }); $('.nav-styled').click(function() { if($('.modal').hasClass('styled-view')) { } else { $('.modal').removeClass('text-view desc-view packages-view').addClass('styled-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-styled').addClass('active-nav'); }; }); $('.nav-packages').click(function() { if($('.modal').hasClass('packages-view')) { } else { $('.modal').removeClass('text-view styled-view desc-view').addClass('packages-view'); $('.modal-nav li').removeClass('active-nav'); $('.nav-packages').addClass('active-nav'); }; });
});
Prototype jobboard6 - Script Codes
Prototype jobboard6 - Script Codes
Home Page Home
Developer Rob
Username robooneus
Uploaded August 15, 2022
Rating 3
Size 4,758 Kb
Views 32,384
Do you need developer help for Prototype jobboard6?

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!

Rob (robooneus) Script Codes
Name
Scroll Arrow - delayed opacity change
Responsive Design Demo
Cards bkup
A Pen by Rob
Useless RPG
Simple Page with Side Menu
Berlin Restaurants
Flip Button
Scroll Arrow - keep hidden
Mini-search filter
Create amazing video scripts 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!