<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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">
<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>
<!--Tailwind CSS -->
<link href="/tailwind.css" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- Google Fonts -->
<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=Josefin+Sans:wght@200&family=Qahiri&family=Zen+Loop&display=swap" rel="stylesheet">
<title>introvert.org</title>
</head>
<style type="text/css">
*{
font-family: 'Josefin Sans', sans-serif;*/
/*font-family: 'Qahiri', sans-serif;*/
/*font-family: 'Zen Loop', cursive;*/
}
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
font-family: 'Zen Loop', cursive;
background-image:url("https://source.unsplash.com/daily");
color:white;
font-weight:bolder;
margin-top:-5px;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
body{
background-color:#111828;
}
</style>
<body>
<!-- HEADER -->
<header class="text-gray-400 bg-gray-900 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">iNTROVERT</span>
</a>
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700 flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-white">Home</a>
<a class="mr-5 hover:text-white">Blogs</a>
<a class="mr-5 hover:text-white">Quotes</a>
<a class="mr-5 hover:text-white">About us</a>
</nav>
</div>
</header>
<!--Carousel-->
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1200">
<img src="https://source.unsplash.com/1600x900/?alone,darkside,darkness,quotes,quote" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Welcome to inTROVERT</h5>
<p>Know the LIFE</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="1200">
<img src="https://source.unsplash.com/1600x900/?universe,legends,legend,upset,alone" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="1200">
<img src="https://source.unsplash.com/1600x900/?alon, faded, alan walker" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- BLOCK QUOTES -->
<br> <blockquote>
<h3 style="font-family: 'Qahiri', sans-serif">Quotes of the day</h3>
<br><br> <p> If you want to bright like a sun,
First burn like a sun.<br></p>
<small>- APJ Abdul Kalam</small>
</blockquote>
<!-- TOP BLOG -->
<section class="text-gray-400 body-font bg-gray-900">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h2 class="text-xs text-green-400 tracking-widest font-medium title-font mb-1"> Top Blogs</h2>
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Title of the blogs</h1>
<small>Auther</small>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac humblebrag.</p>
</div>
<div class="flex flex-wrap">
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
<h2 class="text-lg sm:text-xl text-white font-medium title-font mb-2">Join our club</h2>
<p id = "blog1" class="leading-relaxed text-base mb-4">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
<button onClick="readMore1()" class="btnBlog text-green-400 inline-flex items-center">Read More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div><br>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
<h2 class="text-lg sm:text-xl text-white font-medium title-font mb-2">Life of a Legends</h2>
<p id ="blog2" class="leading-relaxed text-base mb-4">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
<button onClick="readMore2()" class=" btnBlog text-green-400 inline-flex items-center">Read More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div><br>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
<h2 class="text-lg sm:text-xl text-white font-medium title-font mb-2">Introvert VS Extrovert</h2>
<p id="blog3" class="leading-relaxed text-base mb-4">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
<button onClick="readM()" class="btnBlog text-green-400 inline-flex items-center">Read More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div><br>
<div class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
<h2 class="text-lg sm:text-xl text-white font-medium title-font mb-2">Be happy and spread happieness</h2>
<p id ="blo" class="leading-relaxed text-base mb-4">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
<button onClick="read()" class=" btnBlog text-green-400 inline-flex items-center">Read More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<button class="flex mx-auto mt-16 text-white bg-green-500 border-0 py-2 px-8 focus:outline-none hover:bg-green-600 rounded text-lg">See All Blogs</button>
</div>
</section>
<!--GALLARY -->
<section class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex w-full mb-20 flex-wrap">
<h1 class="sm:text-3xl text-2xl font-medium title-font text-white lg:w-1/3 lg:mb-0 mb-4">Master Cleanse Reliac Heirloom</h1>
<p class="lg:pl-6 lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom.</p>
</div>
<div class="flex flex-wrap md:-m-2 -m-1">
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/500x300">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/501x301">
</div>
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src="https://dummyimage.com/600x360">
</div>
</div>
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block" src="https://dummyimage.com/601x361">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/502x302">
</div>
<div class="md:p-2 p-1 w-1/2">
<img alt="gallery" class="w-full object-cover h-full object-center block" src="https://dummyimage.com/503x303">
</div>
</div>
</div>
</div>
</section>
<!--FOOTER -->
<footer class="text-gray-400 bg-gray-900 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap md:text-left text-center order-first">
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-400 hover:text-white">Blogs</a>
</li>
<li>
<a class="text-gray-400 hover:text-white">Quotes</a>
</li>
<li>
<a class="text-gray-400 hover:text-white">About us</a>
</li>
<li>
<a class="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-white tracking-widest text-sm mb-3">SUBSCRIBE</h2>
<div class="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
<div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
<label for="footer-field" class="leading-7 text-sm text-gray-400">Write your comments to us</label>
<input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:bg-transparent focus:ring-2 focus:ring-green-900 focus:border-green-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded">Button</button>
</div>
<p class="text-gray-500 text-sm mt-2 md:text-left text-center">Bitters chicharrones fanny pack
<br class="lg:block hidden">waistcoat green juice
</p>
</div>
</div>
</div>
<div class="bg-gray-800 bg-opacity-75">
<div class="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">iNTROVERT</span>
</a>
<p class="text-sm text-gray-400 sm:ml-6 sm:mt-0 mt-4">© 2020 iTROVERT —
<a href="https://twitter.com/knyttneve" class="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">@knyttneve</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a class="text-gray-400">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-400">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-400">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-400">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
</footer>
</body>
<script>
var blog1 =document.getElementById("blog1")
function readMore1(){
blog1.innerHTML = "OK1"
}
var blog2 =document.getElementById("blog2")
function readMore2(){
blog2.innerHTML = "OK2"
}
var blog3 =document.getElementById("blog3")
function readM(){
blog3.innerHTML = "OKKkkK3"
}
var blo =document.getElementById("blo")
function read(){
blo.innerHTML = "OLast BlK3"
}
</script>
</html>
Comments
Post a Comment