Permalink
Browse files

all things

  • Loading branch information...
AlonaOneill committed Jan 11, 2019
1 parent eba0793 commit cad5cfa48884e03909a850870b595d515d603e7f
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/my-styles.css">
<!-- JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="index.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Ramen Heaven</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Reservations<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Menu</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid my-jumbotron">
<div class="container">
<h1 class="display-4">Ramen Heaven</h1>
<p class="lead">Ramen is a Japanese dish. It consists of Chinese-style wheat noodles served in a meat or fish-based broth, <br> often flavored with soy sauce or miso, and uses toppings such as sliced pork, dried seaweed, menma, <br> and green onions.</p>
<button class="btn btn-dark">Learn more</button>
</div>
</div>
<div id="containercard">
<div class="card mb-3 locations">
<img src="images/NYC.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us New York</h5>
<p class="card-text">The Absolute Best Places for Ramen in NYC Right Now.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-3 locations">
<img src="images/SF.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us in San Francisco</h5>
<p class="card-text">Best Ramen in San Francisco.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card mb-3 locations">
<img src="images/seat.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Find us in Seattle</h5>
<p class="card-text">Ramen's popularity has skyrocketed in Seattle in recent years.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#exampleModal">
Contact us
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contacts</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>+16506600389 - from 9am till 5pm</p>
<p>+16506644006 - from 5pm till 9am</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-dark">Save changes</button>
</div>
</div>
</div>
</div>
<div>
<button data-id="0" type="button" class="btn btn-dark animal">Giraffe</button>
<button data-id="1" type="button" class="btn btn-dark animal">Hippo</button>
</div>
<div class="box"></div>
</body>
</html>
View
@@ -0,0 +1,15 @@
function codeToRun() {
var arrayOfAnimalURLS = ['https://i.pinimg.com/originals/1a/1a/f8/1a1af8bd20f97884159ef6f3ee224e9f.jpg','https://i.pinimg.com/originals/3d/ec/fe/3decfe84de9f436b3785f09919e6c701.jpg'];
function showAnimal(e) {
//get data id of whatever I clicked
var dataIdOfButtonIClicked = $(e.target).data("id");
console.log(dataIdOfButtonIClicked);
//get url at that dataid index
//change the box background to that url
var urlToUse = arrayOfAnimalURLS[dataIdOfButtonIClicked];
console.log(urlToUse);
$('div.box').css('background-image', "url(" + urlToUse + ")");
}
$('button').click(showAnimal);
}
$(document).ready(codeToRun);
View
@@ -0,0 +1,51 @@
body {
background-color: grey;
}
div#containercard {
display: flex;
padding: 10px;
justify-content: space-between;
}
div#containercard .card {
width: 300px;
}
div.container {
margin: 0px;
padding: 0px;
}
div.locations {
margin: 0px;
padding: 0px;
background-color: #49484f;
color: white;
font-weight: bold;
font-size: 14px;
}
.my-jumbotron {
height: 70vh;
background-image: url("https://vignette.wikia.nocookie.net/howtobasic/images/a/a2/Maxresdefault_%283%29.jpg/revision/latest?cb=20180825055953");
background-repeat: no-repeat;
background-position: cover;
color: white;
margin: 0px;
padding: 0px;
}
@media only screen and (max-width: 600px) {
body {
background-color: blue;
}
.my-jumbotron {
height: 50vh;
}
}
button.animal {
margin: 10px;
}
div.box {
height: 200px;
width: 200px;
border: 1px solid white;
margin: 10px;
background-size: contain;
background-repeat: no-repeat;
}

0 comments on commit cad5cfa

Please sign in to comment.