Fun nav bar blog style

Developer
Eric Franklin
Size
4,813 Kb
Views
50,600
  1. Fun nav bar blog style Previews
  2. Fun nav bar blog style HTML Codes
  3. Fun nav bar blog style CSS Codes
  4. Fun nav bar blog style JS Codes

How do I make an fun nav bar blog style?

Just bored watching archer and had an idea for a nav style for a blog. . What is a fun nav bar blog style? How do you make a fun nav bar blog style? This script and codes were developed by Eric Franklin on 25 July 2022, Monday.

Fun nav bar blog style Previews
IQ Test

Fun nav bar blog style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fun nav bar blog style</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Archer</title>	<link rel="stylesheet" type="text/css" href="styles/eric.css">
</head>
<body>
<nav>	<a class="logo" href="#">Archer</a>	<ul>	<li>	<a href="#">Home</a>	</li>	<li>	<a href="#">Portfolio</a>	</li>	<li>	<a href="#">Work</a>	</li>	<li>	<a href="#">Contact</a>	</li>	</ul>
</nav>
<div class="container main">	<h1>	An Archer themed blog	</h1><img class="archer" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/archer.jpg">	<div class="work left container">	<h2>	Sterling Archer	</h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/arch1.jpg"> <span>Doctors lorem sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>	</div>	<hr>	<div class="work right container">	<h2>Sterling Archer</h2>	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/arch2.jpg">	<span>Doctors lorem sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo	consequat.</span>	</div>	<hr>	<div class="work left container">	<h2>	Sterling Archer	</h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/arch1.jpg"> <span>Doctors lorem sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>	</div>	<hr>	<div class="work right container">	<h2>Sterling Archer</h2>	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95581/arch2.jpg">	<span>Doctors lorem sit amet, consectetur adipisicing elit, sed do eiusmod	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo	consequat.</span>	</div>
</div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fun nav bar blog style - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,300);
body { background-color: #221E1D; font-family: 'Open Sans', sans-serif; margin: 0;
}
.container,
.header,
.work { max-width: 950px; width: 99%;
}
.main { background-color: #ECEAE0; border: 1px solid #ccc; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.27); display: block; margin: 0 auto; min-height: 1000px;
}
.main h1 { bottom: 75px; color: #E9633B; clear: both; position: relative; text-align: center;
}
@media (max-width: 970px) { .main h1 { bottom: 0; margin-top: 150px; }
}
.main .archer { background-color: #fff; box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.27); display: block; margin: 0 auto; padding: 7px; width: 90%;
}
.main .work { margin: 40px auto;
}
.main .work h2 { color: #221E1D; text-align: center;
}
.main .work span { display: table-cell; height: 190px; line-height: 32px; padding: 14px; text-align: center; vertical-align: middle;
}
.main .left img { float: left; padding: 10px;
}
@media (max-width: 930px) { .main .left img { display: block; float: none; margin: 0 auto; width: 90%; }
}
.main .right img { float: right; padding: 10px;
}
@media (max-width: 930px) { .main .right img { display: block; float: none; margin: 0 auto; width: 90%; }
}
nav { background: #E9633B; bottom: 65px; box-shadow: -1px 0px 1px #eee, 0px 1px 1px #ccc, -2px 1px 1px #eee, -1px 2px 1px #ccc, -3px 2px 1px #eee, -2px 3px 1px #ccc, -4px 3px 1px #eee, -3px 4px 1px #ccc, -5px 4px 1px #eee, -4px 5px 1px #ccc, -6px 5px 1px #eee, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); float: left; height: 236px; overflow: hidden; position: relative; right: 127px; width: 500px; transform: rotate(-38deg); transition: width 300ms linear;
}
@media (max-width: 970px) { nav { bottom: 0; box-shadow: none; height: 100px; position: fixed; right: 0; top: 0; width: 100%; transform: rotate(0deg); }
}
nav ul { left: 60px; list-style-type: none; position: relative; top: 40px; transform: rotate(38deg); -ms-transform: rotate(38deg); /* IE 9 */ -webkit-transform: rotate(38deg); /* Opera, Chrome, and Safari */
}
@media (max-width: 970px) { nav ul { box-shadow: none; display: inline-flex; float: right; left: 0; transform: rotate(0deg); }
}
nav ul li { margin: 10px 0px 10px 0px;
}
nav ul li a { color: white; font-weight: bold; text-decoration: none; transition: all 300ms ease-in-out;
}
nav ul li a:hover { color: #221E1D;
}
@media (max-width: 970px) { nav ul li a { padding: 12px; }
}
nav .logo { color: white; font-size: 61px; font-weight: bold; left: 130px; position: relative; top: 161px; text-decoration: none; text-shadow: 5px 5px rgba(0, 0, 0, 0.27);
}
@media (max-width: 970px) { nav .logo { left: 20px; margin-left: 0; top: 0; }
}

Fun nav bar blog style - Script Codes JS Codes

jQuery(document).scroll(function(){	if(jQuery(this).scrollTop() > 15) {	jQuery('nav').css({	'position':'fixed',	'bottom':'0',	'top':'0',	'right':'0',	'transform':'rotate(0deg)',	'height':'100px',	'width':'100%',	});	jQuery('.logo').css({	'top':'0',	'left':'0',	'margin-left':'20px',	});	jQuery('nav').css({	'box-shadow':'none',	'transition':'width 300ms linear',	})	jQuery('nav ul').css({	'transform':'rotate(0deg)',	'left':'0',	'display':'inline-flex',	'float':'right',	});	jQuery('nav ul li a').css({	'padding':'12px',	})	jQuery('.main h1').css({	'margin-top':'275px',	})	} else {	jQuery('nav').css({	'position':'relative',	'bottom':'65px',	'top':'inherit',	'right':'127px',	'transform':'rotate(-38deg)',	'height':'236px',	'width':'500px',	});	jQuery('.logo').css({	'top':'161px',	'left':'130px',	'margin-left':'0',	});	jQuery('nav').css({	'box-shadow':'-1px 0px 1px #eeeeee, 0px 1px 1px #cccccc, -2px 1px 1px #eeeeee, -1px 2px 1px #cccccc, -3px 2px 1px #eeeeee, -2px 3px 1px #cccccc, -4px 3px 1px #eeeeee, -3px 4px 1px #cccccc, -5px 4px 1px #eeeeee, -4px 5px 1px #cccccc, -6px 5px 1px #eeeeee, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3)',	'transition':'none',	})	jQuery('nav ul').css({	'transform':'rotate(38deg)',	'left':'60px',	'display':'inherit',	'float':'none',	});	jQuery('nav ul li a').css({	'padding':'0',	})	jQuery('.main h1').css({	'margin-top':'inherit',	})	}
});
Fun nav bar blog style - Script Codes
Fun nav bar blog style - Script Codes
Home Page Home
Developer Eric Franklin
Username FDfranklin
Uploaded July 25, 2022
Rating 4.5
Size 4,813 Kb
Views 50,600
Do you need developer help for Fun nav bar blog style?

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!

Eric Franklin (FDfranklin) Script Codes
Name
Mock up health chart with pop ups.
Responsive Table Idea
Simple jQuery modal with form.
Responsive Wedding Page
Portfolio Landing Page
Donation Counter
Gif play on hover.
Auto Loan Calculator
Animated Image
Lightning Vs. Penguins Hover Thingy
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!