Skip to content

Commit

Permalink
Merge pull request #12 from dropways/development
Browse files Browse the repository at this point in the history 
New Card UI HTML Added
  • Loading branch information
@dropways
dropways committed Jul 7, 2023
2 parents 1d6a6a1 + 3e0b934 commit 0df1839
Show file tree
Hide file tree
Showing 17 changed files with 1,647 additions and 568 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ We value your feedback and suggestions, as they help us improve our offerings an
| :--- |
| [![Card - 05](https://github-production-user-asset-6210df.s3.amazonaws.com/38377336/250366020-3b5969f2-e959-431a-88e6-de64776143ff.jpg)](https://dropways.github.io/card-ui/cards/card-05/)

<div align="center">
<h2><a href="https://dropways.github.io/card-ui/">✨✨ View More Cards ✨✨</a></h2>
</div>

## Browser Support

At present, we officially aim to support the last two versions of the following browsers:
Expand Down
249 changes: 124 additions & 125 deletions cards/card-03/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card UI - #03</title>
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon-16x16.png">
<meta name="theme-color" content="#FF3C78" />
<meta name="keywords" content="card-ui, card ui, Card UI templates, Bootstrap card designs,
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card UI - #03</title>
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon-16x16.png">
<meta name="theme-color" content="#FF3C78" />
<meta name="keywords" content="card-ui, card ui, Card UI templates, Bootstrap card designs,
Mobile-friendly card UI,
Minimalist card layouts,
Card UI frameworks,
Expand All @@ -29,93 +29,94 @@
Card UI kits,
Card design guidelines,
Card-based navigation">
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TCTGDWX');</script>
<!-- End Google Tag Manager -->
<meta property="og:type" content="website">
<meta property="og:title" content="Card UI - #03">
<meta property="og:description"
content="Experience the power of visually appealing and functional UI designs with our Card UI website. Start exploring our collection today and elevate your user interfaces to new heights.">
<meta property="og:image"
content="https://repository-images.githubusercontent.com/656710542/b401365c-a2b2-4699-b522-26b5ce0f9e90">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Card UI - #03">
<meta property="twitter:description"
content="Experience the power of visually appealing and functional UI designs with our Card UI website. Start exploring our collection today and elevate your user interfaces to new heights.">
<meta property="twitter:image"
content="https://repository-images.githubusercontent.com/656710542/b401365c-a2b2-4699-b522-26b5ce0f9e90">
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TCTGDWX');</script>
<!-- End Google Tag Manager -->
<meta property="og:type" content="website">
<meta property="og:title" content="Card UI - #03">
<meta property="og:description"
content="Experience the power of visually appealing and functional UI designs with our Card UI website. Start exploring our collection today and elevate your user interfaces to new heights.">
<meta property="og:image"
content="https://repository-images.githubusercontent.com/656710542/b401365c-a2b2-4699-b522-26b5ce0f9e90">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Card UI - #03">
<meta property="twitter:description"
content="Experience the power of visually appealing and functional UI designs with our Card UI website. Start exploring our collection today and elevate your user interfaces to new heights.">
<meta property="twitter:image"
content="https://repository-images.githubusercontent.com/656710542/b401365c-a2b2-4699-b522-26b5ce0f9e90">

<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=Inter:wght@400;500;600&family=Sen:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.22.0/tabler-icons.min.css" />
<link rel="stylesheet" href="../../assets/css/prism.css">
<link rel="stylesheet" href="../../assets/css/style.css">
<link rel="stylesheet" href="./card-3.css">
</head>
<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=Inter:wght@400;500;600&family=Sen:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.22.0/tabler-icons.min.css" />
<link rel="stylesheet" href="../../assets/css/style.css">
<link rel="stylesheet" href="./card-3.css">
</head>

<body x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TCTGDWX" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Header Start -->
<div class="layout-card-frame layout-card-frame--light">
<div class="layout-card-header">
<div class="container">
<div class="logo">
<a href="../../index.html">
<img src="../../assets/images/logo-icon.svg" alt="Card UI">
<span>Card UI</span>
</a>
</div>
<div class="cta-group">
<a href="../../index.html" class="btn btn-dark btn-icon">
<i class="ti ti-arrow-left"></i>
</a>
<a href="https://github.com/dropways/card-ui/tree/main/cards/card-03" target="_blank" class="btn btn-primary btn-icon-txt">
<i class="ti ti-code"></i> Get Code
</a>
</div>
<body x-data="{'isModalOpen': false}" x-on:keydown.escape="isModalOpen=false">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TCTGDWX" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Header Start -->
<div class="layout-card-frame layout-card-frame--light">
<div class="layout-card-header">
<div class="container">
<div class="logo">
<a href="../../index.html">
<img src="../../assets/images/logo-icon.svg" alt="Card UI">
<span>Card UI</span>
</a>
</div>
<div class="cta-group">
<a href="../../index.html" class="btn btn-dark btn-icon">
<i class="ti ti-arrow-left"></i>
</a>
<a href="https://github.com/dropways/card-ui/tree/main/cards/card-03" target="_blank"
class="btn btn-primary btn-icon-txt">
<i class="ti ti-code"></i> Get Code
</a>
</div>
</div>
<div class="layout-card-body">
<div class="layout-card-wrap">
<!-- Card HTML Start -->
<div class="card">
<div class="card__header">
<div class="card-badges">
<span class="badge badge--pink">Trends</span>
<span class="badge badge--blue">Design</span>
</div>
<div class="icon" x-data="{ open: false }">
<button class="like-btn" :class="open ? 'liked' : ''" x-on:click="open = ! open">
<i class="ti ti-heart"></i>
</button>
</div>
</div>
<div class="layout-card-body">
<div class="layout-card-wrap">
<!-- Card HTML Start -->
<div class="card">
<div class="card__header">
<div class="card-badges">
<span class="badge badge--pink">Trends</span>
<span class="badge badge--blue">Design</span>
</div>
<div class="card__body">
<div class="user-info">
<div class="avatar">
<div class="img-box">
<img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
width="60" height="60" alt="">
</div>
</div>
<div class="name">
<span>Frank Esteban</span>
Web Development
<div class="icon" x-data="{ open: false }">
<button class="like-btn" :class="open ? 'liked' : ''" x-on:click="open = ! open">
<i class="ti ti-heart"></i>
</button>
</div>
</div>
<div class="card__body">
<div class="user-info">
<div class="avatar">
<div class="img-box">
<img
src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
width="60" height="60" alt="">
</div>
<div class="user-dd">
<div x-data="{
</div>
<div class="name">
<span>Frank Esteban</span>
Web Development
</div>
<div class="user-dd">
<div x-data="{
open: false,
toggle() {
if (this.open) {
Expand All @@ -130,49 +131,47 @@
focusAfter && focusAfter.focus()
}
}" x-on:keydown.escape.prevent.stop="close($refs.button)"
x-on:focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown-button']"
class="dd">
<!-- Button -->
<button x-ref="button" x-on:click="toggle()" :aria-expanded="open"
:aria-controls="$id('dropdown-button')" type="button" class="dd__btn">
<i class="ti ti-dots-vertical"></i>
</button>
x-on:focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown-button']"
class="dd">
<!-- Button -->
<button x-ref="button" x-on:click="toggle()" :aria-expanded="open"
:aria-controls="$id('dropdown-button')" type="button" class="dd__btn">
<i class="ti ti-dots-vertical"></i>
</button>

<!-- Panel -->
<div x-ref="panel" x-show="open" x-transition.origin.top.left
x-on:click.outside="close($refs.button)" :id="$id('dropdown-button')" style="display: none;"
class="dd__menu">
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-user-shield"></i></span>
<span class="dd__item__txt">Account</span>
</a>
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-settings-cog"></i></span>
<span class="dd__item__txt">Settings</span>
</a>
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-logout"></i></span>
<span class="dd__item__txt">Logout</span>
</a>
</div>
<!-- Panel -->
<div x-ref="panel" x-show="open" x-transition.origin.top.left x-on:click.outside="close($refs.button)"
:id="$id('dropdown-button')" style="display: none;" class="dd__menu">
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-user-shield"></i></span>
<span class="dd__item__txt">Account</span>
</a>
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-settings-cog"></i></span>
<span class="dd__item__txt">Settings</span>
</a>
<a href="#" class="dd__item">
<span class="dd__item__icon"><i class="ti ti-logout"></i></span>
<span class="dd__item__txt">Logout</span>
</a>
</div>
</div>
</div>
<div class="title">Web Design templates Selection</div>
</div>
<div class="card__footer">
16 January 2017
</div>
<div class="title">Web Design templates Selection</div>
</div>
<div class="card__footer">
16 January 2017
</div>
<!-- Card HTML End -->
</div>
<!-- Card HTML End -->
</div>
</div>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="../../assets/js/alpinejs.min.js"></script>
<script async src="../../assets/js/prism.js"></script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script src="../../assets/js/alpinejs.min.js"></script>

</html>
Loading

0 comments on commit 0df1839

Please sign in to comment.