8000 Add hover effect to cards. Limit container width. Refs #48 · codezoned/codezoned.com@b027d2d · GitHub
[go: up one dir, main page]
Skip to content

Commit b027d2d

Browse files
Ryuno-KiRyuno-Ki
committed
Add hover effect to cards. Limit container width. Refs #48 
1 parent b53ab7c commit b027d2d

File tree

2 files changed

+21
-15
lines changed

2 files changed

+21
-15
lines changed

‎index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<html class="">
1+
<html lang="en" class="">
22
<head>
33
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125870124-1"></script>
44
<script>
@@ -135,31 +135,31 @@ <h2 class="partner-head" style="color: white;">Our Amazing Partners:</h2>
135135
<h1 class="projects-head">Some of our Opensource projects:</h1>
136136

137137
<div class="card-container">
138-
<div class="card" style="">
138+
<div class="card">
139139
<p class="card-title">ScriptsDump</p>
140140
<p class="project-info">ScriptsDump is a complete repository of all kind of scripts we and you can think of.</p>
141141
<div class="button-box-container">
142142
<a href="#" class="button-box">Check It Out!</a>
143143
</div>
144144

145145
</div>
146-
<div class="card" style="">
146+
<div class="card">
147147
<p class="card-title">RIG</p>
148148
<p class="project-info">RIG (Randomized ID Generator) is an app to generate IDs and badges for any event or meetup!</p>
149149
<div class="button-box-container">
150150
<a href="#" class="button-box">Check It Out!</a>
151151
</div>
152152

153153
</div>
154-
<div class="card" style="">
154+
<div class="card">
155155
<p class="card-title">BlogCast</p>
156156
<p class="project-info">BlogCast is a 100% Opensource blogging App/Platform.</p>
157157
<div class="button-box-container">
158158
<a href="#" class="button-box">Check It Out!</a>
159159
</div>
160160

161161
</div>
162-
<!-- <div class="card" style="">
162+
<!-- <div class="card">
163163
<p class="card-title">Project_name</p>
164164
<p class="project-info">about the project</p>
165165
<div class="" style="border-top: 2px solid #eeeeee; padding-top: 3%;">

‎static/css/style.css

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -507,11 +507,12 @@ a {
507507
/*===================================================== Projects =============================================================== */
508508

509509
.card-container {
510-
margin: 2%;
510+
max-width: 60%;
511+
margin: 2% auto;
511512
display: grid;
512513
grid-gap: 1rem;
513-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
514-
514+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
515+
grid-auto-rows: 1fr;
515516
}
516517
.card {
517518
display: flex;
@@ -522,7 +523,17 @@ a {
522523
/* card design */
523524
border-radius: 2px;
524525
border: solid 2px #eeeeee ;
525-
box-shadow: width:100%;height:100%;box-shadow: 1px 2px 3px #eeeeee inset;
526+
position: relative;
527+
width: 100%;
528+
height: 100%;
529+
box-shadow: 1px 2px 3px #eeeeee inset;
530+
}
531+
532+
.card:hover {
533+
transition: all 0.2s ease-out;
534+
box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
535+
top: -4px;
536+
border-color: #eeeeee;
526537
}
527538

528539
.card .card-title {
@@ -531,10 +542,6 @@ a {
531542
font-weight: bold;
532543
}
533544

534-
.project-info {
535-
536-
}
537-
538545
.card .button-box-container {
539546
border-top: 2px solid #eeeeee;
540547
padding-top: 5%;
@@ -569,9 +576,8 @@ a {
569576
.button-box:hover {
570577
background-color: #448aff;
571578
color: #f5f5f5;
572-
-webkit-transition: all 0.6s ease-in-out !important;;
579+
-webkit-transition: all 0.6s ease-in-out !important;
573580
}
574-
575581
/*=================================================== End Projects ============================================================= */
576582

577583

0 commit comments

Comments
 (0)
0