-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
154 lines (135 loc) · 7.55 KB
/
index2.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- SEO Meta Tags -->
<meta name="description" content="Your description">
<meta name="author" content="Your name">
<!-- OG Meta Tags to improve the way the post looks when you share the page on Facebook, Twitter, LinkedIn -->
<meta property="og:site_name" content="" /> <!-- website name -->
<meta property="og:site" content="" /> <!-- website link -->
<meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
<meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
<meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
<meta property="og:url" content="" /> <!-- where do you want your post to link to -->
<meta name="twitter:card" content="summary_large_image"> <!-- to have large image post format in Twitter -->
<!-- Webpage Title -->
<title>Hy Riska!</title>
<!-- Styles -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<link href="css/swiper.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
<style>
.card-img {
min-height: 300px;
max-height: 100%;
width: auto;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Header -->
<header id="header" class="header">
<div class="header-content">
<div class="container">
<div style="align-items: center; justify-content: center; display: flex; height: 55vh;">
<div class="row">
<div class="col-lg-12">
<h1 class="h1-large">Hello Riska !</h1>
<h5 class="text-light" style="margin-top: -40px;">Terima kasih sudah mau membuka kembali.</h5>
<!-- <a class="btn-solid-lg" href="#introduction">Send me a message</a> -->
</div>
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of header-content -->
<!-- Video Background -->
<video autoplay loop muted id="video-background" poster="images/header-background.jpg" playsinline>
<source src="images/header-background-video.mp4" type="video/mp4" />
</video>
<!-- end of video background -->
</header> <!-- end of header -->
<!-- end of header -->
<div style="background-color: #161223;">
<div class="container pt-5">
<div class="card bg-dark text-white" style="position: relative;">
<img class="card-img" src="./images/5.jpg" alt="Card image">
<div class="card-img-overlay" style="position: absolute; background-color: rgba(22, 18, 35, 0.7); top: 0; left: 0; right: 0; bottom: 0;"></div>
<div class="card-text-container" style="position: absolute; top: 50%; transform: translateY(-50%); padding: 20px;">
<h5 class="card-title text-light">2021</h5>
<small class="card-text text-light text-center">Aku memperhatikanmu ditengah lautan manusia, entah dari mana rasa ini muncul, hanya ketika aku tahu bahwa kau ada di dunia, rasaku bergemuruh pada bibir yang tak sanggup untuk mengungkapkan sebuah rasa. Mungkin saat ini bagiku, mencintaimu dalam diam adalah hal yang paling masuk akal. Aku bercengkrama dengan rasa yang begitu menggebu, takut pada situasi dimana aku kehilanganmu. Jika rasaku berhasil mendobrak rasa takutku untuk mengungkapkan sebuah pernyataan cinta. Apakah mencintaimu itu sama seperti langit? Aku hanya bisa memandang dari kejauhan. Namun tak pernah bisa kugapai.</small>
</div>
</div>
</div>
</div>
<!-- <div style="background-color: #161223;">
<div class="container pt-5">
<div class="card bg-primary">
<div class="card-body">
<p class="text-light">Aku memperhatikanmu ditengah lautan manusia, entah dari mana rasa ini muncul, hanya ketika aku tahu bahwa kau ada di dunia, rasaku bergemuruh pada bibir yang tak sanggup untuk mengungkapkan sebuah rasa. Mungkin saat ini bagiku, mencintaimu dalam diam adalah hal yang paling masuk akal.</p>
<p class="text-light">Aku bercengkrama dengan rasa yang begitu menggebu, takut pada situasi dimana aku kehilanganmu. Jika rasaku berhasil mendobrak rasa takutku untuk mengungkap sebuah pernyataan cinta.</p>
<p class="text-light">Apakah mencintaimu itu sama seperti langit? Aku hanya bisa memandang dari kejauhan. Namun tak pernah bisa kugapai.</p>
</div>
</div>
</div>
</div> -->
<!-- Footer -->
<div class="footer">
<div class="container">
<h5 class="text-light">Kunjungi Halaman Terdahulu?<a href="old.html"> klik di sini</a></h5>
</div> <!-- end of container -->
</div> <!-- end of footer -->
<!-- end of footer -->
<!-- Copyright -->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr>
<p class="p-small">Copyright © <a href="#your-link">2023 | Nur Mujahidin Achmad Akbar</a>
<br>
Build with ❤️ in Malang, using <img style="height: 20px;" src="./images/html.png" alt="html, css, js">
<b><a href="https://github.com/nmujahidin-aa/riska.git" style="margin-left: 20px;"> View source <i class="fa fa-arrow-right"></i></a></b>
</p>
</div> <!-- end of col -->
</div> <!-- enf of row -->
</div> <!-- end of container -->
</div> <!-- end of copyright -->
<!-- end of copyright -->
<!-- Back To Top Button -->
<button onclick="topFunction()" id="myBtn">
<img src="images/up-arrow.png" alt="alternative">
</button>
<!-- end of back to top button -->
<!-- Scripts -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/purecounter.min.js"></script> <!-- Purecounter counter for statistics numbers -->
<script src="js/isotope.pkgd.min.js"></script> <!-- Isotope for filter -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
<script>
window.addEventListener("load", function () {
adjustImageHeight();
});
window.addEventListener("resize", function () {
adjustImageHeight();
});
function adjustImageHeight() {
var card = document.querySelector(".card");
var cardTextContainer = document.querySelector(".card-text-container");
var cardImg = document.querySelector(".card-img");
if (card && cardTextContainer && cardImg) {
var textHeight = cardTextContainer.offsetHeight;
cardImg.style.height = textHeight + "px";
}
}
</script>
</body>
</html>