Last active
January 7, 2022 04:24
-
-
Save yoursamlan/451723d22a14f25e0d310849b909c518 to your computer and use it in GitHub Desktop.
Please modify the field accordingly. Also, here, the dark theme has been selected. If you want to use the light theme, please uncomment the theme and comment the dark one. Thank you..
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Front Template */ | |
<div class="card"> | |
<div class="front"> | |
<h2 id="word"> | |
{{Word}} | |
</h2> | |
</div> | |
/* Back Template */ | |
{{FrontSide}} | |
<div class="card-main"> | |
<div id="meaning"> | |
<div id="pos">{{Parts of Speech}}</div> | |
<div id="beng"> | |
{{Bengali Meaning}} | |
</div> | |
{{Definition}} | |
</div> | |
<div id="synonym"> | |
{{Synonym}} | |
</div> | |
<div id="example"> | |
<div id="pic">{{Image}}</div> | |
<div id="sentence"> | |
{{Example}} | |
</div> | |
</div> | |
</div> | |
/* Styling */ | |
/* | |
============================= | |
THEME : LIGHT | |
============================= | |
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap"); | |
.card { | |
border-radius: 30px; | |
background: #dddddd; | |
color: #000; | |
padding: 30px; | |
font-family: "Source Serif Pro"; | |
font-size: 18px; | |
max-width: 800px; | |
margin: auto; | |
} | |
#word { | |
padding: 20px; | |
padding-left: 50px; | |
color: #4444ff; | |
font-size: 40px; | |
border-radius: 15px; | |
background: #dddddd; | |
box-shadow: 6px 6px 13px #bcbcbc, -6px -6px 13px #fefefe; | |
} | |
.card-main { | |
padding: 0px 20px 20px 20px; | |
} | |
#meaning { | |
color: #ff6645; | |
font-size: 24px; | |
padding: 20px 40px; | |
border-radius: 15px; | |
background: #dddddd; | |
box-shadow: 6px 6px 13px #bcbcbc, -6px -6px 13px #fefefe; | |
} | |
#beng { | |
color: #2200ff; | |
line-height: 30px; | |
font-size: 20px; | |
} | |
#pos { | |
color: #000; | |
font-size: 18px; | |
padding-bottom: 10px; | |
float: right; | |
font-style: italic; | |
} | |
#synonym { | |
padding: 20px; | |
margin: 20px 0; | |
padding-left: 40px; | |
color: #222; | |
font-size: 20px; | |
border-radius: 15px; | |
border-radius: 15px; | |
background: #dddddd; | |
box-shadow: 6px 6px 13px #bcbcbc, -6px -6px 13px #fefefe; | |
} | |
#example { | |
padding: 20px; | |
color: #111; | |
font-size: 20px; | |
border-radius: 15px; | |
background: #dddddd; | |
box-shadow: 6px 6px 13px #bcbcbc, -6px -6px 13px #fefefe; | |
display: inline-flex | |
} | |
#pic img { | |
border-radius: 15px; | |
max-width: 40vw; | |
} | |
#sentence { | |
padding: 0 5vw; | |
} | |
*/ | |
/* | |
============================= | |
THEME : DARK | |
============================= | |
*/ | |
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap"); | |
.card { | |
border-radius: 20px; | |
background: #333333; | |
color: #fff; | |
padding: 20px; | |
font-family: "Source Serif Pro"; | |
font-size: 16px; | |
max-width: 900px; | |
margin: auto; | |
} | |
#word { | |
padding: 10px; | |
padding-left: 40px; | |
color: #99ddff; | |
font-size: 30px; | |
border-radius: 15px; | |
background: #333333; | |
box-shadow: 6px 6px 13px #292929, -6px -6px 13px #3d3d3d; | |
} | |
.card-main { | |
padding: 0px 10px 10px 10px; | |
} | |
#meaning { | |
color: #f0dda8; | |
font-size: 18px; | |
padding: 10px 40px; | |
border-radius: 15px; | |
background: #333333; | |
box-shadow: 6px 6px 13px #2b2b2b, -6px -6px 13px #3b3b3b; | |
} | |
#beng { | |
color: #be8fff; | |
line-height: 25px; | |
font-size: 16px; | |
} | |
#pos { | |
color: #fff; | |
font-size: 16px; | |
float: right; | |
font-style: italic; | |
} | |
#synonym { | |
padding: 10px; | |
margin: 20px 0; | |
padding-left: 40px; | |
color: #99ddff; | |
font-size: 16px; | |
border-radius: 15px; | |
background: #333333; | |
box-shadow: 6px 6px 13px #292929, -6px -6px 13px #3d3d3d; | |
font-style: italic; | |
} | |
#example { | |
padding: 10px; | |
color: #eee; | |
font-size: 16px; | |
border-radius: 15px; | |
background: #333333; | |
box-shadow: 6px 6px 13px #292929, -6px -6px 13px #3d3d3d; | |
display: flex; | |
} | |
#pic img { | |
border-radius: 15px; | |
max-width: 40vw; | |
} | |
#sentence { | |
padding: 10px 2vw; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment