WIP

Developer
Laura Moraiti
Size
3,174 Kb
Views
24,288
  1. WIP Previews
  2. WIP HTML Codes
  3. WIP CSS Codes
  4. WIP JS Codes

How do I make an wip?

What is a wip? How do you make a wip? This script and codes were developed by Laura Moraiti on 04 November 2022, Friday.

WIP Previews
IQ Test

WIP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WIP</title> <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> <header class="header"> <div class="logo"></div> <div class="nav-pull"></div> <nav class="nav"> <ul> <li><a>Home</a></li> <li><a>Videos</a> <ul> <li><a>Youtube</a></li> <li><a>Vimeo</a></li> </ul> </li> <li><a>Audio</a></li> <li><a>Interviews</a></li> <li><a>About us</a></li> </ul> </nav> <div class="supporters"> <ul> <li>Logo 1</li> <li>Logo 2</li> <li>Logo 3</li> </ul> </div> <div class="actions"> <div class="search">Q</div> <div class="facebook">F</div> </div> <div class="search-field"> <button>Go!</button> <span><input type="text" class="search-input"></span> </div> <div class="clear"></div>
</header>
<div class="main"></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>

WIP - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700italic,700,400italic);
* { box-sizing: border-box; font-family: 'Quattrocento Sans', sans-serif;	font-style: normal;
}
.clear { clear: both;
}
ul, ul li { margin: 0; padding: 0; list-style: none;
}
.header { background-color: #444; color: #FFF; position: relative;
} .header a { color: #FFF; } .logo { background-color: orange; border-radius: 100%; }
.main { background-color: #DDD; width: 100%; height: 500px;
}
.nav ul li { cursor: hand; cursor: pointer;
}
/* to do: all commons */
.search { cursor: hand; cursor: pointer; } .search.active { background-color: #111; } .search-field { display: none; position: absolute; top: 3.75em; width: 100%; background-color: #555; padding: 1em; } .search-field button { float: right; } .search-field span { overflow: hidden; display: block; padding-right: 1em; } .search-input { width: 100%; }
@media (max-width: 660px) { .header { position: relative; width: 100%; } .logo { position: absolute; width: 7em; height: 7em; left: 50%; margin-left: -3.5em; top: 1em; } .nav, .supporters, .facebook { display: none; } .nav { position: absolute; top: 3.75em; width: 100%; background-color: #555; z-index: 100; } .nav ul li { border-bottom: 1px solid #333; } .nav ul li a { padding: 1em; line-height: 2.5em; } .nav ul li > ul { background-color: #555; } .nav ul li > ul li { border-top: 1px solid #333; border-bottom: none; } .nav ul li > ul li a { margin-left: 1em; } .nav ul li:hover, .nav ul li > ul li:hover{ background-color: #444; } .nav-pull { float: left; padding: 1.3em; background-color: #333; cursor: hand; cursor: pointer; } .nav-pull:before { content: "\2630"; } .search { float: right; padding: 1.3em; }
}
@media (min-width: 661px) and (max-width: 1200px) { .header { height: 100px; } .logo { width: 10em; height: 10em; float: left; margin: 1.5em 3em 0; } .nav, .supporters, .actions { float: left; margin-top: 1em; } .nav { margin-right: 2em; } .nav ul li { display: inline-block; _display: inline; *display: inline; zoom: 1; border-right: 2px dotted rgba(255,255,255,.5); padding: 0 1.2em; line-height: 3.5em; margin-right: -5px; position: relative; } .nav ul li:hover { background-color: rgba(255,255,255,.2); } .nav ul li:last-of-type { border-right: none; } .nav ul li > ul { display: none; position: absolute; background-color: #333; top: 3.0em; left: 0; width: 250px; } .nav ul li > ul li { border-right: none; display: block; } .nav ul li:hover > ul { display: block; } .supporters ul li { display: block; float: left; width: 3.5em; height: 3.5em; background-color: #CCC; margin-right: 1em; vertical-align: middle; line-height: 60px; color: #BBB; text-align: center; } .search, .facebook { float: left; line-height: 3.5em; padding: 0 1.3em; } .search:hover, .facebook:hover { background-color: #222; }
}
@media (min-width: 661px) and (max-width: 800px) { .header { height: 5em; } .logo { width: 6em; height: 6em; margin: 1em 1em 0; } .nav ul li { padding: 0 .8m; line-height: 3em; } .supporters, .facebook { display: none; } .search { line-height: 3em; padding: 0 1em; } .search-field { top: 100px; }
}
@media (min-width: 801px) and (max-width: 1000px) { .supporters, .facebook { display: none; }
}
@media (min-width: 801px) and (max-width: 1200px) { .actions { float: right; margin-right: 1em; } .search.active { padding-bottom: 1.5em; } .search-field { top: 100px; }
}
@media (min-width: 1201px) { .main { width: 80%; float: left;
} .header { width: 20%; padding: 2em 1em; text-align: center; float: left; } .logo { width: 10em; height: 10em; margin: 0 auto 2em; } .nav ul li { padding: 1.2em 0; border-bottom: 2px dotted rgba(255, 255, 255, .5); } .nav ul li:last-of-type { border-bottom: none; } .nav ul li:hover { background-color: rgba(255, 255, 255, .2); } .nav ul li > ul { display: none; } .supporters { display: block; float: none; } .supporters ul li { display: block; float: left; width: 3.5em; height: 3.5em; background-color: #CCC; margin-right: 1em; vertical-align: middle; line-height: 60px; color: #BBB; text-align: center; } .actions { clear: left;
}

WIP - Script Codes JS Codes

$(document).ready(function($){ $('.nav-pull').on('click', function(){ $('.nav').slideToggle(); }); $('.search').on('click', function(){ $('.search-field').slideToggle(); $(this).toggleClass('active'); });
});
WIP - Script Codes
WIP - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded November 04, 2022
Rating 3
Size 3,174 Kb
Views 24,288
Do you need developer help for WIP?

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
Simple and clean form
Horizontal infinite loop newsticker
Fun responsive split layout
Text and headings flow for a health site, on the making
Two column of responsive height
Responsive three column fixed layout
Breadcrumb made with jQuery
Easy hover effect for videos
Edit inline text and hidden input with jQuery
Unconventional slideshow
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!