The Iron Triangle

Developer
Mitch Pruitt
Size
2,997 Kb
Views
22,264
  1. The Iron Triangle Previews
  2. The Iron Triangle HTML Codes
  3. The Iron Triangle CSS Codes

How do I make an the iron triangle?

You can't have all three.. What is a the iron triangle? How do you make a the iron triangle? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

The Iron Triangle Previews
IQ Test

The Iron Triangle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Iron Triangle</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=Montserrat);
header { font: 2em 'Montserrat', sans-serif; text-transform: uppercase; color: #cdcdcd; text-align: center; margin-top: .5em;
}
section { width: 50em; margin: 2em auto;
}
section .circle { margin: 0 auto; float: left; width: 8em; height: 8em; border-radius: 50%; text-align: center; line-height: 8em; font-family: 'Montserrat', sans-serif; font-size: 3em; color: white; transition: all ease .25s; cursor: pointer; -webkit-backface-visibility: hidden;
}
section .circle:hover { opacity: .2;
}
section .circle:first-child { float: none; margin: .5em auto -0.75em; background-color: rgba(199, 98, 87, 0.75);
}
section .circle:nth-child(2) { margin: -1.25em -1.25em auto 1em; background-color: rgba(117, 209, 122, 0.75);
}
section .circle:last-child { margin: -1.25em -1.25em auto auto; background-color: rgba(52, 157, 143, 0.75);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header>You can't have all three</header>
<section> <div class="circle">GOOD</div> <div class="circle">FAST</div> <div class="circle">CHEAP</div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

The Iron Triangle - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
header { font: 2em 'Montserrat', sans-serif; text-transform: uppercase; color: #cdcdcd; text-align: center; margin-top: .5em;
}
section { width: 50em; margin: 2em auto;
}
section .circle { margin: 0 auto; float: left; width: 8em; height: 8em; border-radius: 50%; text-align: center; line-height: 8em; font-family: 'Montserrat', sans-serif; font-size: 3em; color: white; transition: all ease .25s; cursor: pointer; -webkit-backface-visibility: hidden;
}
section .circle:hover { opacity: .2;
}
section .circle:first-child { float: none; margin: .5em auto -0.75em; background-color: rgba(199, 98, 87, 0.75);
}
section .circle:nth-child(2) { margin: -1.25em -1.25em auto 1em; background-color: rgba(117, 209, 122, 0.75);
}
section .circle:last-child { margin: -1.25em -1.25em auto auto; background-color: rgba(52, 157, 143, 0.75);
}
The Iron Triangle - Script Codes
The Iron Triangle - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3.5
Size 2,997 Kb
Views 22,264
Do you need developer help for The Iron Triangle?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
Contact Card Flip
Zoomy image rollover
Sample project gallery
Sooper cool article header image
Image caption overlay
Simple responsive drop-down menu
Off-screen navigation
Image header overlay
ASCII triangle image overlay
Flexbox-based responsive menu
Create amazing SEO content 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!