-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (79 loc) · 3.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Book Photos - Lizbeth Gonzales</title>
<link rel="icon" type="image/svg+xml" href="assets/img/urku-ico.svg">
<link rel="stylesheet" href="assets/css/aurora-pack.min.css">
<!-- <link rel="stylesheet" href="assets/css/aurora-theme-base.min.css"> -->
<link rel="stylesheet" href="assets/css/urku.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"/>
</head>
<body class="top-fixed bg-rk-dark-color">
<header class="ae-container-fluid ae-container-fluid--full rk-header bg-rk-pink-color">
<div class="ae-container-fluid rk-topbar">
<h1 class="rk-logo">lizbeth gonzales</h1>
</div>
</header>
<section class="ae-container-fluid rk-main">
<section id="app" class="ae-container-fluid ae-container-fluid--inner rk-portfolio">
<div class="animated fadeIn ae-masonry ae-masonry-sm-2 ae-masonry-md-2 ae-masonry-xl-4 hover-zoom">
<a v-for="photo in photos" href="#0" class="rk-item ae-masonry__item">
<img :src="'assets/img/'+photo+'.jpeg'" alt="">
<!-- <div class="item-meta">
<h2>{{name}}</h2>
<p>{{name}}</p>
</div> -->
</a>
</div>
</section>
</section>
<footer class="ae-container-fluid rk-footer ">
<div class="ae-grid ae-grid--collapse">
<div class="ae-grid__item item-lg-4 au-xs-ta-center"><a href="#0" class="rk-social-btn rk-light-color ">
<svg>
<use xlink:href="assets/img/symbols.svg#icon-facebook"></use>
</svg></a><a href="#0" class="rk-social-btn rk-light-color">
<svg>
<use xlink:href="assets/img/symbols.svg#icon-twitter"></use>
</svg></a><a href="#0" class="rk-social-btn rk-light-color">
<svg>
<use xlink:href="assets/img/symbols.svg#icon-pinterest"></use>
</svg></a><a href="#0" class="rk-social-btn rk-light-color">
<svg>
<use xlink:href="assets/img/symbols.svg#icon-tumblr"></use>
</svg></a></div>
<div class="ae-grid__item item-lg-4 au-xs-ta-center au-lg-ta-right">
<p class="rk-footer__text rk-footer__contact "> <span class="ae-u-bold">Email: </span><span class="ae-u-bolder">
<a href="#0" class="rk-light-color">dlizbethgm@gmail.com</a></span></p>
</div>
</div>
</footer>
<!-- <script src="assets/js/svg4everybody.min.js"></script> -->
<!-- <script>svg4everybody();</script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
anio: 2022,
name: 'Lizbeth Gonzales',
photos: ['img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8', 'img9', 'img10', 'img11']
},
created() {
this.photos.sort(() => {
return Math.random() - 0.5
});
// console.log(this.photos);
},
methods: {
// numeroRandom(){
// this.random = Math.floor(Math.random()* this.photos.length);
// console.log('random', this.random);
// }
},
});
</script>
</body>
</html>