From 43e3dcd1f70ab4933c361df9bb9e2635f6e34411 Mon Sep 17 00:00:00 2001 From: Zero to Mastery Date: Thu, 31 Aug 2023 12:20:39 +0000 Subject: [PATCH] (CI) format code --- Art/VaibhavSingh/index.html | 93 +++++++++------ Art/VaibhavSingh/style.css | 228 ++++++++++++++++++------------------ include.js | 2 +- 3 files changed, 171 insertions(+), 152 deletions(-) diff --git a/Art/VaibhavSingh/index.html b/Art/VaibhavSingh/index.html index f3e9eb9e..e603bda2 100644 --- a/Art/VaibhavSingh/index.html +++ b/Art/VaibhavSingh/index.html @@ -1,42 +1,63 @@ - - - - - + + + + + Document - - + +
-
-
- SatyapremKiKatha -
-
-

Satyaprem Ki Katha

-

2023 • Drama • 2h 24m

-
- - - - - - 4/5 -
-

- Satyaprem, a middle-class man, falls in love with Katha, a young woman who is overwhelmed by her breakup. - However, when he is asked to marry her, he tries hard to restore her faith in love and prove himself as a worthy person. -

-
-

Cast

-
    -
  • kartik
    • -
  • kiara
    • -
-
-
+
+
+ SatyapremKiKatha
+
+

Satyaprem Ki Katha

+

2023 • Drama • 2h 24m

+
+ + + + + + 4/5 +
+

+ Satyaprem, a middle-class man, falls in love with Katha, a young + woman who is overwhelmed by her breakup. However, when he is asked + to marry her, he tries hard to restore her faith in love and prove + himself as a worthy person. +

+
+

Cast

+
    +
  • + kartik +
    • +
  • + kiara +
    • +
+
+
+
- - \ No newline at end of file + + diff --git a/Art/VaibhavSingh/style.css b/Art/VaibhavSingh/style.css index 31b176b7..32eda5b3 100644 --- a/Art/VaibhavSingh/style.css +++ b/Art/VaibhavSingh/style.css @@ -1,155 +1,153 @@ @import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Oswald', sans-serif; -} - -body{ - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: rgb(177, 177, 177); -} - -.wrapper{ - position: relative; - width: 100%; - height: 100%; - padding: 20px; - display: flex; - align-content: center; - justify-content: center; -} - -.card{ - position: relative; - width: 400px; - height: 500px; - background: #000; - border-radius: 22px; - overflow: hidden; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8); -} - -.poster{ - position:relative; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.poster::before{ - content: ''; - position: absolute; - bottom: -45%; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - transition: .3s; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Oswald', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: rgb(177, 177, 177); +} + +.wrapper { + position: relative; + width: 100%; + height: 100%; + padding: 20px; + display: flex; + align-content: center; + justify-content: center; +} + +.card { + position: relative; + width: 400px; + height: 500px; + background: #000; + border-radius: 22px; + overflow: hidden; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8); +} + +.poster { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.poster::before { + content: ''; + position: absolute; + bottom: -45%; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + transition: 0.3s; } .card:hover .poster::before { - bottom: 0; + bottom: 0; } -.poster img{ - position: absolute; - top: 9; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - transition: .3s; +.poster img { + position: absolute; + top: 9; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: 0.3s; } -.card:hover .poster img{ - transform: scale(1.1); +.card:hover .poster img { + transform: scale(1.1); } -.details{ - position: absolute; - bottom: -100%; - left: 0; - width: 100%; - height: auto; - padding: 24px 24px 32px; - background: rgba(112, 112, 112, 0.667); - transition: 0.3s; - z-index: 2; - color: #fff; - border-radius: 22px; +.details { + position: absolute; + bottom: -100%; + left: 0; + width: 100%; + height: auto; + padding: 24px 24px 32px; + background: rgba(112, 112, 112, 0.667); + transition: 0.3s; + z-index: 2; + color: #fff; + border-radius: 22px; } -.card:hover .details{ - bottom: 0; +.card:hover .details { + bottom: 0; } -.details h1{ - font-size: 24px; - margin-bottom: 5px; - font-weight: 600; +.details h1 { + font-size: 24px; + margin-bottom: 5px; + font-weight: 600; } -.details h2{ - font-weight: 400; - font-size: 16px; - margin-bottom: 10px; - opacity: .8; +.details h2 { + font-weight: 400; + font-size: 16px; + margin-bottom: 10px; + opacity: 0.8; } -.details .rating{ - position: relative; - margin-bottom: 15px; - display: flex; - gap: 4px; +.details .rating { + position: relative; + margin-bottom: 15px; + display: flex; + gap: 4px; } -.rating i{ - color: gold; +.rating i { + color: gold; } .rating span { - margin-left: 0.25em; + margin-left: 0.25em; } .description { - color: #fff; - opacity: .8; - line-height: 1.5; - margin-bottom: 1em; + color: #fff; + opacity: 0.8; + line-height: 1.5; + margin-bottom: 1em; } .cast h3 { - margin-bottom: .5em; + margin-bottom: 0.5em; } .cast ul { - position: relative; - display: flex; - flex-wrap: wrap; - gap: 0.625rem; - width: 100%; + position: relative; + display: flex; + flex-wrap: wrap; + gap: 0.625rem; + width: 100%; } .details .cast ul li { - list-style: none; - width: 55px; - height: 55px; - border-radius: 50%; - overflow: hidden; - border: 1.5px solid #fff; + list-style: none; + width: 55px; + height: 55px; + border-radius: 50%; + overflow: hidden; + border: 1.5px solid #fff; } .details .cast ul li img { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } - - diff --git a/include.js b/include.js index 27954b8b..2085a937 100644 --- a/include.js +++ b/include.js @@ -171,7 +171,7 @@ let cards = [ { artName: 'Movie-Card', pageLink: './Art/VaibhavSingh/index.html', - imageLink : './Art/VaibhavSingh/movie-card.gif', + imageLink: './Art/VaibhavSingh/movie-card.gif', author: 'Vaibhav Singh', githubLink: 'https://github.com/v0nser' },