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

added an bootstrap navbar #17

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

added an bootstrap navbar #17

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
159 changes: 159 additions & 0 deletions Module 1 - HTML and CSS/Topic 15 - Navigation/Bootstrap Navbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@

<!DOCTYPE html>
<html>
<head>
<title>Batman</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body class="container">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="">
</a>
<nav>
<li><a href="#movies">Movies</a></li>
<li><a href="#identity">Secret Identity</a></li>
<li><a href="#villains">Villains</a></li>
</nav>
</div>
<div id="background_image">
<center>
<div id="content">
<h1>BATMAN</h1>
<h2>A silent guardian, a watchful protector. A dark knight.</h2>
</div>
</center>
</div>
<div>
<div>
<p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.</p>
<p>
Batman's secret identity is Bruce Wayne, an American billionaire, playboy, philanthropist, and owner of Wayne Enterprises. After witnessing the murder of his parents Thomas Wayne and Martha Wayne as a child, he swore revenge on criminals, an oath tempered by a sense of justice. Wayne trains himself physically and intellectually and crafts a bat-inspired persona to fight crime. Batman operates in the fictional Gotham City, with assistance from various supporting characters, including his butler Alfred, police commissioner Gordon, and vigilante allies such as Robin. Unlike most superheroes, Batman does not possess any superpowers; rather, he relies on his genius intellect, physical prowess, martial arts abilities, detective skills, science and technology, vast wealth, intimidation, and indomitable will. A large assortment of villains make up Batman's rogues gallery, including his archenemy, the Joker. </p>
</div>
<div class="list_box">
<div class="box">
<h2>Partnerships</h2>

<ol>
<li>Robin</li>
<li>Batgirl</li>
<li>James "Jim" Gordon</li>
<li>Green Arrow</li>
<li>Catwoman</li>
<li>Superman</li>
<li>Wonder Woman</li>
</ol>
</div>

<div class="box">
<h2>Abilities</h2>

<ul>
<li>Genius-level intellect</li>
<li>Peak human physical and mental conditioning</li>
<li>Expert martial artist and hand-to-hand combatant</li>
<li>Expert detective</li>
<li>Utilizes high-tech equipment and weapons</li>
</ul>
</div>
</div>

<div id="villains">
<h2>Batman villains</h2>
<table>
<tbody>
<tr><th>NAME </th> <th>FIRST APPEARANCE </th> <th>ABILITIES </th></tr>
<tr><td>Joker</td> <td>Batman #1 (April 1940)</td> <td>Criminal mastermind, expert chemist, utilizes weaponized props and toxins</td></tr>

<tr><td>Ra’s al Ghul</td> <td>Batman #232 (June 1971)</td> <td>Genius-level intellect, peak physical conditioning, superior strength and stamina, master martial artist and hand-to-hand combatant for centuries</td></tr>

<tr><td>Two face</td> <td>Detective Comics #66 (August 1942)</td> <td>Schizoid criminal mastermind obsessed with duality, extensive knowledge in law, experienced hand-to-hand combatant and detective</td></tr>

<tr><td>Bane</td> <td>Batman: Vengeance of Bane 1 (January 1993)</td> <td>Brilliant military strategist, trained mercenary, peak human physical conditioning, venom enhanced strength and durability</td></tr>

<tr><td>Black Mask</td> <td>Batman #386 (August 1985)</td> <td>Brilliant tactician and strategist, crime boss with powerful underworld connections, skilled marksman, advanced stamina and endurance</td></tr>
</tbody>
</table>
</div>

<div id="identity">
<h2 >Secret Identity: Bruce Wayne</h2>
<img src="./img/wayne.png" alt="Bruce Wayne" id="image" />

<p>Batman's secret identity is Bruce Wayne, a wealthy American industrialist who resides just outside of Gotham City. As a child, Bruce witnessed the murder of his parents, Thomas Wayne and Martha Wayne, which ultimately led him to craft the Batman persona and seek vengeance against criminals. Wayne averts suspicion by acting the part of a superficial playboy idly living off his family's fortune, which was amassed through investment in real estate before the city became a bustling metropolis, and the profits of Wayne Enterprises, his inherited conglomerate.Bruce Wayne resides just outside of Gotham City in Wayne Manor. He supports philanthropic causes through his nonprofit Wayne Foundation, but is more widely known as a celebrity socialite. In public, he appears frequently in the company of high-status women, which encourages tabloid gossip. Although Bruce Wayne leads an active romantic life, crime-fighting accounts for most of his time </p>
</div>

<div id="movies">
<h2>Batman movies</h2>
<div class="thumbnail" >
<img src="./img/batman_begins.jpg" alt="Bruce Wayne" class="img-thumbnail"/>
<h4> Batman Begins <br> (2005) </h4>
</div>
<div class="thumbnail">
<img src="./img/dark_knight.jpg" alt="Bruce Wayne" />
<h4> The Dark Knight Begins <br> (2008) </h4>
</div>
<div class="thumbnail">
<img src="./img/dark_knight_r.jpg" alt="Bruce Wayne" />
<h4> The Dark Knight Rises <br> (2012) </h4>
</div>
</div>
<div>
<center>
<h4> Subscribe to our newsletter</h4>
<form>
<input type="text">
<input type="submit" value="Subscribe">
</form>
</center>
</div>

</div>
<footer>
<p>Batman helpline: 0000 288 456 | Batman is the best. </p>
</footer>
</body>
</html>

172 changes: 172 additions & 0 deletions Module 1 - HTML and CSS/Topic 15 - Navigation/Bootstrap Navbar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
body,html {
width: 100%;
height: 100%;
}

body {
margin: 0;
padding: 0;
color: #000;
background: #ffffff;
font-family: 'Roboto', sans-serif;
max-width:1000px;
}

p{
text-align: justify;
text-justify: inter-word;
}

#header {
padding: 5px 0px;
color:#403F3F;
text-align:center;
margin: auto;
border-bottom: 1px solid;
}

h3{
font-weight: 900;
}

.logo{
float: left;
height: 50px;
font-size: 18px;
line-height: 20px;
}

.container {
padding:20px;
margin: auto;
width:100%;
overflow-x: hidden;
}
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li> a
{
display: block;
color: #666;
padding: 14px 16px;
text-decoration: none;
float: right;
}

#background_image {
height: 350px;
padding-top: 50px;
background: url(./img/bat_cover.jpg);
color: #fff;
margin: auto;
margin-top: 25px;
}

.right{
float: right;
}

.left{
float: left;
}

table{
border-collapse: collapse;
width: 100%;
}

th,td {
padding:15px;
border: 1px solid #a4a4a4;
height: 30px;
}

th {
text-align: left;
background-color: #ececec;
}

#image{
float:left;
padding:0px 20px 20px 0px;
}


#content {
background-color: rgba(0, 0, 0, 0.7);
max-width: 450px;
padding:30px 20px;
margin-top:50px;
}

#content h2{
font-size:16px;
font-weight: normal;
}

.list_box{
width:100%;
overflow:hidden;
}

.box{
display: inline-block;
width: 50%;
float:left;
}


img{
max-width: 100%;
height: auto;
vertical-align: middle;
}

#identity {
overflow: auto;
}

.thumbnail {
display: inline-block;
height: auto;
padding: 4px;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #a4a4a4;
text-align: center;
color: #666;
margin: 50px;
}

input[type="text"] {
padding: 14px 70px;
font-size: 15px;
margin-bottom: 30px;
}

input[type="submit"] {
border: none;
background-color: #26211f;
color: white;
font-size: 16px;
margin: 4px -4px;
padding: 16px 40px;
}



footer {
padding: 5px 0;
color:#000;
border-top: 1px solid;
margin: auto;
}

footer p {
text-align: center;
}