Skip to content

image carousel added #9

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

Open
wants to merge 1 commit into
base: development
Choose a base branch
from
Open

image carousel added #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 17 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,23 @@ body {
margin-top: 10px;
}

/* CAROUSEL */

.cell{
width: 33%;
height: 250px;
margin: 0 15px;
overflow: hidden;
border-radius: 20px;
}

.cell img{
width: 100%;
height: 250px;
object-fit: cover;
cursor: pointer;
}

/* IMAGE */
.image-div {
background-repeat: space;
Expand Down
338 changes: 176 additions & 162 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,176 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>

<link
href="https://fonts.googleapis.com/css2?family=Cantora+One&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<title>Game Of Thrones - Blog</title>
</head>
<body>
<div class="body-div">
<!-- Header and Nav-->
<header>
<nav>
<div class="nav-div">
<ul class="nav-list">
<li class="left-item">Junaid Qureshi</li>
<li class="right-item">Blog</li>
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

</ul>
<hr class="nav-line" />
</div>
</nav>
</header>
<!-- // Header and Nav -->
<link href="https://fonts.googleapis.com/css2?family=Cantora+One&display=swap" rel="stylesheet" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Game Of Thrones - Blog</title>
</head>

<!-- Main -->
<main>
<div class="main-div">
<!-- IMAGE -->
<section>
<div class="image-div"></div>
</section>
<!-- // IMAGE -->
<body>
<div class="body-div">
<!-- Header and Nav-->
<header>
<nav>
<div class="nav-div">
<ul class="nav-list">
<li class="left-item">Junaid Qureshi</li>
<li class="right-item">Blog</li>

<!-- Main Text -->
<section>
<div class="text-div">
<h2 class="heading">Game of Thrones " Season One "</h2>
<p class="para">
The first season of the fantasy drama television series Game of
Thrones premiered on HBO on April 17, 2011, in the U.S. and
concluded on June 19, 2011. It consists of ten episodes, each of
approximately 55 minutes. The series is based on A Game of
Thrones, the first novel in the A Song of Ice and Fire series by
George R. R. Martin, adapted for television by David Benioff and
D. B. Weiss. HBO had ordered a television pilot in November
2008; filming began the following year. However, it was deemed
unsatisfactory and later reshot with some roles recast. In March
2010, HBO ordered the first season, which began filming in July
2010, primarily in Belfast, Northern Ireland, with additional
filming in Malta.</p>
<br /><br />
<div class="thumbnails">
<a href="images/thumbnail1.jpg" target="_blank"> <img src="/images/thumbnail1.jpg" alt="Ned Stark" title="Ned Stark"></a>
<a href="images/thumbnail2.jpg" target="_blank"> <img src="/images/thumbnail2.jpg" alt="All Heroes" title="All Heroes"></a>
<a href="images/thumbnail3.jpg" target="_blank"> <img src="/images/thumbnail3.jpg" alt="White Walker" title="White Walker"></a>
</ul>
<hr class="nav-line" />
</div>
</nav>
</header>
<!-- // Header and Nav -->

</div>
<br>
<p class="paraone">
<!-- Main -->
<main>
<div class="main-div">
<!-- IMAGE -->
<section>
<div class="image-div"></div>
</section>
<!-- // IMAGE -->

The story takes place in a fantasy world, primarily upon the
continent Westeros, with one storyline occurring on another
continent to the east, Essos. Like the novel, the season
initially focuses on the family of nobleman Eddard "Ned" Stark,
the Warden of the North, who is asked to become the King's Hand
(chief advisor) to his longtime friend, King Robert Baratheon.
Ned seeks to find out who murdered his predecessor, Jon Arryn.
He uncovers dark secrets about the powerful Lannister family,
which includes Robert's queen, Cersei, whom his predecessor died
trying to expose. This leads, after Robert's death, to Ned's
arrest for treason. Ned's eldest son, Robb, begins a rebellion
against the Lannisters. Ned is killed at the order of Cersei's
tyrannical teenage son, King Joffrey Baratheon. Meanwhile, in
Essos, the exiled Viserys Targaryen, son of the former king,
forces his sister Daenerys to marry a Dothraki warlord in
exchange for an army to pursue his claim to the Iron Throne. The
season ends with Viserys dead and Daenerys becoming the Mother
of Dragons.
<!-- Main Text -->
<section>
<div class="text-div">
<h2 class="heading">Game of Thrones " Season One "</h2>
<p class="para">
The first season of the fantasy drama television series Game of
Thrones premiered on HBO on April 17, 2011, in the U.S. and
concluded on June 19, 2011. It consists of ten episodes, each of
approximately 55 minutes. The series is based on A Game of
Thrones, the first novel in the A Song of Ice and Fire series by
George R. R. Martin, adapted for television by David Benioff and
D. B. Weiss. HBO had ordered a television pilot in November
2008; filming began the following year. However, it was deemed
unsatisfactory and later reshot with some roles recast. In March
2010, HBO ordered the first season, which began filming in July
2010, primarily in Belfast, Northern Ireland, with additional
filming in Malta.</p>
<br /><br />
<div class="thumbnails">
<div class="main-carousel">
<div class="cell"><a href="./images/thumbnail1.jpg" target="_blank"><img
src="./images/thumbnail1.jpg"></a></div>
<div class="cell"><a href="./images/thumbnail2.jpg" target="_blank"><img
src="./images/thumbnail2.jpg"></a></div>
<div class="cell"><a href="./images/thumbnail3.jpg" target="_blank"><img
src="./images/thumbnail3.jpg"></a></div>
<div class="cell"><a href="./images/thumbnail4.jpg" target="_blank"><img
src="./images/thumbnail4.jpg"></a></div>
<div class="cell"><a href="./images/thumbnail5.jpg" target="_blank"><img
src="./images/thumbnail5.jpg"></a></div>
<div class="cell"><a href="./images/thumbnail7.jpg" target="_blank"><img
src="./images/thumbnail7.jpg"></a></div>
</div>
</div>
<br>
<p class="paraone">

<br /><br />

Game of Thrones features a large ensemble cast, including
established actors such as Sean Bean, Mark Addy, Peter Dinklage,
Lena Headey, Nikolaj Coster-Waldau, Michelle Fairley, and Iain
Glen. Newer actors were cast as the younger generation of
characters, such as Emilia Clarke, Kit Harington, Sophie Turner,
and Maisie Williams.</p>
<br /><br />
<div class="thumbnails">
<a href="images/thumbnail4.jpg" target="_blank"> <img src="/images/thumbnail4.jpg" alt="Dragon" title="Dragon"></a>
<a href="images/thumbnail5.jpg" target="_blank"> <img src="/images/thumbnail5.jpg" alt="Tyrion Lannister" title="Tyrion Lannister"></a>
<a href="images/thumbnail6.jpg" target="_blank"> <img src="/images/thumbnail6.jpg" alt="Arya Stark" title="Arya Stark"></a>
<a href="images/thumbnail7.jpg" target="_blank"> <img src="/images/thumbnail7.jpg" alt="Jonn Snow" title="Jonn Snow"></a>
The story takes place in a fantasy world, primarily upon the
continent Westeros, with one storyline occurring on another
continent to the east, Essos. Like the novel, the season
initially focuses on the family of nobleman Eddard "Ned" Stark,
the Warden of the North, who is asked to become the King's Hand
(chief advisor) to his longtime friend, King Robert Baratheon.
Ned seeks to find out who murdered his predecessor, Jon Arryn.
He uncovers dark secrets about the powerful Lannister family,
which includes Robert's queen, Cersei, whom his predecessor died
trying to expose. This leads, after Robert's death, to Ned's
arrest for treason. Ned's eldest son, Robb, begins a rebellion
against the Lannisters. Ned is killed at the order of Cersei's
tyrannical teenage son, King Joffrey Baratheon. Meanwhile, in
Essos, the exiled Viserys Targaryen, son of the former king,
forces his sister Daenerys to marry a Dothraki warlord in
exchange for an army to pursue his claim to the Iron Throne. The
season ends with Viserys dead and Daenerys becoming the Mother
of Dragons.

<br /><br />

Game of Thrones features a large ensemble cast, including
established actors such as Sean Bean, Mark Addy, Peter Dinklage,
Lena Headey, Nikolaj Coster-Waldau, Michelle Fairley, and Iain
Glen. Newer actors were cast as the younger generation of
characters, such as Emilia Clarke, Kit Harington, Sophie Turner,
and Maisie Williams.
</p>
<br /><br />

<div class="thumbnails">
<a href="images/thumbnail4.jpg" target="_blank"> <img src="./images/thumbnail4.jpg" alt="Dragon"
title="Dragon"></a>
<a href="images/thumbnail5.jpg" target="_blank"> <img src="./images/thumbnail5.jpg" alt="Tyrion Lannister"
title="Tyrion Lannister"></a>
<a href="images/thumbnail6.jpg" target="_blank"> <img src="./images/thumbnail6.jpg" alt="Arya Stark"
title="Arya Stark"></a>
<a href="images/thumbnail7.jpg" target="_blank"> <img src="./images/thumbnail7.jpg" alt="Jonn Snow"
title="Jonn Snow"></a>

</div>
<p class="paratwo">
Critics praised the show's production values and cast;
Dinklage's portrayal of Tyrion Lannister received specific
accolades, as did Bean and Clarke, as well as Ramin Djawadi for
music.
<br /><br />
The first season won two of the thirteen Emmy Awards for which
it was nominated: Outstanding Supporting Actor in a Drama Series
(Dinklage) and Outstanding Main Title Design. It was also
nominated for Outstanding Drama Series. U.S. viewership rose by
approximately 33% over the course of the season, from 2.2
million to over 3 million by the finale.
</p>
</div>
</section>
<!-- // Main Text -->
</div>
</main>
<!-- // Main -->
<div class="wrapper-div"></div>
<!-- Footer -->
<footer>
<div class="footer">
<div class="footer-content">
<div class="footer-section about">
<h1 class="logo-text">
<span class="logo-span">J</span>unaid
<span class="logo-span">Q</span>ureshi
</h1>
<p class="footer-para">
I am a creative, Web Developer with command on Latest Tech
stacks
</p>
<div class="contact">
<span><i class="fas fa-phone"></i>&nbsp; +9231-33084869</span>
<span
><i class="fas fa-envelope"></i>&nbsp;
qjunaid623@gmail.com</span
>
</div>
<div class="socials">
<a
href="https://www.facebook.com/profile.php?id=100041078220896"
target="_blank"
><i class="fab fa-facebook"></i
></a>
<a
href="https://www.linkedin.com/in/junaid-qureshi-34a180194/"
target="_blank"
><i class="fab fa-linkedin"></i
></a>
<a href="https://twitter.com/Junaid084869/" target="_blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://github.com/developer-junaid/" target="_blank"
><i class="fab fa-github"></i
></a>
</div>
</div>


<p class="paratwo">
Critics praised the show's production values and cast;
Dinklage's portrayal of Tyrion Lannister received specific
accolades, as did Bean and Clarke, as well as Ramin Djawadi for
music.
<br /><br />
The first season won two of the thirteen Emmy Awards for which
it was nominated: Outstanding Supporting Actor in a Drama Series
(Dinklage) and Outstanding Main Title Design. It was also
nominated for Outstanding Drama Series. U.S. viewership rose by
approximately 33% over the course of the season, from 2.2
million to over 3 million by the finale.
</p>
</div>
<div class="footer-bottom">
&copy; | Designed By Junaid Qureshi
</section>
<!-- // Main Text -->
</div>
</main>
<!-- // Main -->
<div class="wrapper-div"></div>
<!-- Footer -->
<footer>
<div class="footer">
<div class="footer-content">
<div class="footer-section about">
<h1 class="logo-text">
<span class="logo-span">J</span>unaid
<span class="logo-span">Q</span>ureshi
</h1>
<p class="footer-para">
I am a creative, Web Developer with command on Latest Tech
stacks
</p>
<div class="contact">
<span><i class="fas fa-phone"></i>&nbsp; +9231-33084869</span>
<span><i class="fas fa-envelope"></i>&nbsp;
qjunaid623@gmail.com</span>
</div>
<div class="socials">
<a href="https://www.facebook.com/profile.php?id=100041078220896" target="_blank"><i
class="fab fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/junaid-qureshi-34a180194/" target="_blank"><i
class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/Junaid084869/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/developer-junaid/" target="_blank"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</footer>
<!-- // Footer -->
</div>
</body>
</html>
<div class="footer-bottom">
&copy; | Designed By Junaid Qureshi
</div>
</div>
</footer>
<!-- // Footer -->
</div>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script type="text/javascript">
$('.main-carousel').flickity({
// options
cellAlign: 'left',
wrapAround: true,
freeScroll: true,
});
</script>
</body>

</html>