Lesson 36

In this example below you will see how to do a Lesson 36 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ztonege, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ztonege ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Lesson 36</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div data-size="small" data-color="red">按鈕</div>
<div data-size="medium" data-color="green">按鈕</div>
<div data-size="large" data-color="blue">按鈕</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ztonege/lesson-36-vXpmbv */
@charset "UTF-8";
* {
  color: #DDD;
  font-family: 微軟正黑體;
}

body, html {
  background-color: #333;
}

div {
  padding: 20px;
  letter-spacing: 2px;
  border: solid 2px;
  border-radius: 10px;
  width: 150px;
  height: 50px;
  margin-top: 5px;
}
div::before {
  content: attr(data-size) " - ";
}
div::after {
  content: " (" attr(data-color) ")";
}

div[data-size=small] {
  width: 150px;
  height: 50px;
}

div[data-size=medium] {
  width: 250px;
  height: 70px;
}

div[data-size=large] {
  width: 350px;
  height: 90px;
}

div[data-color=red] {
  border-color: #C1292E;
}

div[data-color=green] {
  border-color: #06A77D;
}

div[data-color=blue] {
  border-color: #235789;
}

Comments