Skip to content
This repository has been archived by the owner on Nov 1, 2019. It is now read-only.

Commit

Permalink
Merge pull request #93 from itsaiub/fixing-carousel
Browse files Browse the repository at this point in the history 
fixed the index carousel
  • Loading branch information
Samir Jouni authored Oct 1, 2019
2 parents 78b54e6 + d026c88 commit 027d0a2
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 93 deletions.
89 changes: 49 additions & 40 deletions assets/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,44 @@ section#hero-content {
height: auto;
}

#carousel {
max-width: 70%;
min-height: 400px;
margin: 0 auto;
}

#carousel .slide img {
max-width: 100%;
}

#carousel .slide .container-main-image {
.carousel-item {
height: 80vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}

#carousel .slide .overlay {
.carousel-caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}

.tns-outer {
position: relative;
top: 50%;
transform: translateY(-20%);
}

.tns-controls button {
background: none;
border: none;
outline: none;
color: white;
font-weight: 300;
.carousel-caption h3,
.carousel-caption p {
color: #fff;
display: inline-block;
text-shadow: none;
margin-bottom: 20px;
}
.carousel-caption h3 {
background: rgba(0, 0, 0, 0.8);
padding: 35px 43px;
font-size: 4rem;
}
.tns-controls .left-arrow {
left: 10px;
}

.tns-controls .right-arrow {
right: 10px;
}

.tns-controls .left-arrow,
.tns-controls .right-arrow {
position: absolute;
top: 45%;
font-weight: 500;
text-transform: uppercase;
}
.carousel-caption p {
background: #ccc;
opacity: 0.9;
color: black;
padding: 10px 20px;
font-size: 1.5rem;
font-weight: 300;
}

.intro-div {
Expand Down Expand Up @@ -92,3 +83,21 @@ section#hero-content {
.centered .display-1{
font-size: 5rem;
}
@media (min-width: 320px) and (max-width: 1280px) {
.carousel-item {
height: 60vh;
}
.carousel-caption {
top: 30%;
transform: translateY(-30%);
}
.carousel-caption h3 {
padding: 35px 43px;
font-size: 2rem;
font-weight: 600;
}
.carousel-caption p {
font-size: 1.2rem
}

}
132 changes: 79 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,59 +108,85 @@
Arrows are pretty thick but that's what we get from font awesome free edition
::: -->
<div id="carousel">
<div class="slide">
<div class="container-main-image">
<img
src="https://source.unsplash.com/1600x900/?christmas"
alt="random unsplash image"
/>
<div class="overlay"></div>
<div class="centered">
<h1 class="display-1">Welcome to Santafied 🎅</h1>
</div>
</div>
</div>
<div class="slide">
<div class="container-main-image">
<img
src="https://source.unsplash.com/1600x900/?christmas gift"
alt="random unsplash image"
/>
<div class="overlay"></div>
<div class="centered">
<h1 class="display-1">Christmas Gifts 🎁</h1>
</div>
</div>
</div>
<div class="slide">
<div class="container-main-image">
<img
src="https://source.unsplash.com/1600x900/?christmas"
alt="random unsplash image"
/>
<div class="overlay"></div>
<div class="centered">
<h1 class="display-1">Christmas Movies 📽️</h1>
</div>
</div>
</div>

<div class="slide">
<div class="container-main-image">
<img
src="https://source.unsplash.com/1600x900/?christmas food"
alt="random unsplash image"
/>
<div class="overlay"></div>
<div class="centered">
<h1 class="display-1">Christmas Recipies 🍰</h1>
</div>
</div>

<p>slide 4</p>
</div>
</div>
<section id="hero-content">
<div>
<div id="carousel-indecator" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-indecator" data-slide-to="0" class="active"></li>
<li data-target="#carousel-indecator" data-slide-to="1"></li>
<li data-target="#carousel-indecator" data-slide-to="2"></li>
<li data-target="#carousel-indecator" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One -->
<div class="carousel-item active">
<img
src="https://images.unsplash.com/photo-1482638591678-a11589a805f2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt=""
/>
<div class="carousel-caption">
<h3>Welcome to Santafied 🎅</h3>
<p>
Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
dolor.
</p>
</div>
</div>
<!-- Slide Two -->
<div class="carousel-item">
<img
src="https://images.unsplash.com/photo-1450198342040-c32e6d1ef2e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
alt=""
/>
<div class="carousel-caption">
<h3>Christmas Gifts 🎁</h3>
<p>
Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
dolor.
</p>
</div>
</div>
<!-- Slide Three -->
<div class="carousel-item">
<img
src="https://images.unsplash.com/photo-1481223014211-199b3e8f0002?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=1920"
alt=""
/>
<div class="carousel-caption">
<h3>Christmas Movies 📽️</h3>
<p>
Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
dolor.
</p>
</div>
</div>
<!-- Slide Four -->
<div class="carousel-item">
<img
src="https://images.unsplash.com/photo-1451408446993-f6a39d2e667e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=80"
alt=""
/>
<div class="carousel-caption">
<h3>Christmas Recipies 🍰</h3>
<p>
Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
dolor.
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-indecator" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-indecator" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>

</section>
<!-- Page content -->
<section class="page-content">
Expand Down

0 comments on commit 027d0a2

Please sign in to comment.