Add files via upload
This commit is contained in:
Rezza Priatna
GitHub
commit
839ef752a0
85
css/style.css
Normal file
85
css/style.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&display=swap');
|
||||||
|
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=JetBrains+Mono:wght@300&family=PT+Mono&display=swap');
|
||||||
|
body {
|
||||||
|
background-color: #121317;
|
||||||
|
}
|
||||||
|
img.rounded-circle{
|
||||||
|
border: 3px solid #7e3af2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #1a1c23;
|
||||||
|
}
|
||||||
|
h1.title {
|
||||||
|
font-size: 23px;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
p.title2 {
|
||||||
|
font-size: 11px;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.card-bio {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
}
|
||||||
|
p.bio-body {
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.text-center.icon {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.myBadge{
|
||||||
|
color: #7e3af2;
|
||||||
|
}
|
||||||
|
h1.header {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
background-color: #7e3af2;
|
||||||
|
}
|
||||||
|
h2.title {
|
||||||
|
background: #7e3af2;
|
||||||
|
color: #ffffff;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin: 0 0 30px;
|
||||||
|
padding: 10px 15px 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position:fixed;
|
||||||
|
bottom:0;
|
||||||
|
left:0;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #7e3af2;
|
||||||
|
|
||||||
|
}
|
||||||
|
p.footer-title {
|
||||||
|
font-size: 13px;
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'IBM Plex Mono', monospace;
|
||||||
|
|
||||||
|
}
|
||||||
BIN
img/icon.png
Normal file
BIN
img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
img/profile.jpg
Normal file
BIN
img/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
89
index.html
Normal file
89
index.html
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/png" sizes="500x500" href="img/icon.png">
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>Rezza Priatna - Webpage</title>
|
||||||
|
<meta name="title" content="Rezza Priatna - Webpage">
|
||||||
|
<meta name="description" content="Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages.">
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://metatags.io/">
|
||||||
|
<meta property="og:title" content="Rezza Priatna - Webpage">
|
||||||
|
<meta property="og:description" content="Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages.">
|
||||||
|
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
|
||||||
|
<script defer src="visitor.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column min-vh-100">
|
||||||
|
<div class="container mt-4">
|
||||||
|
<!-- Bio Page -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="text-center">
|
||||||
|
<img class="rounded-circle" alt="100x100" src="img/profile.jpg"
|
||||||
|
data-holder-rendered="true" width="150" height="150">
|
||||||
|
|
||||||
|
<h1 class="title mt-2">
|
||||||
|
<span class="myBadge">
|
||||||
|
<i class="bi bi-patch-check-fill"></i>
|
||||||
|
</span>Rezza Priatna</h1>
|
||||||
|
<p class="title2">Backend Developer</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-bio">
|
||||||
|
<div class="card-body">
|
||||||
|
<p class="bio-body">
|
||||||
|
Hello, My name is Reza Priatna, I am from Indonesia. I Learned Programming 3 Years Ago. I Am Freelancer Programmer As Backend Developer And Bot Maker, Sometime I really like to make simple programs with Python and PHP programming languages.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center icon">
|
||||||
|
<i class="bi bi-facebook ml-4"></i>
|
||||||
|
<i class="bi bi-instagram ml-4"></i>
|
||||||
|
<i class="bi bi-whatsapp ml-4"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Skils -->
|
||||||
|
<div class="card mt-2">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="title"> My Skils</h1>
|
||||||
|
<p class="bio-body mt-2">PHP</p>
|
||||||
|
<div class="progress" style="height: 4px;">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<p class="bio-body mt-4">PHP</p>
|
||||||
|
<div class="progress" style="height: 4px;">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<p class="bio-body mt-4">MySQL</p>
|
||||||
|
<div class="progress" style="height: 4px;">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<p class="bio-body mt-4">Nodejs</p>
|
||||||
|
<div class="progress" style="height: 4px;">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 58%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
<p class="bio-body mt-4">Bootsrap</p>
|
||||||
|
<div class="progress mb-5" style="height: 4px;">
|
||||||
|
<div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Project -->
|
||||||
|
</div>
|
||||||
|
<footer class="mt-auto]">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="footer-title">Total Visitor :</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
visitor.js
Normal file
13
visitor.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
var counterContainer = document.querySelector(".footer-title");
|
||||||
|
var resetButton = document.querySelector("#reset");
|
||||||
|
var visitCount = localStorage.getItem("page_view");
|
||||||
|
|
||||||
|
// Check if page_view entry is present
|
||||||
|
if (visitCount) {
|
||||||
|
visitCount = Number(visitCount) + 1;
|
||||||
|
localStorage.setItem("page_view", visitCount);
|
||||||
|
} else {
|
||||||
|
visitCount = 1;
|
||||||
|
localStorage.setItem("page_view", 1);
|
||||||
|
}
|
||||||
|
counterContainer.innerHTML = 'Visitor This Website : '+visitCount;
|
||||||
Loading…
Reference in New Issue
Block a user