Mirrors/tailShape
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added timeline , register ,section , eoor ,contact , blog ,article block component's

Browse Source
This commit is contained in:
merajjahir
2022-03-03 00:56:55 +06:00
parent ee869d7cf5
commit 3c5f1a77b7
61 changed files with 12279 additions and 1306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
public/componets/contact/7_contact.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../../../dist/tailshape.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<title>Contact 7 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- contact 7 start -->
<section class="section_divider" id="contact_7">
<div>Contact 7</div>
</section>
<!-- component -->
<section class="w-full text-gray-900 py-36 bg-center bg-cover bg-no-repeat bg-[url('https://images.unsplash.com/photo-1623479322729-28b25c16b011?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=1280')]" >
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-4 flex items-center justify-center">
<div class="lg:w-3/6 lg:pr-0 pr-0">
<h1 class="font-medium text-5xl text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p class="leading-relaxed mt-4 text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="lg:w-3/6 xl:w-2/5 md:w-full bg-gray-50 dark:bg-gray-800 p-8 flex flex-col lg:ml-auto w-full mt-10 lg:mt-0 rounded-md">
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
<input type="text" id="name" name="name" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
<input type="email" id="email" name="email" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Phone</label>
<input type="email" id="phone" name="phone" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
<textarea id="message" name="message" rows="4" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out"> </textarea>
</div>
<button class="text-white bg-indigo-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-300 dark:text-gray-800 dark:font-bold text-lg">Submit</button>
</div>
</div>
</section>
<!-- contact 7 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");
let doc_html_el = document.getElementsByTagName('html')[0];
doc_html_el.addEventListener('keyup',(e)=>{
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
if(e.ctrlKey && e.keyCode =='220'){
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
}
})
doc_html_el.addEventListener('keyup',(e)=>{
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
if(e.ctrlKey && e.keyCode =='191'){
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
}
})
toogler.addEventListener('click',()=>{
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
console.log(doc_html_el.className);
})
</script>
<!-- end of script section -->
</body>
</html>