Card awaiting content

Developer
Kenan Yusuf
Size
4,012 Kb
Views
8,096
  1. Card awaiting content Previews
  2. Card awaiting content HTML Codes
  3. Card awaiting content CSS Codes
  4. Card awaiting content JS Codes

How do I make an card awaiting content?

What is a card awaiting content? How do you make a card awaiting content? This script and codes were developed by Kenan Yusuf on 06 December 2022, Tuesday.

Card awaiting content Previews
IQ Test

Card awaiting content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card awaiting content</title> <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400|Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card"> <div class="card__image"><img class="js-image" alt=""/></div> <div class="card__content"> <h1 class="card__heading js-heading"></h1> <p class="card__paragraph js-paragraph"></p> </div>
</div>
<div class="button-group"> <button class="button js-toggle">Toggle content</button>
</div> <script src="js/index.js"></script>
</body>
</html>

Card awaiting content - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; background: #e6e6e6; font-family: 'Source Sans Pro', sans-serif;
}
.card { width: 100%; max-width: 300px; min-height: 400px; margin: 10px; background: #fff; border-bottom: 1px solid #d8d8d8; box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
}
.card__image { position: relative; width: 100%; height: 0; padding-bottom: 60%; background: #d7692c; overflow: hidden;
}
.card__image:after { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,0.15), rgba(0,0,0,0)); transform: translateX(-100%); animation: loading 1.5s infinite;
}
.card__image img { position: relative; max-width: 100%; z-index: 1;
}
.card__content { padding: 20px;
}
.card__heading { margin-top: 0; margin-bottom: 10px; font-family: 'Alegreya Sans', sans-serif; font-weight: 400;
}
.card__heading:empty { width: 100%; height: 35px; background: #d8d8d8; margin-bottom: 20px;
}
.card__paragraph { margin: 0; font-size: 20px; line-height: 1.35;
}
.card__paragraph:empty { width: 90%; height: 20px; background: #d8d8d8;
}
.button { margin: 10px; padding: 15px 20px; background: #2aa1c0; border: 0; color: #fff;
}
.button:hover { background: #0e647d;
}
@-moz-keyframes loading { 100% { transform: translateX(100%); }
}
@-webkit-keyframes loading { 100% { transform: translateX(100%); }
}
@-o-keyframes loading { 100% { transform: translateX(100%); }
}
@keyframes loading { 100% { transform: translateX(100%); }
}

Card awaiting content - Script Codes JS Codes

'use strict';
var toggle = document.querySelector('.js-toggle'), image = document.querySelector('.js-image'), heading = document.querySelector('.js-heading'), paragraph = document.querySelector('.js-paragraph');
var content = false;
toggle.addEventListener('click', function () { if (content === false) { content = true; image.src = 'http://unsplash.it/400/400?image=564'; heading.innerHTML = 'Some heading'; paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa rerum porro aut laboriosam animi.'; } else { content = false; image.src = ''; heading.innerHTML = ''; paragraph.innerHTML = ''; }
});
Card awaiting content - Script Codes
Card awaiting content - Script Codes
Home Page Home
Developer Kenan Yusuf
Username KenanYusuf
Uploaded December 06, 2022
Rating 4.5
Size 4,012 Kb
Views 8,096
Do you need developer help for Card awaiting content?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenan Yusuf (KenanYusuf) Script Codes
Name
Kyusuf.com layout
Scalable Text Stylus Mixin
Styling visited links
Styling unvisited links
Material Weather Widget with Moment.js
EU Referendum Ballot Paper
Scrollable Navigation
Expanding box and fading content
Page layout experiment
Slick carousel with detached captions
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!