Skip to content

Commit

Permalink
Change to 4 in a row
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexHedley
AlexHedley committed Dec 24, 2024
1 parent b638b57 commit 3e776f9
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 187 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ Images are taken from [Funko](https://www.funko.com/)

`cd src`

`py -m http.server`
`py -m http.server -b 127.0.0.1`

`cd src && py -m http.server -b 127.0.0.1`

- [local](http://localhost:8000/)

Expand Down
5 changes: 5 additions & 0 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ h1 {
color: #0D4EDD;
}

.container {
/* max-width: 1140px; */
max-width: 1500px;
}

.carousel-caption {
color: #0D4EDD;
background-color: rgb(255, 255, 255, 0.6); /*white;*/
Expand Down
314 changes: 128 additions & 186 deletions src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,205 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<meta name="description" content="Funko Pop!" />
<meta name="keywords" content="funko, pop!" />
<meta name="author" content="Alex Hedley" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
<link rel="stylesheet" href="css/vendor/sticky-footer.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<!-- <link rel="stylesheet" href="css/jquery-ui.min.css"> -->
<link rel="stylesheet" href="css/vendor/jquery-ui.1.12.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<meta name="description" content="Funko Pop!" />
<meta name="keywords" content="funko, pop!" />
<meta name="author" content="Alex Hedley" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
<link rel="stylesheet" href="css/vendor/sticky-footer.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<!-- <link rel="stylesheet" href="css/jquery-ui.min.css"> -->
<link rel="stylesheet" href="css/vendor/jquery-ui.1.12.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />

<link rel="shortcut icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" />

<!-- Fonts -->
<!-- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> -->
<!-- Fonts -->
<!-- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> -->

<title>Funko Pop!</title>
</head>
<body ng-app="myApp">
<!-- Begin page content -->
<main role="main" class="container">
<section class="jumbotron title-container text-center">
<div>
<h1>Funko Pop!</h1>
<title>Funko Pop!</title>
</head>
<body ng-app="myApp">
<!-- Begin page content -->
<main role="main" class="container">
<section class="jumbotron title-container text-center">
<div>
<h1>Funko Pop!</h1>

<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="input-group search-bar">
<input
type="text"
class="form-control"
ng-model="searchText"
placeholder="Search for a Funko Pop!..."
aria-label="Search"
/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</section>

<div ng-controller="myController">
<div class="container">
<div class="row justify-content-md-center">
<div class="">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li
ng-repeat="pop in pops"
data-target="#carouselExampleCaptions"
data-slide-to="{{$index}}"
></li>
</ol>
<div class="carousel-inner">
<div
ng-repeat="pop in pops"
class="carousel-item"
ng-class="{active:$first}"
>
<img
src="/funkopop/{{pop.image}}"
class="d-block w-100"
alt="{{pop.name}}"
/>
<div class="carousel-caption d-none d-md-block">
<h5>{{pop.name}}</h5>
<p>{{pop.description}}</p>
<div class="row justify-content-md-center">
<div class="col-lg-8">
<div class="input-group search-bar">
<input type="text" class="form-control" ng-model="searchText" placeholder="Search for a Funko Pop!..." aria-label="Search" />
<button type="submit" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleCaptions"
role="button"
data-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleCaptions"
role="button"
data-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>

<br />
<div ng-controller="myController">
<div class="container">
<div class="row justify-content-md-center">
<div class="">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li ng-repeat="pop in pops" data-target="#carouselExampleCaptions" data-slide-to="{{$index}}"></li>
</ol>
<div class="carousel-inner">
<div ng-repeat="pop in pops" class="carousel-item" ng-class="{active:$first}">
<img src="{{pop.image}}" class="d-block w-100" alt="{{pop.name}}" />
<div class="carousel-caption d-none d-md-block">
<h5>{{pop.name}}</h5>
<p>{{pop.description}}</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<div class="row">
<div
ng-repeat="pop in pops | filter:searchText"
class="col-md-4"
style="margin-bottom: 50px"
>
<div class="card" style="width: 18rem">
<img
ng-if="pop.image.length > 0"
ng-src="/funkopop/{{pop.image}}"
class="card-img-top"
alt="{{pop.name}}"
/>
<div class="card-body">
<h5 class="card-title">
{{pop.name}}
<span class="badge badge-secondary">{{pop.number}}</span>
</h5>
<p class="card-text">{{pop.description}}</p>
<a
ng-if="set.link.length > 0"
ng-href="{{pop.link}}"
target="_blank"
class="btn btn-primary"
>Official Link</a
>
</div>
</div>
</div>
</div>
<br />

<br />
<div class="row">
<div ng-repeat="pop in pops | filter:searchText" class="col-md-3" style="margin-bottom: 50px">
<div class="card" style="width: 18rem">
<img ng-if="pop.image.length > 0" ng-src="{{pop.image}}" class="card-img-top" alt="{{pop.name}}" />
<div class="card-body">
<h5 class="card-title">
{{pop.name}}
<span class="badge badge-secondary">{{pop.number}}</span>
</h5>
<p class="card-text">{{pop.description}}</p>
<a ng-if="set.link.length > 0" ng-href="{{pop.link}}" target="_blank" class="btn btn-primary">Official Link</a>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col">
<h2>Wanted</h2>
</div>
</div>
<br />

<div class="row">
<div class="col">
<h2>Wanted</h2>
</div>
</div>

<div class="row">
<div ng-repeat="pop in wantedpops | filter:searchText" class="col-md-4" style="margin-bottom: 50px">
<div class="card" style="width: 18rem">
<img ng-src="/funkopop/{{pop.image}}" class="card-img-top" style="filter: grayscale(1);" alt="{{pop.name}}" />
<div class="card-body">
<h5 class="card-title">
{{pop.name}}
<span class="badge badge-secondary">{{pop.number}}</span>
</h5>
<p class="card-text">{{pop.description}}</p>
<a ng-if="set.link.length > 0" ng-href="{{pop.link}}" target="_blank"class="btn btn-primary">Official Link</a>
<div class="row">
<div ng-repeat="pop in wantedpops | filter:searchText" class="col-md-3" style="margin-bottom: 50px">
<div class="card" style="width: 18rem">
<img ng-src="{{pop.image}}" class="card-img-top" style="filter: grayscale(1)" alt="{{pop.name}}" />
<div class="card-body">
<h5 class="card-title">
{{pop.name}}
<span class="badge badge-secondary">{{pop.number}}</span>
</h5>
<p class="card-text">{{pop.description}}</p>
<a ng-if="set.link.length > 0" ng-href="{{pop.link}}" target="_blank" class="btn btn-primary">Official Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</main>
</main>

<footer class="footer">
<div class="container">
<span class="text-muted"
><a href="https://alexhedley.github.io/" target="_blank"
>Alex Hedley</a
>.</span
>
</div>
</footer>
<footer class="footer">
<div class="container">
<span class="text-muted"><a href="https://alexhedley.github.io/" target="_blank">Alex Hedley</a>.</span>
</div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script>
window.jQuery ||
document.write('<script src="js/vendor/jquery-slim.min.js"><\/script>');
</script>
<script src="js/vendor/jquery-ui.min.js"></script>
<!-- <script src="js/vendor/jquery-ui.1.12.1.min.js"></script> -->
<!-- <script src="js/vendor/popper.min.js"></script> -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- <script src="js/vendor/jquery.pretty-text-diff.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-slim.min.js"><\/script>');
</script>
<script src="js/vendor/jquery-ui.min.js"></script>
<!-- <script src="js/vendor/jquery-ui.1.12.1.min.js"></script> -->
<!-- <script src="js/vendor/popper.min.js"></script> -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- <script src="js/vendor/jquery.pretty-text-diff.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

0 comments on commit 3e776f9

Please sign in to comment.