Created
October 29, 2021 15:03
-
-
Save JosueMagnus12/3001ca352d433602742ef89fdc7fd90a to your computer and use it in GitHub Desktop.
Markup and Styles for a list and a table. Medium Article
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans:wght@500;700&display=swap" | |
| rel="stylesheet"> | |
| </head> | |
| <body> | |
| <h1 class="page-title">Responsive table</h1> | |
| <ul class="conversion-rate-list"> | |
| <li class="item"> | |
| <h2 class="platform">Facebook</h2> | |
| <dl class="ad"> | |
| <dt class="name">Leads</dt> | |
| <dd class="value">468</dd> | |
| <dt class="name">Sales</dt> | |
| <dd class="value">142</dd> | |
| <dt class="name">Conversion Rate</dt> | |
| <dd class="value">30.34%</dd> | |
| </dl> | |
| </li> | |
| <li class="item"> | |
| <h2 class="platform">Google</h2> | |
| <dl class="ad"> | |
| <dt class="name">Leads</dt> | |
| <dd class="value">327</dd> | |
| <dt class="name">Sales</dt> | |
| <dd class="value">199</dd> | |
| <dt class="name">Conversion Rate</dt> | |
| <dd class="value">60.85%</dd> | |
| </dl> | |
| </li> | |
| <li class="item"> | |
| <h2 class="platform">Instagram</h2> | |
| <dl class="ad"> | |
| <dt class="name">Leads</dt> | |
| <dd class="value">547</dd> | |
| <dt class="name">Sales</dt> | |
| <dd class="value">89</dd> | |
| <dt class="name">Conversion Rate</dt> | |
| <dd class="value">16.27%</dd> | |
| </dl> | |
| </li> | |
| <li class="item"> | |
| <h2 class="platform">Twitter</h2> | |
| <dl class="ad"> | |
| <dt class="name">Leads</dt> | |
| <dd class="value">149</dd> | |
| <dt class="name">Sales</dt> | |
| <dd class="value">27</dd> | |
| <dt class="name">Conversion Rate</dt> | |
| <dd class="value">18.12%</dd> | |
| </dl> | |
| </li> | |
| <li class="item"> | |
| <h2 class="platform">YouTube</h2> | |
| <dl class="ad"> | |
| <dt class="name">Leads</dt> | |
| <dd class="value">742</dd> | |
| <dt class="name">Sales</dt> | |
| <dd class="value">278</dd> | |
| <dt class="name">Conversion Rate</dt> | |
| <dd class="value">30.46%</dd> | |
| </dl> | |
| </li> | |
| </ul> | |
| <table class="conversion-rate-table"> | |
| <thead class="header-section"> | |
| <tr class="headers"> | |
| <th class="header" scope="col">Platform</th> | |
| <th class="header" scope="col">Leads</th> | |
| <th class="header" scope="col">Sales</th> | |
| <th class="header" scope="col">Conversion Rate</th> | |
| </tr> | |
| </thead> | |
| <tbody class="data-section"> | |
| <tr class="ad"> | |
| <td class="cell">Facebook</td> | |
| <td class="cell">468</td> | |
| <td class="cell">142</td> | |
| <td class="cell">30.34%</td> | |
| </tr> | |
| <tr class="ad"> | |
| <td class="cell">Google</td> | |
| <td class="cell">327</td> | |
| <td class="cell">199</td> | |
| <td class="cell">60.85%</td> | |
| </tr> | |
| <tr class="ad"> | |
| <td class="cell">Instagram</td> | |
| <td class="cell">547</td> | |
| <td class="cell">89</td> | |
| <td class="cell">16.27%</td> | |
| </tr> | |
| <tr class="ad"> | |
| <td class="cell">Twitter</td> | |
| <td class="cell">149</td> | |
| <td class="cell">27</td> | |
| <td class="cell">18.12%</td> | |
| </tr> | |
| <tr class="ad"> | |
| <td class="cell">YouTube</td> | |
| <td class="cell">742</td> | |
| <td class="cell">278</td> | |
| <td class="cell">37.46%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| font-size: 62.5%; | |
| --header-font: 'Open Sans'; | |
| --data-font: 'Lato'; | |
| --light-black: rgb(0 0 0 /.8); | |
| } | |
| .page-title { | |
| display: none; | |
| } | |
| /*LIST*/ | |
| .conversion-rate-list { | |
| width: 80%; | |
| margin: 50px auto; | |
| list-style: none; | |
| } | |
| .item { | |
| border: 1px solid var(--light-black); | |
| padding-bottom: 1.5em; | |
| border-radius: 6px; | |
| } | |
| .item + .item { | |
| margin-top: 5px; | |
| } | |
| .platform, | |
| .name { | |
| font-family: var(--header-font), sans-serif; | |
| font-size: 2.4rem; | |
| font-weight: 500; | |
| text-align: center; | |
| line-height: 1.75; | |
| } | |
| .platform { | |
| border-bottom: 1px solid var(--light-black); | |
| } | |
| .name { | |
| font-size: 1.8rem; | |
| } | |
| .value { | |
| font-family: var(--data-font), sans-serif; | |
| font-size: 1.6rem; | |
| text-align: center; | |
| line-height: 1.25; | |
| color: var(--light-black); | |
| } | |
| /*TABLE*/ | |
| .conversion-rate-table { | |
| display: none; | |
| width: min(80%, 900px); | |
| border: 1px solid var(--light-black); | |
| margin: 50px auto; | |
| border-radius: 6px; | |
| } | |
| .header { | |
| border-bottom: 1px solid var(--light-black); | |
| font-family: var(--header-font), sans-serif; | |
| font-size: 2.4rem; | |
| font-weight: 500; | |
| line-height: 1.75; | |
| } | |
| .cell { | |
| font-family: var(--data-font), sans-serif; | |
| font-size: 1.6rem; | |
| text-align: center; | |
| line-height: 1.5; | |
| } | |
| .header + .header, | |
| .cell + .cell { | |
| border-left: 1px solid var(--light-black); | |
| } | |
| @media (min-width: 600px) { | |
| .conversion-rate-list { | |
| display: none; | |
| } | |
| .conversion-rate-table { | |
| display: table; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice work!!!