Logo for Sensyu-kai (1971)

Developer
Niels Oeltjen
Size
2,299 Kb
Views
26,312
  1. Logo for Sensyu-kai (1971) Previews
  2. Logo for Sensyu-kai (1971) HTML Codes
  3. Logo for Sensyu-kai (1971) CSS Codes

How do I make an logo for sensyu-kai (1971)?

Did this a few years ago, perhaps 2008. Was looking through some old files so thought I'd share.. What is a logo for sensyu-kai (1971)? How do you make a logo for sensyu-kai (1971)? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.

Logo for Sensyu-kai (1971) Previews
IQ Test

Logo for Sensyu-kai (1971) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo for Sensyu-kai (1971)</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="tree">	<div id="bird-1">	<div class="head"></div>	<div class="eye"></div>	</div>	<div id="bird-2">	<div class="head"></div>	<div class="eye"></div>	</div>	<div id="foliage">	<div id="branch-1">	<div class="arc-1"></div>	<div class="arc-2"></div>	<div class="arc-3"></div>	<div class="arc-4"></div>	<div class="cap-1 end"></div>	<div class="cap-2"></div>	<div class="cap-3"></div>	<div class="cap-4"></div>	<div class="cap-5 end"></div>	</div>	<div id="branch-2">	<div class="arc-1"></div>	<div class="arc-2"></div>	<div class="arc-3"></div>	<div class="arc-4"></div>	<div class="cap-1 end"></div>	<div class="cap-2"></div>	<div class="cap-3"></div>	<div class="cap-4"></div>	<div class="cap-5 end"></div>	</div>	<div id="branch-3">	<div class="arc-1"></div>	<div class="arc-2"></div>	<div class="arc-3"></div>	<div class="arc-4"></div>	<div class="cap-1 end"></div>	<div class="cap-2"></div>	<div class="cap-3"></div>	<div class="cap-4"></div>	<div class="cap-5 end"></div>	</div>	<div id="branch-4">	<div class="arc-1"></div>	<div class="arc-2"></div>	<div class="arc-3"></div>	<div class="arc-4"></div>	<div class="cap-1 end"></div>	<div class="cap-2"></div>	<div class="cap-3"></div>	<div class="cap-4"></div>	<div class="cap-5 end"></div>	</div>	</div>	<div id="trunk"></div>
</div>
<p>Logo for Sensyu-kai (1971)</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Logo for Sensyu-kai (1971) - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #5a0404; text-align: center; color: white; font-family: sans-serif;
}
#tree {	width: 300px;	height: 340px;	position: relative;	background: #5a0404; margin: 20px auto;
}
#tree *,
#tree *:before {	position: absolute;
}
#tree [id^="bird-"] {	width: 50px;	height: 25px;	background: #ff4e00;	-webkit-border-radius: 0 0 50px 50px;	-moz-border-radius: 0 0 50px 50px;	-ms-border-radius: 0 0 50px 50px;	-o-border-radius: 0 0 50px 50px;	border-radius: 0 0 50px 50px;
}
#tree #bird-1 {	top: 56px;	left: 120px;	-webkit-transform: rotate(4deg);	-moz-transform: rotate(4deg);	-ms-transform: rotate(4deg);	-o-transform: rotate(4deg);	transform: rotate(4deg);
}
#tree #bird-2 {	top: 56px;	left: 181px;	-webkit-transform: rotate(-23deg);	-moz-transform: rotate(-23deg);	-ms-transform: rotate(-23deg);	-o-transform: rotate(-23deg);	transform: rotate(-23deg);
}
#tree [id^="bird-"] .head {	content: "";	top: -11px;	left: 0px;	width: 24px;	height: 12px;	background: #ff4e00;	-webkit-border-radius: 12px 12px 0 0;	-moz-border-radius: 12px 12px 0 0;	-ms-border-radius: 12px 12px 0 0;	-o-border-radius: 12px 12px 0 0;	border-radius: 12px 12px 0 0;
}
#tree [id^="bird-"] .head:before {	content: "";	bottom: -2px;	left: -6px;	width: 7px;	height: 2px;	background: #ff4e00;	-webkit-border-radius: 2px;	-moz-border-radius: 2px;	-ms-border-radius: 2px;	-o-border-radius: 2px;	border-radius: 2px;
}
#tree [id^="bird-"] .eye {	content: "";	top: -5px;	left: 7px;	width: 8px;	height: 8px;	background: #fff;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	-ms-border-radius: 50%;	-o-border-radius: 50%;	border-radius: 50%;
}
#tree #foliage {	top: 80px;	left: 50px;
}
#tree [id^="branch-"] {	position: relative;	height: 40px;	width: 200px;	margin-bottom: 4px;
}
#tree [class^="arc-"] {	top: 0;	width: 50px;	height: 25px;	border: 20px solid #ff4e00;	border-bottom: 0;	-webkit-border-radius: 50px 50px 0 0;	-moz-border-radius: 50px 50px 0 0;	-ms-border-radius: 50px 50px 0 0;	-o-border-radius: 50px 50px 0 0;	border-radius: 50px 50px 0 0;
}
#tree .arc-1 {	left: 0;
}
#tree .arc-2 {	left: 50px;
}
#tree .arc-3 {	left: 100px;
}
#tree .arc-4 {	left: 150px;
}
#tree [class^="cap-"] {	top: 25px;	width: 40px;	height: 20px;	background: #ff4e00;	-webkit-border-radius: 0 0 20px 20px;	-moz-border-radius: 0 0 20px 20px;	-ms-border-radius: 0 0 20px 20px;	-o-border-radius: 0 0 20px 20px;	border-radius: 0 0 20px 20px;
}
#tree .cap-1 {	left: 0;
}
#tree .cap-2 {	left: 30px;
}
#tree .cap-3 {	left: 80px;
}
#tree .cap-4 {	left: 130px;
}
#tree .cap-5 {	left: 180px;
}
#tree .end {	width: 20px;	height: 10px;
}
#tree #trunk {	width: 40px;	height: 60px;	top: 238px;	left: 50%;	margin-left: -20px;	background: #ff4e00;	-webkit-border-radius: 2px;	-moz-border-radius: 2px;	-ms-border-radius: 2px;	-o-border-radius: 2px;	border-radius: 2px;
}
Logo for Sensyu-kai (1971) - Script Codes
Logo for Sensyu-kai (1971) - Script Codes
Home Page Home
Developer Niels Oeltjen
Username NielsOeltjen
Uploaded September 08, 2022
Rating 3.5
Size 2,299 Kb
Views 26,312
Do you need developer help for Logo for Sensyu-kai (1971)?

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!

Niels Oeltjen (NielsOeltjen) Script Codes
Name
Animated css matrix type
Loading animation
Nice outline hover effect
Button toggle box
Prototype for a menu pattern
Simple spinner
CSS only audio player UI
Prose.io repo icon
Multiple SVG icons in one file
Expanding text links
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!