Ad

Tuesday, June 30, 2020

How to make Opening Hours Cards with HTML and CSS ?


Want to learn how to create a website with HTML  and CSS ?

 
You're in the place. In this guide, We display you all the steps to get from a blank display to a working internet site that's optimized and quite good-looking at the same time.
 

HTML Coding

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" type="text/css" href="/test.css">
  7.     <title>Opening Hours Cards With Html and CSS</title>
  8. </head>
  9. <body>
  10.     <div class="opening-hours-container">
  11.         <div class="left-col">
  12.             <div class="card">
  13.                 <div class="content">
  14.                     <i data-feather="calender"></i>
  15.                     <span> Monday - Friday </span>
  16.                 </div>
  17.                 <div class="content">
  18.                     <i data-feather="clock"></i>
  19.                     <span> 10:00 - 16:30 </span>
  20.                 </div>
  21.             </div>
  22.             <!-- <i>insert more .card here</i> -->
  23.             <div>
  24.                 <div class="right-col">
  25.                     <div class="card" id="smart-card" data-status="soon">
  26.                         <div class="content">
  27.                             <i data-feather="clock"></i>
  28.                             <span id="smart-status"> We'll close soon </span>
  29.                         </div>
  30.                     </div>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.         <script src="https://unpkg.com/feather-icons"></script>
  35.         <script> feather.replace() </script>
  36. </body>
  37. </html>
End of HTML Coding. Now We'll Start CSS Coding.

CSS Coding

  1. .opening-hours-container {
  2.     display: flex;
  3. }

  5. .right-col {
  6.     margin-left: 100px;
  7.     display: flex;
  8.     align-items: center;
  9. }

  11. /* you can change the data-status attribute to (soon | open | close) */
  12. .card#smart-card[data-status="soon"] {
  13.     background: #F2811E;
  14.     box-shadow: 0 12px 84px #d6ad88;
  15.     color: #fff;
  16. }

  18. .card#smart-card[data-status="open"] {
  19.     background: #lef28f;
  20.     box-shadow: 0 12px 84px #88d6b8;
  21.     color: #121212;
  22. }

  24. .card#smart-card[data-status="close"] {
  25.     background: #f21e41;
  26.     box-shadow: 0 12px 84px #d68892;
  27.     color: #fff;
  28. }

  30. .card {
  31.     min-width: 375px;

  33.     display: grid;
  34.     grid-template-columns: 250px auto;

  36.     padding: 32px;
  37.     border-radius: 8px;

  39.     font-family: 'Circular Std Book' , sans-serif;

  41.     color: #121212;
  42.     box-shadow: 0 12px 84px rgba(189, 196, 214, .5);

  44.     user-select: none;
  45. }

  47. .card#smart-card, .card#smart-card .content {
  48.     justify-content: center;
  49. }

  51. .card:not(:last-child) {
  52.     margin-bottom: 24px;
  53. }

  55. .card svg {
  56.     height: 24px;
  57. }

  59. .card .feather-calendar {
  60.     margin-top: -3px;
  61. }

  63. .card .content {
  64.     display: flex;
  65.     align-items: center;
  66. }

  68. .card .content span {
  69.     margin-left: 8px;
  70. }
Now CSS Coding is also complete. 

The last thing we have to do is to save and run the Code and get the output.
So guys run the code in your IDE's and you will get the following output.


Output Screen-shot of the above coding


Hope this article helps you. If you have any suggestion Drop it in Comment Section and Join Our Family by Clicking Subscribe Button and For More Article/Post Like this Join us on:-

Other Important Links:-


Oleh pada tanggal
Labels:

No comments:

Post a Comment

Please do not enter spam link in the comment box.

Subscribe to: Post Comments (Atom)