Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CSS] Normalize display #28

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[CSS] Normalize display #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fbef28f
👀 added Enigmo slug
Oct 2, 2020
00aa11a
normalize card css
Oct 2, 2020
1245265
normalize display
Oct 2, 2020
71b8dba
Merge branch 'master' into normalize-display
Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html {
height: 100vh;
padding: 20%;
}

.card-img-top {
padding: 2rem;
}
Expand Down Expand Up @@ -67,6 +68,10 @@ body {
margin-bottom: 4%;
}

.fSize3 {
font-size: 0.5rem;
}

@media only screen and (max-width: 600px) {
.display-3 {
font-size: 4rem;
Expand All @@ -80,4 +85,11 @@ body {
.navTitle {
padding-left: 3px;
}

}

@media only screen and (min-width: 1024px) {
.img_container {
height: 370px;
}
}
141 changes: 100 additions & 41 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@
</div>
</nav>
<section id="header" class="jumbotron text-center">
<div class="theme">
<div class="header-content">

<div class="theme">
<div class="header-content">

<a href="#gallery-title"><i class="fas fa-chevron-down fa-6x gallery-icon"></i></a>
</div>

<a href="#gallery-title"><i class="fas fa-chevron-down fa-6x gallery-icon"></i></a>
</div>
</div>
</section>

<div id="gallery-title"></div>
Expand Down Expand Up @@ -283,62 +283,122 @@ <h5 class="card-title">Joo-Joo</h5>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://i.pinimg.com/564x/74/17/5e/74175ecc4efb253b31d718d387939c60.jpg" alt="">
<div class="card-body">
<h5 class="card-title">Babosa Trilladora</h5>
<p class="card-text"> Geoshards are Slugs that attack through crystallization. They are mainly yellow, with a light green back, covered in pastel green crystals. Upon hitting 100 mph, it becomes a larger, more vicious-looking version of itself. It's able to create a projectile that crystallizes the target on contact.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
</div>
<div class="img_container">
<img class="card-img-top" src="https://i.pinimg.com/564x/74/17/5e/74175ecc4efb253b31d718d387939c60.jpg"
alt="Babosa_Trilladora">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Babosa Trilladora</h5>
<p class="card-text"> Geoshards are Slugs that attack through crystallization. They are mainly yellow,
with a light green back, covered in pastel green crystals. Upon hitting 100 mph, it becomes a larger,
more vicious-looking version of itself. It's able to create a projectile that crystallizes the target on
contact.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://vignette.wikia.nocookie.net/slugterra/images/5/50/Air_Elemental_Slug_Protoform.png/revision/latest/scale-to-width-down/310?cb=20160602020155" alt="">
<div class="card-body">
<h5 class="card-title">Air Elemental</h5>
<p class="card-text">The Air Elemental is a small grey slug with a heap of pointed spikes on her head. Also on her head is one small silver spike. She has flying membranes under her arms, giving her the power of flying in protoform.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
</div>
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/5/50/Air_Elemental_Slug_Protoform.png/revision/latest/scale-to-width-down/310?cb=20160602020155"
alt="Air_Elemental">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Air Elemental</h5>
<p class="card-text">The Air Elemental is a small grey slug with a heap of pointed spikes on her head.
Also on her head is one small silver spike. She has flying membranes under her arms, giving her the
power of flying in protoform.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://vignette.wikia.nocookie.net/slugterra/images/c/cd/ST_SG_SLUGS_BlastipedeProto.png/revision/latest/scale-to-width-down/310?cb=20131221222125" alt="">
<div class="card-body">
<h5 class="card-title">Blastipede</h5>
<p class="card-text">Blastipede Slugs is an Uncommon Fire Element Slug. It was first seen in Bandoleer of Brothers when Rookie joins Eli's Slug Arsenal and learns he can shoot blue detonators that can blow things up.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
</div>
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/c/cd/ST_SG_SLUGS_BlastipedeProto.png/revision/latest/scale-to-width-down/310?cb=20131221222125"
alt="Blastipede">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Blastipede</h5>
<p class="card-text">Blastipede Slugs is an Uncommon Fire Element Slug. It was first seen in Bandoleer of
Brothers when Rookie joins Eli's Slug Arsenal and learns he can shoot blue detonators that can blow
things up.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://vignette.wikia.nocookie.net/slugterra/images/1/14/Crystalyd1.png/revision/latest/scale-to-width-down/310?cb=20150330194504" alt="">
<div class="card-body">
<h5 class="card-title">Crystalyds</h5>
<p class="card-text">Crystalyds, better known as "Tunneler Slugs", are extremely rare and powerful Digger Slugs, that can be found burrowed deep beneath SlugTerra's surface and only surface every hundred years, earning them the spot as Ultra Rare Earth slugs.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
</div>
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/1/14/Crystalyd1.png/revision/latest/scale-to-width-down/310?cb=20150330194504"
alt="Crystalyds">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Crystalyds</h5>
<p class="card-text">Crystalyds, better known as "Tunneler Slugs", are extremely rare and powerful Digger
Slugs, that can be found burrowed deep beneath SlugTerra's surface and only surface every hundred years,
earning them the spot as Ultra Rare Earth slugs.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://vignette.wikia.nocookie.net/slugterra/images/7/76/Opening_Flaringo.png/revision/latest/scale-to-width-down/310?cb=20130428013328" alt="">
<div class="card-body">
<h5 class="card-title">Flaringos</h5>
<p class="card-text">Flaringos are common fire element slugs coloured in red and white. Flaringos are somewhat similar to Infurnus Slugs. At 100mph, they gain a similar appearance to that of a bass (a type of fish). These are common Slugs who are used by many slingers as repetitive artillery.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
</div>
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/7/76/Opening_Flaringo.png/revision/latest/scale-to-width-down/310?cb=20130428013328"
alt="Flaringos">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Flaringos</h5>
<p class="card-text">Flaringos are common fire element slugs coloured in red and white. Flaringos are
somewhat similar to Infurnus Slugs. At 100mph, they gain a similar appearance to that of a bass (a type
of fish). These are common Slugs who are used by many slingers as repetitive artillery.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="https://vignette.wikia.nocookie.net/slugterra/images/f/f8/Diggrix_Protoform.png/revision/latest/scale-to-width-down/310?cb=20131221194200" alt="">
<div class="card-body">
<h5 class="card-title">Diggrix</h5>
<p class="card-text">Diggrixs are common digging slugs that can be found in grassy knolls.A Famous Diggrix is Rex who belongs to Eli Shane.A ghouled Diggrix is called a Terrarix.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm">Contributed by - Aishwarya Gupta</a>
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/f/f8/Diggrix_Protoform.png/revision/latest/scale-to-width-down/310?cb=20131221194200"
alt="Diggrix">
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Diggrix</h5>
<p class="card-text">Diggrixs are common digging slugs that can be found in grassy knolls.A Famous Diggrix
is Rex who belongs to Eli Shane.A ghouled Diggrix is called a Terrarix.</p>
<a href="https://github.com/gaishhwarya" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed
by - Aishwarya Gupta</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<div class="img_container">
<img class="card-img-top"
src="https://vignette.wikia.nocookie.net/slugterra/images/6/68/Enigmo%282%29.png/revision/latest?cb=20170613203758"
alt="Enigmo">
</div>
<div class="card-body">
<h5 class="card-title">Enigmo</h5>
<p class="card-text">Enigmo is an endangered, ultra rare, species of Slug with a pair of vertically
stacked eyes. These slugs are so rare
that they were considered a legend. At Velocity, it transforms into an Aztec-like creature that causes
blurred
double-vision in whoever it hits.</p>
<a href="https://github.com/vlad412" class="btn btn-outline-danger btn-sm mt-auto fSize3">Contributed by -
Vlad412</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
Expand All @@ -352,7 +412,6 @@ <h5 class="card-title">Crystalyd</h5>
</div>
</div>
</div>

</div>
</section>
<footer>
Expand Down