HTML
<!DOCTYPE html>
<html>
<head>
<title>Do-me CSS exercise</title>
<meta charset="utf8" />
<link href='http://fonts.googleapis.com/css?family=Combo&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" /></style>
</head>
<body>
<div class="bald happy fat face">
<div class="eyes">
<div class="rog"></div>
<div class="rog"></div>
<div class="eye">
<div class="apple">
</div>
</div>
<div class="eye">
<div class="apple">
</div></div>
</div>
<div class="smile"></div>
<div class="bowtie"></div>
</div>
</body>
</html>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.bald.happy.fat.face{width:350px;height: 350px;background-color: #D7DADB;border-radius: 200px;position:relative;margin: 120px auto;}.eye{width:50px;height: 50px;background-color: white;border-radius: 25px;display: inline-table;margin-top:80px;margin-left: 20px;margin-right: 20px;padding: 10px;}.apple{width:20px;height: 30px;background-color: black;border-radius: 15px;display: inline-table;margin-top:5px;margin-left: 5px;margin-right: 5px;padding: 5px;}.bowtie{width: 0px;height: 0px;margin: 0 auto;background: transparent;border-top: 50px solid #111;border-left: 80px solid #2C3E50;border-bottom: 50px solid #111;border-right: 80px solid #2C3E50;border-top-color: transparent;border-bottom-color: transparent;position:absolute; bottom:-40px; right: 95px;}.smile{height:150px;width:150px;border-bottom:30px solid #FC4349;border-left:0px solid #FC4349;border-right:0px solid #FC4349;display: inline-block;border-radius: 210px;}.rog{width: 0px;height: 0px;margin: 0 auto;background: transparent;border-top: 70px solid #6DBCDB;border-left: 100px solid #6DBCDB;border-bottom: 70px solid #111;border-right: 100px solid #111;border-top-color: transparent;border-bottom-color: transparent;border-right-color: transparent;position:absolute; top:-60px; right: 45px;-webkit-transform:rotate(20deg);}
Brak komentarzy:
Prześlij komentarz