Skip to content

Update index.html #10

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
a-naboulsi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #10

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
33 changes: 19 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>A Bootstrap Website</title>
<title>Abdessamad Naboulsi</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">


</head>
<body>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#!">Your Name Here</a>
<a class="navbar-brand" href="#!">Abdessamad Naboulsi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
Expand All @@ -28,27 +28,32 @@
</div>
</nav>
<!-- Header - set the background image for the header in the line below-->
<header class="py-1 bg-image-full" style="background-image: url('https://t4.ftcdn.net/jpg/03/61/82/93/360_F_361829357_WuN8yt1I8PEYSnx8P6IvfYLlRZZWW2ts.jpg')">
<header class="py-1 bg-image-full" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/01cebbdf-9f53-4843-bb20-7a24068976be/d76plem-86cc7521-a0b8-402a-9958-0c5934fd3c29.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzAxY2ViYmRmLTlmNTMtNDg0My1iYjIwLTdhMjQwNjg5NzZiZVwvZDc2cGxlbS04NmNjNzUyMS1hMGI4LTQwMmEtOTk1OC0wYzU5MzRmZDNjMjkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.jbuV5w_Ui-8SHNsmnSyBZuFTL5_bOa0UFQ6esxi36Ro')">
<div class="text-center my-1">
<img class="img-fluid rounded-circle mb-4" src="https://newmediarockstars.com/wp-content/uploads/2014/07/femcat.png" alt="..." />
<h1 class="text-white fs-3 fw-bolder">My First Website</h1>
<p class="text-white-50 mb-0">Using Bootstrap Templates</p>
<img class="img-fluid rounded-circle mb-4" src="https://media.vandal.net/m/22607/batman-arkham-origins-2013112514424_1.jpg" alt="..." />
<h1 class="text-white fs-3 fw-bolder">Justice League</h1>
<p class="text-white-50 mb-0">Superman, Batman, Wonder Woman, Aquaman, The Flash, Cyborg</p>
</div>
</header>
<!-- Content section-->
<section class="py-5">
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2>Bootstrap Makes Things Simple</h2>
<p class="lead">Who would've thought CSS could be so easy!</p>
<p class="mb-0">The universe is almost 14 billion years old, and, wow! I wish humans would've invented Bootstrap earlier! </p>
<h2>Justice League</h2>
<p class="lead">Who are they???</p>
<p class="mb-0">The Justice League is a team of superheroes appearing in American comic books published by DC Comics. The team first appeared in The Brave and the Bold #28 (March 1960). The team was conceived by writer Gardner Fox as a revival of the Justice Society of America, a similar team from DC Comics from the 1940s which had been pulled out of print due to a decline in sales.

The Justice League is an all-star ensemble cast of established superhero characters from DC Comics' portfolio. Diegetically, these superheroes usually operate independently but occasionally assemble as a team to tackle especially formidable villains. This is in contrast to certain other superhero teams such as the X-Men, whose characters were created specifically to be part of the team, with the team being central to their identity. The cast of the Justice League usually features a few highly popular characters who have their own solo books, such as Superman, Batman and Wonder Woman alongside a number of lesser-known characters who benefit from exposure.[1] The Justice League was created to boost the profiles and sales of said characters through cross-promotion and helped develop the DC Universe as a shared universe, as it is through teams like the Justice League that the setting's characters regularly interact with each other.[2]

Beyond comic books, the Justice League has been adapted to a number of television shows, films, and video games included. </p>
</div>
</div>
</div>
</section>
<!-- Image element - set the background image for the header in the line below-->
<div class="py-1 bg-image-full" style="background-image: url('https://t4.ftcdn.net/jpg/03/61/82/93/360_F_361829336_GWe1wR8L92MnIKcCIyrwaZQp0rG36XJC.jpg')">
<div class="py-1 bg-image-full" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/01cebbdf-9f53-4843-bb20-7a24068976be/d76plem-86cc7521-a0b8-402a-9958-0c5934fd3c29.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzAxY2ViYmRmLTlmNTMtNDg0My1iYjIwLTdhMjQwNjg5NzZiZVwvZDc2cGxlbS04NmNjNzUyMS1hMGI4LTQwMmEtOTk1OC0wYzU5MzRmZDNjMjkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.jbuV5w_Ui-8SHNsmnSyBZuFTL5_bOa0UFQ6esxi36Ro')">

<!-- Put anything you want here! The spacer below with inline CSS is just for demo purposes!-->
<div style="height: 20rem"></div>
</div>
Expand All @@ -57,9 +62,9 @@ <h2>Bootstrap Makes Things Simple</h2>
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-6">
<h2>Bootstrap Has It ALL</h2>
<p class="lead">Did you know bootstrap can run on top of other front end frameworks like React?</p>
<p class="mb-0">I can't tell you how many people say they were turned off from Bootstrap because of all the classes. If they just gave it a chance, they would have the full capabilities of CSS in their hands.</p>
<h2>Villains</h2>
<p class="lead">The bad guys</p>
<p class="mb-0">The Legion of Doom was created for the Challenge of the Super Friends animated TV series as a villainous counterpart to the Justice League. In that original incarnation, it consisted of established villains associated with each of the Justice League's members; e.g., Lex Luthor for Superman, Gorilla Grodd for the Flash, and the Cheetah for Wonder Woman. The Legion of Doom, or some variant of it, has since appeared in other TV shows and comic books. </p>
</div>
</div>
</div>
Expand Down