Notes
Notes - notes.io |
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Framer Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Braah+One&display=swap" rel="stylesheet">
<style>
html,
body {
position: relative;
height: 100%;
font-family: "Braah One", sans-serif;
font-weight: 400;
}
body {
background: linear-gradient(180deg, #060a19 11.71%, #0e1b40 59.57%, #060a19 100%);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
iframe {
border-radius: 25px;
}
.first {
position: relative;
}
.splide1 {
width: 400px;
cursor: pointer;
background-color: #152145b8;
border-radius: 20px;
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 2%, rgb(0, 0, 0) 19.5%, rgb(0, 0, 0) 80.5%, rgba(0, 0, 0, 0) 98%);
box-shadow: 0 .7961918735236395px 2.3885756205709185px -.625px #0000000d, 0 2.414506143104518px 7.2435184293135535px -1.25px #0000000d, 0 6.382653521484461px 19.147960564453385px -1.875px #0000000d, 0 20px 60px -2.5px #0000000d;
}
.splide3 {
margin-top: 6rem;
cursor: pointer;
border-radius: 20px;
display: flex;
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 2%, rgb(0, 0, 0) 19.5%, rgb(0, 0, 0) 80.5%, rgba(0, 0, 0, 0) 98%);
}
.splide3 img {
width: 210px;
height: 80px;
object-fit: cover;
}
.splide1 img {
width: 250px;
height: 150px;
margin-top: 1rem;
}
.splide2 img {
width: 600px;
height: auto;
}
.splide1 h4 {
padding: 1rem 40px;
font-size: 1.5rem;
color: #d2d2d2be;
text-align: left;
font-weight: bold;
font-family: "Braah One", sans-serif;
}
.splide1 h6 {
color: #d2d2d2;
font-size: 1rem;
letter-spacing: 1px;
padding: 0 2.5rem;
text-align: left;
}
.splide1 .splide__slide {
text-align: center;
}
.algoai1 {
background-color: #0a1334b3;
border-radius: 10px;
flex: none;
height: 120px;
overflow: hidden;
width: 288px;
border: 3px solid rgba(80, 71, 21, 0.445);
text-align: center;
color: #d2d2d2;
margin: auto;
padding: 10px;
position: relative;
left: 0px;
font-family: "Braah One", sans-serif;
}
.algoai {
background-color: #0a1334b3;
border-radius: 10px;
flex: none;
height: 120px;
overflow: hidden;
width: 288px;
border: 3px solid rgba(80, 71, 21, 0.445);
text-align: center;
color: #d2d2d2;
margin: auto;
padding: 10px;
font-family: "Braah One", sans-serif;
}
.algoai h3 {
font-weight: 700;
font-family: "Braah One", sans-serif;
}
.algoai h6 {
font-size: 0.8rem;
font-weight: 700;
font-family: "Braah One", sans-serif;
}
.third-img-bg {
position: absolute;
overflow: hidden;
width: 50%;
height: 100%;
transform: translate(calc(50% - 300px), calc(50% - 210px));
z-index: -1;
}
.first-img-bg {
position: absolute;
overflow: hidden;
left: 285px;
width: 100%;
object-fit: cover;
opacity: 0.7;
z-index: -1;
}
.second-title,
.third-title {
font-size: 3rem;
color: #d2d2d2;
padding-top: 3rem;
padding-bottom: 1rem;
text-align: center;
font-weight: 700;
font-family: "Braah One", sans-serif;
}
.accordion {
width: 450px;
height: 300px;
}
.accordion-button {
background-color: transparent;
color: white;
font-size: 1.85rem !important ;
}
.accordion-item {
background-color: rgba(21, 33, 69, 0.3);
opacity: 1;
padding: 1rem 0;
border: none;
}
.accordion-item:nth-child(1) {
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.accordion-item:last-child {
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.accordion-button::after {
background-image: none;
content: '';
display: none;
}
.accordion-button:focus,
.accordion-button:not(.collapsed) {
box-shadow: none;
background-color: transparent;
color: white;
}
.accordion-body {
color: white;
}
.transition-icon {
transition: transform 0.3s ease;
/* İkon için geçiş efekti */
}
.splide2 .text {
position: absolute;
bottom: 10px;
left: 10px;
}
.splide2 .text h4 {
font-family: "Braah One", sans-serif;
color: white;
}
.left-img-wrapper {
padding: 15px;
background-color: #5c5c5c1a;
border-radius: 60px;
box-shadow: 0 .6021873017743928px 3.010936508871964px -.3333333333333333px #00000005, 0 2.288533303243457px 11.442666516217285px -.6666666666666666px #00000009, 0 10px 50px -1px #00000014;
overflow: visible;
width: 475px;
}
.left-photo {
border-radius: 60px;
}
.card-bg {
align-items: flex-start;
background-color: #66666640;
border-radius: 20px;
box-shadow: 0 .7961918735236395px 2.3885756205709185px -.625px #0000000d, 0 2.414506143104518px 7.2435184293135535px -1.25px #0000000d, 0 6.382653521484461px 19.147960564453385px -1.875px #0000000d, 0 20px 60px -2.5px #0000000d;
display: flex;
flex: none;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
overflow: hidden;
padding: 18px 30px;
width: 350px;
}
.card-bg:nth-child(1) {
color: white;
}
.card-bg:nth-child(1) ul,
.card-bg:last-child ul {
padding-left: 0;
}
.card-bg:nth-child(1) ul li {
color: white;
font-weight: bold;
font-size: 13px;
padding: 10px 0;
}
.card-bg:last-child ul li {
font-weight: bold;
color: rgb(82, 82, 82);
font-size: 13px;
padding: 10px 0;
}
.card-bg:nth-child(1) ul li i {
background-color: white;
color: #8a9ac7;
border-radius: 10px;
padding: 2px;
font-size: 0.75rem;
margin-right: 7px;
}
.card-bg:last-child ul li i {
background-color: rgb(46, 45, 45);
color: #dae0f0;
border-radius: 10px;
padding: 2px;
font-size: 0.75rem;
margin-right: 7px;
}
.card-bg:nth-child(1) button,
.card-bg:last-child button {
align-items: center;
background-color: #fff6;
border-radius: 8px;
box-shadow: 0 .7065919983928324px .7065919983928324px -.625px #00000026, 0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025, 0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023, 0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020, 0 13.646761411524492px 13.646761411524492px -3.125px #0000001b, 0 30px 30px -3.75px #0000000d;
display: flex;
flex: none;
flex-direction: row;
flex-wrap: nowrap;
gap: 10px;
height: 40px;
justify-content: center;
overflow: visible;
padding: 15px;
position: relative;
width: min-content;
}
@media screen and (max-device-width:600px) {
.accordion {
width: 370px;
}
.left-img-wrapper {
width: 370px;
}
.algoai1 {
left: 30px;
}
}
</style>
</head>
<body>
<div class="container first gradient-background">
<a href="https://hizliresim.com/j6wr0nm"><img src="https://i.hizliresim.com/j6wr0nm.png" class="first-img-bg" alt="Resim Yükle"></a>
<div class="row justify-content-center">
<div class="col-xl-12 mt-5 mb-5">
<div class="algoai1">
<h3>"ALGOAI"</h3>
<h6>Use 70% discount for the first month</h6>
<h6>
<div class="timer" id="timer1">
<span class="hours">12</span> :
<span class="minutes">00</span> :
<span class="seconds">00</span>
</div>
</h6>
</div>
</div>
<div class="col-xl-5 mt-3">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/HCErVXU48WA?si=yugJAacR6ies9232?rel=0;start=22&autoplay=1&loop=1&controls=0&mute=1&showinfo=0&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" autoplay mute allowfullscreen></iframe>
</div>
<div class="col-xl-5 mt-3">
<div class="splide1 splide" role="group" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="text">
<h4>Harmonia AI</h4>
<h6>AI Assistant that can even analyze its own signals and make recommendations.</h6>
</div>
<a href="https://hizliresim.com/28g7q7n"><img src="https://i.hizliresim.com/28g7q7n.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<div class="text">
<h4>Simplified ICT-based strategies</h4>
<h6>Simplified ICT-PA concepts with Harmony Algo is very profitable!</h6>
</div>
<a href="https://hizliresim.com/4ohk2tj"><img src="https://i.hizliresim.com/4ohk2tj.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<div class="text">
<h4>Easy To Use</h4>
<h6>The indicator can adjust all settings by</h6>
</div>
<a href="https://hizliresim.com/b9pptk5"><img src="https://i.hizliresim.com/b9pptk5.png" alt="Resim Yükle"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-xl-7">
<div class="splide3 splide" role="group" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<a href="https://hizliresim.com/9se75yx"><img src="https://i.hizliresim.com/9se75yx.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<a href="https://hizliresim.com/a5rv7y4"><img src="https://i.hizliresim.com/a5rv7y4.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<a href="https://hizliresim.com/qs7339e"><img src="https://i.hizliresim.com/qs7339e.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<a href="https://hizliresim.com/ppelc4x"><img src="https://i.hizliresim.com/ppelc4x.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<a href="https://hizliresim.com/fqmz8hx"><img src="https://i.hizliresim.com/fqmz8hx.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<a href="https://hizliresim.com/q8c3luw"><img src="https://i.hizliresim.com/q8c3luw.png" alt="Resim Yükle"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid second">
<h1 class="second-title">Main Features</h1>
<div class="row justify-content-center">
<div class="col-xl-3 mt-5 mb-5">
<div class="accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<i class="fa-solid fa-plus me-2 transition-icon"></i> Harmonia AI
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Harmonia AI is the assistant that analyzes and comments on the chart for you by examining the data on the chart (market structure, liquidity, volatility, etc). </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
<i class="fa-solid fa-plus me-2 transition-icon"></i> Signals & Take Profit
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Catch the highs and lows with Reversal Signals and maximize your profits with adaptive take profit feature.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
<i class="fa-solid fa-plus me-2 transition-icon"></i> Easy To Use
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Automatically set the most efficient setting with Co-Pilot. Easily find the most efficient setting with Dashboard.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
<i class="fa-solid fa-plus me-2 transition-icon"></i> Simplified ICT & PA ased Strategies
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Use simplified ICT and Price Action strategies with Harmony Algo. Easily use advanced trading methods with Harmony Algo in a confirmed way. 2
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 mt-5 mb-5">
<div class="splide2 splide" role="group" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="text">
<h4>HARMONIA AI</h4>
</div>
<a href="https://hizliresim.com/c628fzg"><img src="https://i.hizliresim.com/c628fzg.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<div class="text">
<h4>Simplified ICT & PA Strategy</h4>
</div>
<a href="https://hizliresim.com/fsrxgfn"><img src="https://i.hizliresim.com/fsrxgfn.png" alt="Resim Yükle"></a>
</li>
<li class="splide__slide">
<div class="text">
<h4>Signals & Take Profit</h4>
</div>
<a href="https://hizliresim.com/3taoie1"><img src="https://i.hizliresim.com/3taoie1.png" alt="Resim Yükle"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container third">
<a href="https://hizliresim.com/n47xgno"><img src="https://i.hizliresim.com/n47xgno.png" class="third-img-bg" alt="Resim Yükle"></a>
<h2 class="third-title">Subscription Pricing</h2>
<div class="algoai" style="border: 3px solid #050b1b;">
<h3>"ALGOAI"</h3>
<h6>Use 70% discount for the first month</h6>
<h6>
<div class="timer" id="timer2">
<span class="hours">12</span> :
<span class="seconds">00</span>:
<span class="minutes">00</span>
</div>
</h6>
</div>
<div class="row justify-content-center mt-5">
<div class="col-xl-5">
<div class="left-img-wrapper">
<a href="https://hizliresim.com/2uugw4b"><img src="https://i.hizliresim.com/2uugw4b.png" class="left-photo img-fluid" alt="Resim Yükle"></a>
</div>
</div>
<div class="col-xl-5 d-flex flex-column justify-content-center">
<div class="card-bg mb-5">
<h5>Harmony Algo Pro</h5>
<h2 style="font-weight: 800; font-size:2.5rem;">$71,99/<span style="font-size: 12px;">month</span></h2>
<ul style="list-style: none;">
<li><i class="fa-solid fa-check"></i>Harmonia AI</li>
<li><i class="fa-solid fa-check"></i>Co-Pilot</li>
<li><i class="fa-solid fa-check"></i>24/7 Support & Active Updates</li>
<li><i class="fa-solid fa-check"></i>All Features From Harmony Algo</li>
</ul>
<button class="btn">Subscribe</button>
</div>
<div class="card-bg">
<h5 style="color: rgb(82, 82, 82);">Harmony Algo</h5>
<h2 style="font-weight: 800; font-size:2.5rem; color: rgb(82, 82, 82)">$34,99/<span style="font-size: 12px;">month</span></h2>
<ul style="list-style: none;">
<li><i class="fa-solid fa-check"></i>Co-Pilot</li>
<li><i class="fa-solid fa-check"></i>Signals</li>
<li><i class="fa-solid fa-check"></i>Simplified Strategies</li>
<li><i class="fa-solid fa-check"></i>More...</li>
</ul>
<button class="btn">Subscribe</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js " integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin=" anonymous " referrerpolicy="no-referrer "></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
var splide3 = new Splide('.splide3', {
type: 'loop',
autoplay: true,
pauseOnHover: true,
loop: true,
pauseOnFocus: true,
pauseOnInteract: true,
width: 1000,
pagination: false,
arrows: false,
height: 80,
interval: 4000,
perPage: 4,
speed: 20000,
flickpower: 2000,
});
splide3.mount();
var splide2 = new Splide('.splide2', {
type: 'loop',
autoplay: true,
pauseOnHover: true,
loop: true,
pauseOnFocus: true,
pauseOnInteract: true,
width: 600,
pagination: false,
arrows: false,
height: 320,
direction: 'ttb',
interval: 2000
});
splide2.mount();
var splide1 = new Splide('.splide1', {
type: 'loop',
autoplay: true,
pauseOnHover: true,
loop: true,
pauseOnFocus: true,
pauseOnInteract: true,
width: 600,
pagination: false,
arrows: false,
height: 320,
direction: 'ttb',
interval: 2000
});
splide1.mount();
$('.accordion-button').on('click', function() {
$(this).find('i').toggleClass('fa-plus fa-xmark');
});
class Timer {
constructor(elementId, hours, minutes, seconds) {
this.elementId = elementId;
this.hours = hours
this.minutes = minutes;
this.seconds = seconds;
this.updateTimerDisplay();
setInterval(() => this.countdown(), 1000);
}
// Timer görüntüsünü güncelleme fonksiyonu
updateTimerDisplay() {
const timerElement = document.getElementById(this.elementId);
timerElement.querySelector('.hours').textContent = this.hours.toString().padStart(2, '0');
timerElement.querySelector('.minutes').textContent = this.minutes.toString().padStart(2, '0');
timerElement.querySelector('.seconds').textContent = this.seconds.toString().padStart(2, '0');
}
// Geri sayım fonksiyonu
countdown() {
if (this.seconds > 0) {
this.seconds--;
} else if (this.minutes > 0) {
this.seconds = 59;
this.minutes--;
} else if (this.hours > 0) {
this.minutes = 59;
this.seconds = 59;
this.hours--;
} else {
// Geri sayım tamamlandığında durdur
this.hours = 0; // 12 saat yerine 0 olarak gösterelim
this.minutes = 0;
this.seconds = 0;
return; // Durdurmak için çık
}
this.updateTimerDisplay();
}
}
// Timer örnekleri oluştur
const timer1 = new Timer('timer1', 12, 0, 0); // 12 saat 30 dakika geri sayım
const timer2 = new Timer('timer2', 12, 0, 0); // 12 saat 0 dakika 30 saniye geri sayım
</script>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
