Domino's Logo using HTML & CSS3
Domino's Logo Using CSS
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domino's Logo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dominos">
<span class="d1"></span>
<span class="d2"></span>
</div>
<script src="codee.js"></script>
</body>
</html>
CSS Code(style.css)
body {
background-color: #333;
text-align: center;
}
.dominos {
background-color: #fff;
display: inline-block;
font-size: 0;
padding: 5px;
border-radius: 30px;
margin: 150px 20px 20px 20px;
transform: rotate(-45deg);
}
.d1 {
background-color: #0079ae;
width: 250px;
height: 250px;
position: relative;
display: inline-block;
margin: 10px 5px 10px 10px;
border-radius: 20px 0 0 20px;
}
span.d1:before {
content:"";
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #fff;
top: 30px;
left: 30px;
}
span.d1:after {
content:"";
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #fff;
bottom: 30px;
right: 30px;
}
.d2 {
background-color: #e31836;
width: 250px;
height: 250px;
position: relative;
display: inline-block;
margin: 10px 10px 10px 5px;
border-radius: 0 20px 20px 0;
}
span.d2:before {
content:"";
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #fff;
top: 70px;
left: 70px;
}
Best coding आपकी पोस्ट बहुत ही अच्छी लगी, एवं ऐसी पोस्ट को पब्लिश करना बहुत जरूरी है लोगों के लिए यह बहुत ही हेल्प करेगी। ऐसे लेखक को बहुत-बहुत धन्यवाद Very good information'all india world'jankari purn post this page'bataiye'ऐसी पोस्ट पढ़कर कुछ इनकम भी लोग कर सकते हैं'top job gyanऐसी पोस्टों को पढ़कर के हम वर्क कर सकते हैं'so work'internet per aisi post bahut hi housefull hoti hain'internet in india'
ReplyDeleteThanks
Delete