Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Olympics logo using HTML and CSS?
The given task in this article is to create an Olympics logo using only HTML and CSS.
The “Olympic logo” consists of five circles (with five different colors such as blue, black, red, yellow, and green) which are intertwined by equal dimensions. These five colored rings represent the five inhabited continents of the world. These are Africa, the Americas, Asia, Europe, and Oceania.
Setting up the Logo Container − We start by creating an <div> element with the class name Olympic-logo. This serves as the container for the Olympic symbol. We set its width, height, background color, position, and margin to achieve the desired layout.
Creating Individual Circles − Inside the logo container, we create five <div> elements with the class name circle. Each element represents one of the Olympic rings. We define their width, height, and border-radius to make them appear as perfect circles. The border color is set using classes such as .blue, .black, .red, .yellow, and .green, which apply different border colors to each circle.
Intertwining the Circles − To intertwine the rings, we use four additional <div> elements with the class name chain. These elements act as patches connecting the rings. We set their width, height, and position using CSS properties. The border color, border style, and border-width properties create the interlacing effect. The ::before pseudo-element is used to add circular shapes to the patches by setting its content, width, height, border, and border-radius properties.
Positioning the Rings and Patches − We use CSS positioning properties such as position: absolute to precisely position the circles and patches within the logo container. The top and left properties are adjusted for each element to achieve the correct placement.
Styling and Colors − We use the appropriate border colors for each circle to represent the Olympic rings. The blue, black, red, yellow, and green classes define the border color for their respective circles.
By following this approach and using the provided CSS properties, selectors, and HTML structure, the code creates an Olympic symbol with intertwined rings that resembles the original logo.
Example
The following example generates the Olympic symbol using the above approach −
<!DOCTYPE html>
<html>
<head>
<title>How to create Olympic symbol using HTML and CSS</title>
<style>
/* Common styling for the logo container */
.olympic-logo {
width: 380px;
height: 175px;
font-size: 10px;
background-color: white;
position: relative;
margin: 50px auto;
}
/* Individual circles */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
}
.blue {
border: 10px solid blue;
}
.black {
border: 10px solid black;
left: 130px;
}
.red {
border: 10px solid red;
left: 260px;
}
.yellow {
border: 10px solid yellow;
top: 55px;
left: 65px;
}
.green {
border: 10px solid green;
top: 55px;
left: 195px;
}
/* Intertwining the circles */
.chain {
width: 20px;
height: 20px;
position: absolute;
overflow: hidden;
border-color: transparent;
border-style: solid;
border-width: 50px 0 50px 100px;
}
.chain:before {
content: "";
width: 100px;
height: 100px;
position: absolute;
top: -50px;
left: -99.9px;
border: 10px solid;
border-radius: 50%;
}
.patch1:before {
border-color: blue;
}
.patch2 {
left: 130px;
}
.patch3 {
left: 130px;
transform: rotate(100deg);
}
.patch4 {
left: 260px;
transform: rotate(100deg);
}
.patch4:before {
border-color: red;
}
.patch5:before {
border-color: green;
}
</style>
</head>
<body>
<!-- Logo container -->
<div class="olympic-logo">
<!-- Circles -->
<div class="circle blue"></div>
<div class="circle black"></div>
<div class="circle red"></div>
<div class="circle yellow"></div>
<div class="circle green"></div>
<!-- Intertwining patches -->
<div class="chain patch1"></div>
<div class="chain patch2"></div>
<div class="chain patch3"></div>
<div class="chain patch4"></div>
</div>
</body>
</html>
357 Views
