Virtual Freshers Fair Layout
How do I make an virtual freshers fair layout?
What is a virtual freshers fair layout? How do you make a virtual freshers fair layout? This script and codes were developed by Orrin Ward on 01 February 2023, Wednesday.
Virtual Freshers Fair Layout Previews
Virtual Freshers Fair Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Virtual Freshers Fair Layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
fieldset { padding: 0; border: 0px; margin: 0px;
}
body { margin: 0; padding: 0; color: #231f20; font-size: 16px; line-height: 1.6em;
}
body, input, textarea { font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2em; font-weight: 600;
}
h1 { font-size: 40px;
}
h2 { font-size: 34px;
}
h3 { font-size: 26px;
}
em { font-style: italic;
}
#hero-inner, #step-1-inner, #step-2-inner { padding-top: 60px; padding-bottom: 60px; margin-left: auto; margin-right: auto;
}
#hero-inner, #step-1-inner { width: 1140px; padding-left: 20px; padding-right: 20px;
}
#step-2-inner { width: 760px; padding-right: 190px; padding-left: 190px; background-image: url("/images/freshers/tents.png"); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 320px;
}
#hero-outer { background-color: #5691d5; background-image: url("/images/freshers/header-bunting.png"); background-repeat: repeat-x; background-position: center top;
}
#hero-inner { background-image: url("/images/freshers/vff-logo.png"); background-repeat: no-repeat; background-position: right bottom;
}
#step-1-outer { background: rgba(250, 255, 250, 0.6); background-image: url("/images/freshers/balloons-left.png"), url("/images/freshers/balloons-right.png"); background-repeat: no-repeat; background-position: left center, right center;
}
#step-2-outer { background: #5691d5; color: #FFF; background-image: url("/images/freshers/header-stripes.png"); background-repeat: repeat-x; background-position: center top; padding-top: 60px;
}
#product-message { float: left; color: #FFF; text-shadow: 1px 1px 1px #333; padding: 80px 20px; width: 720px;
}
#product-message h1 { margin-bottom: 0.5em;
}
.step-number { text-align: center; font-size: 16px;
}
.step-title { text-align: center; font-size: 34px; margin-top: 0px;
}
.checkboxes-list label .external-link { display: none;
}
.checkboxes-list label:hover { background-color: #fffab6; background-color: rgba(255, 240, 0, 0.3); cursor: pointer; cursor: hand;
}
.checkboxes-list label:hover .external-link { display: inline;
}
#submit-button-container { text-align: center; padding: 10px;
}
.step-container { margin-bottom: 60px;
}
.step-number { opacity: 0.7; margin-bottom: 10px;
}
.checkboxes-list ul { padding-left: 0;
}
.checkboxes-list ul li { font-size: 13px; list-style: none; width: 190px; float: left;
}
.checkboxes-list ul li label { display: block; width: 182px; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px;
}
.checkboxes-list ul li input[type=checkbox] { margin: 2px 2px 2px 0px;
}
.checkboxes-list ul li a.external-link { display: none; height: 16px; width: 16px; float: right; background-image: url("/images/icons/link.png"); background-repeat: no-repeat; background-position: top center; text-indent: -200px; overflow: hidden; margin-top: 3px;
}
.checkboxes-list ul li a.external-link:hover { background-position: bottom center;
}
.checkboxes-list ul li a.external-link:hover a.external-link { display: block;
}
.checkall { display: none;
}
.checkall-container { text-decoration: underline; font-size: 11px;
}
.checkall-container:hover { cursor: pointer; cursor: hand;
}
.choice-section { width: 190px; float: left; padding-top: 2px; padding-bottom: 2px; margin-bottom: 30px; background-color: rgba(250, 255, 250, 0.6);
}
.category-name { font-size: 24px; margin-bottom: 0.5em; font-weight: 600; width: 182px; padding-left: 4px; padding-right: 4px;
}
.category-description { font-size: 14px; padding-left: 4px; padding-right: 4px;
}
.choice-name { font-size: 13px; background-position: left center; background-size: 16px; background-repeat: no-repeat; padding-left: 20px;
}
#societies-section.choice-section { width: 1140px; box-shadow: 0 0 0 2px #e6e6e6; background-color: #f7f7f7;
}
#societies-section.choice-section .category-name { float: left; margin-top: 10px; margin-bottom: 30px;
}
#societies-section.choice-section .category-description { float: left; width: 942px;
}
#societies-section.choice-section .choice-name { background-image: none; background-size: 0; background-repeat: no-repeat; padding-left: 0;
}
.clearBoth { clear: both;
}
#leemail-form-container { background: rgba(255, 255, 255, 0.8); color: #231f20; padding-top: 20px; padding-bottom: 20px;
}
#leemail-form-container .leemail-intro { width: 720px; padding-left: 20px; padding-right: 20px;
}
#leemail-form-container #input-field-container { padding-left: 10px; padding-right: 10px;
}
#leemail-form-container #input-field-container input { width: 338px; border: 1px solid #e6e6e6; padding: 4px; margin-right: 10px; margin-left: 10px; margin-bottom: 20px; font-size: 20px;
}
#leemail-form-container #input-field-container input[type=submit] { width: auto; padding: 0.3em 1em; margin-bottom: 0px; font-size: 30px;
}
.button_style { font-size: 30px; padding: 0.3em 1em; border-radius: 4px; border: 0px !important; color: #FFF; background: #00adef; box-shadow: 0 0 0px 1px #455ca9 inset; text-decoration: none; text-shadow: -1px 1px #666;
}
.button_style:hover { background: #0088bc; cursor: pointer; cursor: hand;
}
.field_with_errors { display: inline-block;
}
.field_with_errors input { box-shadow: 0 0 3px 1px red;
}
.flashfix { position: fixed; top: 0; left: 0; width: 100%;
}
.flashfix .flash { margin: 0 auto; width: 1140px; text-align: center;
}
.flashfix .flash .flash_text { padding: 1em; background-color: #fffab6; box-shadow: 0 0 3px 1px yellow; display: inline-block;
}
.flash_hide { opacity: 0.8;
}
.flash_hide:hover { cursor: pointer; cursor: hand; opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> %header#hero-outer #hero-inner #product-message %h1 Societies, deals and local tips %h3 Go from %em Average Joe to =succeed '.' do %em In-the-know #product-branding .clearBoth
%form %section#step-1-outer #step-1-inner .step-container %p.step-number Step 1 of 2 %h1.step-title Click all the things you’re interested in #choices-container %fieldset#societies-section.choice-section %h1.category-name Societies %p.category-description Become a Social Member of all the societies you might want to join for free. %br/ Societies tell Social Members about open events throughout the year and membership offers. .clearBoth .checkboxes-list %ul %li %label %input(type="checkbox" value="rsu-african-carribean") %span.choice-name African and Carribean %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-basketball") %span.choice-name Basketball %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-christian") %span.choice-name Christian %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-eco") %span.choice-name Eco %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-fencing") %span.choice-name Fencing %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-football") %span.choice-name Football %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-islamic") %span.choice-name Islamic %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-lgbtplus") %span.choice-name LGBT+ %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-mental-wealth") %span.choice-name Mental Wealth %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-mag") %span.choice-name Music Anime Games %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="rsu-rugby") %span.choice-name(style="background-image:url('https://getfavicon.appspot.com/http://www.monster.com?defaulticon=https://leemail.me/favicon.png')") Rugby %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth %fieldset#going-out-section.choice-section %h1.category-name Going Out %h2.category-description .checkboxes-list %ul %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth %fieldset#eating-out-section.choice-section %h1.category-name Eating Out %h2.category-description .checkboxes-list %ul %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li(title="A great website") %label %input(type="checkbox" value="http://tillate.com") %span.choice-name A Great Site %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth %fieldset#deals-section.choice-section %h1.category-name Deals %h2.category-description .checkboxes-list %ul %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name(style="background-image:url('http://leemail.me/favicon.png'); background-position:left center;background-size:16px;background-repeat:no-repeat;padding-left:20px;") Till Later %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth %fieldset#saving-money-section.choice-section %h1.category-name Saving Money %h2.category-description .checkboxes-list %ul %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth %fieldset#freebies-section.choice-section %h1.category-name Freebies %h2.category-description .checkboxes-list %ul %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label %input(type="checkbox" value="http://tillate.com") %span.choice-name Till Late %a.external-link(href="#link" title="Visit website") Visit Website %li %label.checkall-container %input.checkall(type="checkbox") select all .clearBoth .clearBoth #submit-button-container %a.next-step.button_style(href="#step-2-outer") Next %section#step-2-outer #step-2-inner .step-container %p.step-number Step 2 of 2 %h1.step-title Get everything you want #leemail-form-container #input-field-container %input %input %input %input %input.button_style(type="submit" value="Sign up and connect") .clearBoth
:plain <div class="flashfix"> <div class="flash error"> <p class="flash_text"> email is not a well-formatted email address; Password is too short (try 6 characters or longer) <span class="flash_hide small_text">(hide)</span> </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>
Virtual Freshers Fair Layout - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
fieldset { padding: 0; border: 0px; margin: 0px;
}
body { margin: 0; padding: 0; color: #231f20; font-size: 16px; line-height: 1.6em;
}
body, input, textarea { font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2em; font-weight: 600;
}
h1 { font-size: 40px;
}
h2 { font-size: 34px;
}
h3 { font-size: 26px;
}
em { font-style: italic;
}
#hero-inner, #step-1-inner, #step-2-inner { padding-top: 60px; padding-bottom: 60px; margin-left: auto; margin-right: auto;
}
#hero-inner, #step-1-inner { width: 1140px; padding-left: 20px; padding-right: 20px;
}
#step-2-inner { width: 760px; padding-right: 190px; padding-left: 190px; background-image: url("/images/freshers/tents.png"); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 320px;
}
#hero-outer { background-color: #5691d5; background-image: url("/images/freshers/header-bunting.png"); background-repeat: repeat-x; background-position: center top;
}
#hero-inner { background-image: url("/images/freshers/vff-logo.png"); background-repeat: no-repeat; background-position: right bottom;
}
#step-1-outer { background: rgba(250, 255, 250, 0.6); background-image: url("/images/freshers/balloons-left.png"), url("/images/freshers/balloons-right.png"); background-repeat: no-repeat; background-position: left center, right center;
}
#step-2-outer { background: #5691d5; color: #FFF; background-image: url("/images/freshers/header-stripes.png"); background-repeat: repeat-x; background-position: center top; padding-top: 60px;
}
#product-message { float: left; color: #FFF; text-shadow: 1px 1px 1px #333; padding: 80px 20px; width: 720px;
}
#product-message h1 { margin-bottom: 0.5em;
}
.step-number { text-align: center; font-size: 16px;
}
.step-title { text-align: center; font-size: 34px; margin-top: 0px;
}
.checkboxes-list label .external-link { display: none;
}
.checkboxes-list label:hover { background-color: #fffab6; background-color: rgba(255, 240, 0, 0.3); cursor: pointer; cursor: hand;
}
.checkboxes-list label:hover .external-link { display: inline;
}
#submit-button-container { text-align: center; padding: 10px;
}
.step-container { margin-bottom: 60px;
}
.step-number { opacity: 0.7; margin-bottom: 10px;
}
.checkboxes-list ul { padding-left: 0;
}
.checkboxes-list ul li { font-size: 13px; list-style: none; width: 190px; float: left;
}
.checkboxes-list ul li label { display: block; width: 182px; padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px;
}
.checkboxes-list ul li input[type=checkbox] { margin: 2px 2px 2px 0px;
}
.checkboxes-list ul li a.external-link { display: none; height: 16px; width: 16px; float: right; background-image: url("/images/icons/link.png"); background-repeat: no-repeat; background-position: top center; text-indent: -200px; overflow: hidden; margin-top: 3px;
}
.checkboxes-list ul li a.external-link:hover { background-position: bottom center;
}
.checkboxes-list ul li a.external-link:hover a.external-link { display: block;
}
.checkall { display: none;
}
.checkall-container { text-decoration: underline; font-size: 11px;
}
.checkall-container:hover { cursor: pointer; cursor: hand;
}
.choice-section { width: 190px; float: left; padding-top: 2px; padding-bottom: 2px; margin-bottom: 30px; background-color: rgba(250, 255, 250, 0.6);
}
.category-name { font-size: 24px; margin-bottom: 0.5em; font-weight: 600; width: 182px; padding-left: 4px; padding-right: 4px;
}
.category-description { font-size: 14px; padding-left: 4px; padding-right: 4px;
}
.choice-name { font-size: 13px; background-position: left center; background-size: 16px; background-repeat: no-repeat; padding-left: 20px;
}
#societies-section.choice-section { width: 1140px; box-shadow: 0 0 0 2px #e6e6e6; background-color: #f7f7f7;
}
#societies-section.choice-section .category-name { float: left; margin-top: 10px; margin-bottom: 30px;
}
#societies-section.choice-section .category-description { float: left; width: 942px;
}
#societies-section.choice-section .choice-name { background-image: none; background-size: 0; background-repeat: no-repeat; padding-left: 0;
}
.clearBoth { clear: both;
}
#leemail-form-container { background: rgba(255, 255, 255, 0.8); color: #231f20; padding-top: 20px; padding-bottom: 20px;
}
#leemail-form-container .leemail-intro { width: 720px; padding-left: 20px; padding-right: 20px;
}
#leemail-form-container #input-field-container { padding-left: 10px; padding-right: 10px;
}
#leemail-form-container #input-field-container input { width: 338px; border: 1px solid #e6e6e6; padding: 4px; margin-right: 10px; margin-left: 10px; margin-bottom: 20px; font-size: 20px;
}
#leemail-form-container #input-field-container input[type=submit] { width: auto; padding: 0.3em 1em; margin-bottom: 0px; font-size: 30px;
}
.button_style { font-size: 30px; padding: 0.3em 1em; border-radius: 4px; border: 0px !important; color: #FFF; background: #00adef; box-shadow: 0 0 0px 1px #455ca9 inset; text-decoration: none; text-shadow: -1px 1px #666;
}
.button_style:hover { background: #0088bc; cursor: pointer; cursor: hand;
}
.field_with_errors { display: inline-block;
}
.field_with_errors input { box-shadow: 0 0 3px 1px red;
}
.flashfix { position: fixed; top: 0; left: 0; width: 100%;
}
.flashfix .flash { margin: 0 auto; width: 1140px; text-align: center;
}
.flashfix .flash .flash_text { padding: 1em; background-color: #fffab6; box-shadow: 0 0 3px 1px yellow; display: inline-block;
}
.flash_hide { opacity: 0.8;
}
.flash_hide:hover { cursor: pointer; cursor: hand; opacity: 1;
}
Virtual Freshers Fair Layout - Script Codes JS Codes
$(function () { $('.checkall').click(function() { $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked); });
});
$('.next-step').click(function(){ $('#step-2-outer').show();
});
$('.flash_hide').click(function(){ $(this).closest('.flashfix').fadeOut();
});
| Developer | Orrin Ward |
| Username | orrinward |
| Uploaded | February 01, 2023 |
| Rating | 3 |
| Size | 9,349 Kb |
| Views | 2,024 |
Do you need developer help for Virtual Freshers Fair Layout?
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!
Orrin Ward (orrinward) Script Codes
| Name | Size |
| Leemail signup form play | 2,092 Kb |
| Markerly Demo | 1,919 Kb |
| Clunky visual filtering based on classes | 2,800 Kb |
| Bootstrap form HAML | 6,119 Kb |
| AfG Utilities Testing | 2,739 Kb |
| MCB Blog Style | 7,326 Kb |
| SMR2013 hack | 18,853 Kb |
| Expandable block items. | 2,923 Kb |
| AfG App launcher slug SCSS | 2,262 Kb |
| Basic leemail playground | 3,870 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Sketchy Box | Mnicpt | 3,033 Kb |
| CSS Org Chart | Appirio-ux | 3,882 Kb |
| CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
| Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
| Heartbeat | Apetrov | 2,079 Kb |
| Birthday Party Starter | Aussieyang | 1,629 Kb |
| Wikipedia Viewer | Thalpha | 4,426 Kb |
| See Through | Larrygeams | 77,410 Kb |
| Css or Czz.. | Judag | 4,111 Kb |
| Simple jQuery Slider | Jurbank | 2,874 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!