Skip to content

Bootstrap #11

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 5 commits into
base: master
Choose a base branch
from
Open

Bootstrap #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
22fcc73
website edits
pujadahal May 24, 2019
6692115
testing
pujadahal May 31, 2019
4140029
changes to website
pujadahal Jun 1, 2019
40f1c75
changes
pujadahal Jun 1, 2019
d248281
yellow color
pujadahal Jun 3, 2019
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
14 changes: 14 additions & 0 deletions public_html/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
//for debugging
console.log('Im in your console. Inspect Element > Console.');
$(document).ready(function () {
//for debugging
console.log('DOM loaded!. Inspect Element > Console.');

//wait for HTML to finish downloading
document.addEventListener("DOMContentLoaded", function(){
// 1) use an Effect
// https://learn.jquery.com/effects/intro-to-effects/
// Hide or Show
// https://www.w3schools.com/jquery/jquery_hide_show.asp


// Grab the intro element and add some simple text dynamically
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
var introElem = document.getElementById('intro');
// 2) Dynamically set CSS using JQuery
// https://learn.jquery.com/using-jquery-core/css-styling-dimensions/


// Put some text in there
introElem.textContent = "Hi. I'm in here. ";
Expand All @@ -15,6 +26,8 @@ document.addEventListener("DOMContentLoaded", function(){

//debug out to the console
console.log(introElem);
// Code Academy intro to JQuery
// https://www.codecademy.com/learn/learn-jquery

//
// Run the function below that will detect mousemovements in the Navigation area
Expand All @@ -36,3 +49,4 @@ function logMouseOut() {
var m = document.getElementById('mousy');
m.innerHTML = 'MOUSE OUT detected';
}
});
6 changes: 3 additions & 3 deletions public_html/features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ document.addEventListener("DOMContentLoaded", function(){
// Grab the UL element and count the number of LI nodes
// https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
var listElem = document.getElementById("navigation").getElementsByTagName("li");
listElem[0].textContent="My name is puja";
listElem[0].textContent="Best Time to Visit";

//debug out to the console
console.log(listElem.length);

// Put some text in there
var statsElem = document.getElementById("stats");
statsElem.textContent = "There are " + listElem.length + " Places to explore.";
//statsElem.textContent = "There are " + listElem.length + " Places to explore.";

//
// Run the function below that will multiple this the LI of places by 10 and display it at the H1 element
Expand All @@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", function(){
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
var h1Element = document.getElementsByTagName("h1");
// Display the new headline
h1Element[0].textContent=increaseNumber(listElem.length);
//h1Element[0].textContent=increaseNumber(listElem.length);

});

Expand Down
100 changes: 82 additions & 18 deletions public_html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,97 @@
<!doctype html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>San Francisco</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="features.js"></script>
</head>
</head>

<body id="mainpage">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">San Francisco</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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="#food">Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sights">Sightseeing</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>

<div class="container-fluid">
<h1>A Guide to Exploring San Francisco</h1>
<p id="intro"></p>
<span id="mousy"></span>
<nav>
<ul id="navigation">
<li class="nav-item">Best Time to Visit</li>
<li class="nav-item">Places to See</li>
<li class="nav-item">Things to Do</li>
<li class="nav-item">Food and Drinks</li>
</ul>
</nav>
<div id="stats"></div>

<div>
<img src="https://images.unsplash.com/photo-1503985466459-944ddaa2208a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"class="rounded float-left" alt="SF photo" ></div>
<div>
<img src="https://images.unsplash.com/photo-1544135178-09f2547ac16d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="SF photo" ></div>

<h2 class="headlines">Best Time to Visit</h2>
<p>San Francisco has a mediterranean climate. Being a peninsula, it remains pretty cool throughout the year, with most of the rainfall occurring during the winter and spring seasons. You should visit the city during the summer and fall seasons, but keep in mind that this is also peak tourist season.</p>
<h2 class="headlines">Places to See</h2>
<p><img src="https://images.unsplash.com/photo-1506288042733-605872821278?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"class="rounded float-left" alt="SF photo"></p>
<p><img src="https://images.unsplash.com/photo-1543337425-8c469390e715?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="SF photo"></p>

<h2 class="headlines" id="sights">Places to See</h2>
<p>San Francisco is great for sight-seeing, and there are many not as known lookout points that provide you with fantastic views of the city's skyline.</p>
<ul>
<li>Pier 39</li>
<li>Coit tower</li>
<li>Chinatown</li>
<li>Downtown</li>
<li>Alcatraz Island</li>
<li>Lombard Street</li>
<li>Golden Gate Bridge</li>
<li>Marine Headlands</li>
<li>Baker Beach, Ocean Beach</li>
</ul>

<p><img class="mx-auto a-block" src="https://images.unsplash.com/photo-1526349788808-b8761b7b4bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"class="rounded float-left" alt="SF photo"></p>
<p><img class="mx-auto c-block" src="https://images.unsplash.com/photo-1536627620875-2182df85cd87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="SF photo"></p>

<div class="clearfix"></div>

<h2 class="headlines">Things to Do</h2>
<p>There is always an activity or event happening every day in the city. </p>
<h2 class="headlines">Food and Drinks</h2>
<p>There is always an activity or event happening every day in the city. Go for a cable car ride downtown. Take a stroll at Chinatown
and enjoy the delicious freshly baked bakery items. Seal watch at the pier or enjoy the beautiful view from the Coit tower. Visit the beautiful
natural beauty of Marine Headlands and enjoy the scenic route on the way</p>
<p><img src="https://images.unsplash.com/photo-1493278125710-29e0d5195764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"class="rounded float-left" alt="SF photo"></p>
<p><img src="https://images.unsplash.com/photo-1512006156684-0844f9292f1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="SF photo"></p>

<h2 class="headlines" id="food">Food and Drinks</h2>
<p>The city is full of foods from across the entire universe. You can find almost any type of cuisine with ease.</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</body>

</html>
28 changes: 19 additions & 9 deletions public_html/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
body {
box-sizing: border-box;
height: 300px;
width: 800px;
margin: auto;
padding: 50px;
/*Remove this background-color! It is here to make sure that the css and html are linked.*/
background-color: cornflowerblue;
border: 5px dotted gainsboro;
background-color: pink;
border: 5px black;
background-image: url(");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

}
}
.header {
background-color: gray;
background-image: url(http://getdrawings.com/san-francisco-bridge-vector#san-francisco-bridge-vector-25.png)
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: yellow;
};
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
}

h1 {
color: lightblue;
h2 {
font-family: 'Courier New', Courier, monospace;
font-style: inherit;

}