Skip to content

Commit 4af3b3e

Browse files
Kevin-SchowKevin-Schow
committed
css card hand
1 parent fca08f7 commit 4af3b3e

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎Javascript-Library/cardHand.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
2+
3+
body
4+
{
5+
padding: 0;
6+
margin: 0;
7+
background-color: #17141d;
8+
color: white;
9+
font-family: 'DM Mono', monospace;
10+
}
11+
.card-list
12+
{
13+
display: flex;
14+
padding: 3rem;
15+
overflow-x: scroll;
16+
}
17+
.card-list::-webkit-scrollbar
18+
{
19+
width: 10px;
20+
height: 10px;
21+
}
22+
.card-list::-webkit-scrollbar-thumb
23+
{
24+
background: #201c29;
25+
border-radius: 10px;
26+
box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25) inset -2px -2px 2px rgba(0,0,0,.25);
27+
}
28+
.card-list::-webkit-scrollbar-track
29+
{
30+
background: linear-gradient(90deg, #201c29, #201c29 1px, #17141d 0, #17141d);
31+
}
32+
.card
33+
{
34+
display: flex;
35+
position: relative;
36+
flex-direction: column;
37+
height: 350px;
38+
width: 400px;
39+
min-width: 250px;
40+
padding: 1.5rem;
41+
border-radius: 16px;
42+
background-color: #17141d;
43+
box-shadow: -1rem 0 3rem #000;
44+
transition: .2s;
45+
}
46+
.card:hover
47+
{
48+
transform: translateY(-1rem);
49+
}
50+
.card:hover~.card
51+
{
52+
transform: translateX(130px);
53+
}
54+
.card:not(:first-child)
55+
{
56+
margin-left:-130px;
57+
}
58+
.card-author
59+
{
60+
position: relative;
61+
display: grid;
62+
grid-template-columns: 75px 1fr;
63+
align-items: center;
64+
margin: 3rem 0 0;
65+
}
66+
.author-avatar img
67+
{
68+
width: 40px;
69+
height: 40px;
70+
border-radius: 50%;
71+
filter: grayscale(100%);
72+
display: block;
73+
overflow: hidden;
74+
margin: 16px 10px;
75+
}
76+
.half-circle
77+
{
78+
position: absolute;
79+
bottom: 0;
80+
left: 0;
81+
width: 60px;
82+
height: 48px;
83+
fill: none;
84+
stroke: #ff8a00;
85+
stroke-width: 8;
86+
stroke-linecap: round;
87+
pointer-events: none;
88+
}
89+
.author-name-prefix
90+
{
91+
font-style: normal;
92+
font-weight: 700;
93+
color:#7a7a8c;
94+
}

‎Javascript-Library/cardHand.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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+
<title>Card Hand</title>
7+
<link rel="stylesheet" href="cardHand.css">
8+
</head>
9+
<body>
10+
11+
<section class="card-list">
12+
<article class="card">
13+
<header class="card-header">
14+
<p> Dec 31st 2020</p>
15+
<h2> Card Tricks</h2>
16+
</header>
17+
<div class="card-author">
18+
<a class="author-avatar" href="#">
19+
<img src="C:\code\Code-Library\images\img1.png"/>
20+
</a>
21+
<svg class="half-circle" viewBox="0 0 106 57">
22+
<path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
23+
</svg>
24+
25+
<div class="author-name">
26+
<div class="author-name-prefix">Author</div>
27+
Kevin Schow
28+
</div>
29+
</div>
30+
</article>
31+
32+
<article class="card">
33+
<header class="card-header">
34+
<p> Dec 31st 2020</p>
35+
<h2> Card Tricks</h2>
36+
</header>
37+
<div class="card-author">
38+
<a class="author-avatar" href="#">
39+
<img src="C:\code\Code-Library\images\img1.png"/>
40+
</a>
41+
<svg class="half-circle" viewBox="0 0 106 57">
42+
<path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
43+
</svg>
44+
45+
<div class="author-name">
46+
<div class="author-name-prefix">Author</div>
47+
Kevin Schow
48+
</div>
49+
</div>
50+
</article>
51+
52+
<article class="card">
53+
<header class="card-header">
54+
<p> Dec 31st 2020</p>
55+
<h2> Card Tricks</h2>
56+
</header>
57+
<div class="card-author">
58+
<a class="author-avatar" href="#">
59+
<img src="C:\code\Code-Library\images\img1.png"/>
60+
</a>
61+
<svg class="half-circle" viewBox="0 0 106 57">
62+
<path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
63+
</svg>
64+
65+
<div class="author-name">
66+
<div class="author-name-prefix">Author</div>
67+
Kevin Schow
68+
</div>
69+
</div>
70+
</article>
71+
72+
73+
</section>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)