{"id":1095,"date":"2023-03-30T20:50:59","date_gmt":"2023-03-30T17:50:59","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1095"},"modified":"2023-03-30T21:29:16","modified_gmt":"2023-03-30T18:29:16","slug":"cards-only-css","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1095\/","title":{"rendered":"Cards only HTML\/CSS"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"742\" style=\"aspect-ratio: 1141 \/ 742;\" width=\"1141\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-30_19-46-06.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.6.3\/css\/font-awesome.min.css&quot;&gt; \n\n  &lt;div class=&quot;row block&quot;&gt;\n    &lt;div class=&quot;example-1 card&quot;&gt;\n      &lt;div class=&quot;wrapper&quot;&gt;\n        &lt;div class=&quot;date&quot;&gt;\n          &lt;span class=&quot;day&quot;&gt;12&lt;\/span&gt;\n          &lt;span class=&quot;month&quot;&gt;Aug&lt;\/span&gt;\n          &lt;span class=&quot;year&quot;&gt;2016&lt;\/span&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;data&quot;&gt;\n          &lt;div class=&quot;content&quot;&gt;\n            &lt;span class=&quot;author&quot;&gt;Jane Doe&lt;\/span&gt;\n            &lt;h1 class=&quot;title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Boxing icon has the will for a couple more fights&lt;\/a&gt;&lt;\/h1&gt;\n            &lt;p class=&quot;text&quot;&gt;The highly anticipated world championship fight will take place at 10am and is the second major boxing blockbuster in the nation after 43 years.&lt;\/p&gt;\n            &lt;label for=&quot;show-menu&quot; class=&quot;menu-button&quot;&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/label&gt;\n          &lt;\/div&gt;\n          &lt;input type=&quot;checkbox&quot; id=&quot;show-menu&quot; \/&gt;\n          &lt;ul class=&quot;menu-content&quot;&gt;\n            &lt;li&gt;\n              &lt;a href=&quot;#&quot; class=&quot;fa fa-bookmark-o&quot;&gt;&lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;fa fa-heart-o&quot;&gt;&lt;span&gt;47&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;fa fa-comment-o&quot;&gt;&lt;span&gt;8&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;example-2 card&quot;&gt;\n      &lt;div class=&quot;wrapper&quot;&gt;\n        &lt;div class=&quot;header&quot;&gt;\n          &lt;div class=&quot;date&quot;&gt;\n            &lt;span class=&quot;day&quot;&gt;12&lt;\/span&gt;\n            &lt;span class=&quot;month&quot;&gt;Aug&lt;\/span&gt;\n            &lt;span class=&quot;year&quot;&gt;2016&lt;\/span&gt;\n          &lt;\/div&gt;\n          &lt;ul class=&quot;menu-content&quot;&gt;\n            &lt;li&gt;\n              &lt;a href=&quot;#&quot; class=&quot;fa fa-bookmark-o&quot;&gt;&lt;\/a&gt;\n            &lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;fa fa-heart-o&quot;&gt;&lt;span&gt;18&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;fa fa-comment-o&quot;&gt;&lt;span&gt;3&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;data&quot;&gt;\n          &lt;div class=&quot;content&quot;&gt;\n            &lt;span class=&quot;author&quot;&gt;Jane Doe&lt;\/span&gt;\n            &lt;h1 class=&quot;title&quot;&gt;&lt;a href=&quot;#&quot;&gt;Stranger Things: The sound of the Upside Down&lt;\/a&gt;&lt;\/h1&gt;\n            &lt;p class=&quot;text&quot;&gt;The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.&lt;\/p&gt;\n            &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Read more&lt;\/a&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@charset &quot;UTF-8&quot;;\n@import url(https:\/\/fonts.googleapis.com\/css?family=Open+Sans:300,400,700);\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-image: linear-gradient(to right, #034378, #2d4e68);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  height: 100vh;\n  font-family: &quot;Open Sans&quot;, sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nh1 {\n  font-family: &quot;Open Sans&quot;, sans-serif;\n  font-weight: 300;\n}\n\n.row {\n  max-width: 900px;\n  margin: 50px auto 0;\n}\n\n.card {\n  float: left;\n  padding: 0 1.7rem;\n  width: 50%;\n}\n.card .menu-content {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n.card .menu-content::before, .card .menu-content::after {\n  content: &quot;&quot;;\n  display: table;\n}\n.card .menu-content::after {\n  clear: both;\n}\n.card .menu-content li {\n  display: inline-block;\n}\n.card .menu-content a {\n  color: #fff;\n}\n.card .menu-content span {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  font-size: 10px;\n  font-weight: 700;\n  font-family: &quot;Open Sans&quot;;\n  transform: translate(-50%, 0);\n}\n.card .wrapper {\n  background-color: #fff;\n  min-height: 540px;\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);\n}\n.card .wrapper:hover .data {\n  transform: translateY(0);\n}\n.card .data {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  transform: translateY(calc(70px + 1em));\n  transition: transform 0.3s;\n}\n.card .data .content {\n  padding: 1em;\n  position: relative;\n  z-index: 1;\n}\n.card .author {\n  font-size: 12px;\n}\n.card .title {\n  margin-top: 10px;\n}\n.card .text {\n  height: 70px;\n  margin: 0;\n}\n.card input[type=checkbox] {\n  display: none;\n}\n.card input[type=checkbox]:checked + .menu-content {\n  transform: translateY(-60px);\n}\n\n.example-1 .wrapper {\n  background: url(https:\/\/images.unsplash.com\/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=cda12b505afa1beb06e49d89014cbd65&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80) 20% 1%\/cover no-repeat;\n}\n.example-1 .date {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: #77d7b9;\n  color: #fff;\n  padding: 0.8em;\n}\n.example-1 .date span {\n  display: block;\n  text-align: center;\n}\n.example-1 .date .day {\n  font-weight: 700;\n  font-size: 24px;\n  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);\n}\n.example-1 .date .month {\n  text-transform: uppercase;\n}\n.example-1 .date .month,\n.example-1 .date .year {\n  font-size: 12px;\n}\n.example-1 .content {\n  background-color: #fff;\n  box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);\n}\n.example-1 .title a {\n  color: gray;\n}\n.example-1 .menu-button {\n  position: absolute;\n  z-index: 999;\n  top: 16px;\n  right: 16px;\n  width: 25px;\n  text-align: center;\n  cursor: pointer;\n}\n.example-1 .menu-button span {\n  width: 5px;\n  height: 5px;\n  background-color: gray;\n  color: gray;\n  position: relative;\n  display: inline-block;\n  border-radius: 50%;\n}\n.example-1 .menu-button span::after, .example-1 .menu-button span::before {\n  content: &quot;&quot;;\n  display: block;\n  width: 5px;\n  height: 5px;\n  background-color: currentColor;\n  position: absolute;\n  border-radius: 50%;\n}\n.example-1 .menu-button span::before {\n  left: -10px;\n}\n.example-1 .menu-button span::after {\n  right: -10px;\n}\n.example-1 .menu-content {\n  text-align: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: -1;\n  transition: transform 0.3s;\n  transform: translateY(0);\n}\n.example-1 .menu-content li {\n  width: 33.333333%;\n  float: left;\n  background-color: #77d7b9;\n  height: 60px;\n  position: relative;\n}\n.example-1 .menu-content a {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 24px;\n}\n.example-1 .menu-content span {\n  top: -10px;\n}\n\n.example-2 .wrapper {\n  background: url(https:\/\/tvseriescritic.files.wordpress.com\/2016\/10\/stranger-things-bicycle-lights-children.jpg) center\/cover no-repeat;\n}\n.example-2 .wrapper:hover .menu-content span {\n  transform: translate(-50%, -10px);\n  opacity: 1;\n}\n.example-2 .header {\n  color: #fff;\n  padding: 1em;\n}\n.example-2 .header::before, .example-2 .header::after {\n  content: &quot;&quot;;\n  display: table;\n}\n.example-2 .header::after {\n  clear: both;\n}\n.example-2 .header .date {\n  float: left;\n  font-size: 12px;\n}\n.example-2 .menu-content {\n  float: right;\n}\n.example-2 .menu-content li {\n  margin: 0 5px;\n  position: relative;\n}\n.example-2 .menu-content span {\n  transition: all 0.3s;\n  opacity: 0;\n}\n.example-2 .data {\n  color: #fff;\n  transform: translateY(calc(70px + 4em));\n}\n.example-2 .title a {\n  color: #fff;\n}\n.example-2 .button {\n  display: block;\n  width: 100px;\n  margin: 2em auto 1em;\n  text-align: center;\n  font-size: 12px;\n  color: #fff;\n  line-height: 1;\n  position: relative;\n  font-weight: 700;\n}\n.example-2 .button::after {\n  content: &quot;\u2192&quot;;\n  opacity: 0;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translate(0, -50%);\n  transition: all 0.3s;\n}\n.example-2 .button:hover::after {\n  transform: translate(5px, -50%);\n  opacity: 1;\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cards only CSS <\/p>","protected":false},"author":1,"featured_media":1097,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[16],"class_list":["post-1095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1095"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1095\/revisions"}],"predecessor-version":[{"id":1099,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1095\/revisions\/1099"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1097"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}