-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
3 lines (3 loc) · 20.2 KB
/
index.html
1
2
3
<!DOCTYPE html ><!-- HTML5--><html lang="en"><head><!-- Set character encoding for the document--><meta charset="UTF-8"/><!-- Document Title--><title>GuttenBerry | Home</title><!-- Meta Description--><meta name="description" content="How to Create A Perfect Blog With GuttenBerry"/><meta name="author" href="../../humans.txt"/><meta name="keywords" content="HTML, CSS, JavaScript, bootstrap"/><link rel="canonical" href="https://mohammed-taysser.github.io/Gutenberry/"/><!-- To run web application in full-screen--><meta name="apple-mobile-web-app-capable" content="yes"/><!-- Status Bar Style (see Supported Meta Tags below for available values)--><!-- Has no effect unless you have the previous meta tag--><meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- for IE--><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!--if lt IE 9script(src='dist/javascript/libs/html5shiv.min.js')
script(src='dist/javascript/libs/respond.min.js')
--><!-- Viewport for responsive web design--><meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- deal with search engin--><link rel="manifest" href="app.webmanifest" crossorigin="use-credentials"/><!-- Open Graph--><meta property="og:type" content="website"/><meta property="og:title" content="home"/><meta property="og:description" content="How to Create A Perfect Blog With GuttenBerry"/><meta property="og:url" content="https://mohammed-taysser.github.io/Gutenberry/"/><meta property="og:image" content="dist/images/background/bg-website-card.webp"/><!-- twitter cards--><meta name="twitter:card" content="app"/><meta name="twitter:title" content="Home"/><meta name="twitter:site" content="@username"/><!-- username--><meta name="twitter:description" content="How to Create A Perfect Blog With GuttenBerry"/><meta name="twitter:image" content="dist/images/background/bg-website_card.jpg"/><!-- alt for image--><meta name="twitter:image:alt" content="website_title"/><!-- android devices--><meta name="twitter:app:name:googleplay" content=""/><meta name="twitter:app:url:googleplay" content=""/><meta name="twitter:app:id:googleplay" content=""/><!-- ipad devices--><meta name="twitter:app:name:ipad" content=""/><meta name="twitter:app:url:ipad" content=""/><meta name="twitter:app:id:ipad" content=""/><!-- iphone devices--><meta name="twitter:app:name:iphone" content=""/><meta name="twitter:app:url:iphone" content=""/><meta name="twitter:app:id:iphone" content=""/><!-- style sheet--><link rel="stylesheet" href="dist/css/libs/fontawesome.min.css"/><link rel="stylesheet" href="dist/css/core.min.css"/><!-- Standard favicon--><!-- link(rel="icon" type="image/x-icon" href="https://example.com/favicon.ico")--><!-- Recommended favicon format--><link rel="icon" type="image/png" href="dist/images/icons/favicon.png"/><!-- favicon--><link rel="apple-touch-icon" sizes="180x180" href="dist/images/icons/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="dist/images/icons/favicon@3x.png"/><link rel="icon" type="image/png" sizes="16x16" href="dist/images/icons/favicon@2x.png"/><link rel="mask-icon" href="dist/images/icons/favicon.png" color="#9400ff"/><meta name="theme-color" content="#9400ff"/><meta name="theme-color" media="(prefers-color-scheme: light)" content="#9400ff"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#9400ff"/><meta name="application-name" content="GuttenBerry"/><meta name="msapplication-tooltip" content="How to Create A Perfect Blog With GuttenBerry."/><meta name="msapplication-TileColor" content="#fff"/><meta name="msapplication-navbutton-color" content="#9400ff"/><noscript>You need to enable JavaScript to run this app.</noscript></head><body class="load"> <div class="loading-overlay"></div><div class="loading-container" id="js-loading-container"><div class="loading-divider" aria-hidden="true"></div><p class="loading-text" aria-label="Loading"><span class="letter" aria-hidden="true">L</span><span class="letter" aria-hidden="true">o</span><span class="letter" aria-hidden="true">a</span><span class="letter" aria-hidden="true">d</span><span class="letter" aria-hidden="true">i</span><span class="letter" aria-hidden="true">n</span><span class="letter" aria-hidden="true">g</span></p></div><nav class="secondary-background-color py-3 position-relative"><div class="container"><div class="d-flex justify-content-between align-items-center"><a class="brand text-dark text-decoration-none" href="dist/html/index.html"><img src="dist/images/icons/favicon.png" alt="favicon" width="100" height="50"/></a><div class="close-button ms-auto" id="js-close-button"><span></span><span></span><span></span></div><div class="main-links" id="js-main-links"><ul class="list-unstyled m-0"><li class="custom-nav-link active"><a class="nav-link active" href="dist/html/index.html">Home</a></li><li class="custom-nav-link my-2 my-md-0"><a class="nav-link" href="dist/html/articles.html">articles</a></li><li class="custom-nav-link position-relative"><div class="custom-dropdown"><a class="nav-link custom-dropdown-link" href="#">pages<svg class="bi bi-caret-down-fill d-none d-md-inline-block" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewbox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"></path></svg></a><ul class="custom-dropdown-menu list-unstyled ps-4"><li class="custom-dropdown-item"><a class="text-decoration-none" href="dist/html/login.html">login</a></li><li class="custom-dropdown-item"><a class="text-decoration-none" href="dist/html/register.html">register</a></li><li class="custom-dropdown-item"><a class="text-decoration-none" href="dist/html/about-us.html">about us</a></li><li class="custom-dropdown-item"><a class="text-decoration-none" href="dist/html/search.html">search</a></li><li class="custom-dropdown-item"><a class="text-decoration-none" href="dist/html/404.html">404 page</a></li></ul></div></li><li class="custom-nav-link my-2 my-md-0"><a class="nav-link" href="dist/html/contact-us.html">contact us</a></li><li class="custom-nav-link my-2 my-md-0"><a class="nav-link nav-link" href="dist/html/profile.html"><img class="d-inline-block align-top rounded-circle" src="dist/images/icons/icon-profile.webp" width="25" height="25" alt="profile"/> hello Mohammed</a></li><li class="custom-nav-link my-2 my-md-0"><a class="search-button nav-link ms-3 ms-ms-0" id="search-button" href="#" title="search"><i class="fas fa-search"></i></a></li></ul></div><div class="search-popup" id="search-popup"><div class="content w-75 position-relative"><form action="dist/html/search.html"><input class="input-search w-100" type="search" placeholder="What are you looking for ?" value="" name="query" id="js-search-navbar" autocomplete="off" maxlength="2048" tabindex="1"/><button type="submit" aria-label="search"><i class="fas fa-search text-aurora"></i></button></form></div></div></div></div></nav><header><div class="container my-5"><div class="row"><div class="col-lg-4"><h1 class="my-3">How to create a perfect blog with <span class="bg-aurora text-white py-1 pl-1">Gutenberg</span>?</h1><p class="lead">The famous Gutenberg editor has got three new visual blocks with the diversity of the effects.</p><a class="text-aurora text-decoration-none" href="dist/html/about-us.html">learn how to start<i class="fas fa-arrow-right ms-1"></i></a></div><div class="col-lg-8"><div class="img"><img class="img-fluid" src="dist/images/background/bg-header.webp" alt="header imag" width="100%" height="100%"/></div></div></div></div></header><section class="latest-news main-background-color py-5"><div class="container"><h2 class="mb-4 special-header h1">Latest news</h2><div class="row justify-content-center align-items-center align-items-stretch"><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-1.webp" alt="How to work with the chess layout for Gutenberg?" width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="How to work with the chess layout for Gutenberg?">How to work with the chess layout for Gutenberg?</a><p class="text-muted">Here you will learn how to easy and quickly use blocks as a tool for creating attractive content.</p><a class="text-danger" href="post-details.html" title="How to work with the chess layout for Gutenberg?">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-2.webp" alt="Top-5 ways to minimalism with the grid layouts." width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Top-5 ways to minimalism with the grid layouts.">Top-5 ways to minimalism with the grid layouts.</a><p class="text-muted">It is not always the big amount of details make your photo interesting. Sometimes small things are better.</p><a class="text-danger" href="post-details.html" title="Top-5 ways to minimalism with the grid layouts.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-3.webp" alt="Easy tips on how to add pictures in the gallery." width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Easy tips on how to add pictures in the gallery.">Easy tips on how to add pictures in the gallery.</a><p class="text-muted">The developer company created new techniques which help to design simply dynamic content and images.</p><a class="text-danger" href="post-details.html" title="Easy tips on how to add pictures in the gallery.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-4.webp" alt="New ZeGuten plugin with widgets for content." width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="New ZeGuten plugin with widgets for content.">New ZeGuten plugin with widgets for content.</a><p class="text-muted">The company announced about the new ZeGuten plugin which will be available for selling later this year.</p><a class="text-danger" href="post-details.html" title="New ZeGuten plugin with widgets for content.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-5.webp" alt="Main steps to perfect content with Gutenberg." width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Main steps to perfect content with Gutenberg.">Main steps to perfect content with Gutenberg.</a><p class="text-muted">Create unique blocks easily with just a few clicks. All about new technologies, rules and not only.</p><a class="text-danger" href="post-details.html" title="Main steps to perfect content with Gutenberg.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-sm-6 col-lg-4 my-3"><div class="single-news bg-white nice-shadow rounded h-100"><div class="img-container rounded-top"> <img class="img-fluid rounded-top" src="dist/images/background/blog/bg-blog-6.webp" alt="Your site can work quickly without errors." width="100%" height="200px"/></div><div class="content p-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Your site can work quickly without errors.">Your site can work quickly without errors.</a><p class="text-muted">The fast work of the site is ensured by the correct arrangement of all content blocks and layouts.</p><a class="text-danger" href="post-details.html" title="Your site can work quickly without errors.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div></div><div class="text-center my-5"><a class="h5 view-more-btn" href="dist/html/articles.html">View all articles</a></div></div></section><section class="newsletter text-center text-lg-left py-5" style="background-image: linear-gradient(#000000a3, #0000009c), url('dist/images/background/bg-newslatter.webp');"><div class="container my-5 py-5"><div class="row justify-content-center align-items-center"><div class="col-lg-6 my-3"><h3 class="my-3 text-white">SIGN UP FOR OUR NEWSLETTER AND BE THE FIRST WHO KNOW OUR LATEST NEWS!</h3></div><div class="col-lg-6 my-3"><form class="subscription position-relative" method="" action=""><input type="email" name="email" placeholder="Email address" required=""/><button class="news-letter-btn gradient-btn transition d-inline-flex align-items-center" aria-label="send message"><span class="text-white">Get Started <i class="fas fa-arrow-right ms-1"></i></span></button></form></div></div></div></section><section class="recent-trends py-5"><div class="container"><h2 class="mb-4 special-header h1">Recent trends</h2><div class="row justify-content-center align-items-center"><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-1.webp" alt="How to work with the chess layout for Gutenberg?" width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="How to work with the chess layout for Gutenberg?">How to work with the chess layout for Gutenberg?</a><p class="text-muted">Here you will learn how to easy and quickly use blocks as a tool for creating attractive content.</p><a class="text-danger" href="post-details.html" title="How to work with the chess layout for Gutenberg?">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-2.webp" alt="Top-5 ways to minimalism with the grid layouts." width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Top-5 ways to minimalism with the grid layouts.">Top-5 ways to minimalism with the grid layouts.</a><p class="text-muted">It is not always the big amount of details make your photo interesting. Sometimes small things are better.</p><a class="text-danger" href="post-details.html" title="Top-5 ways to minimalism with the grid layouts.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-3.webp" alt="Easy tips on how to add pictures in the gallery." width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Easy tips on how to add pictures in the gallery.">Easy tips on how to add pictures in the gallery.</a><p class="text-muted">The developer company created new techniques which help to design simply dynamic content and images.</p><a class="text-danger" href="post-details.html" title="Easy tips on how to add pictures in the gallery.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-4.webp" alt="New ZeGuten plugin with widgets for content." width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="New ZeGuten plugin with widgets for content.">New ZeGuten plugin with widgets for content.</a><p class="text-muted">The company announced about the new ZeGuten plugin which will be available for selling later this year.</p><a class="text-danger" href="post-details.html" title="New ZeGuten plugin with widgets for content.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-5.webp" alt="Main steps to perfect content with Gutenberg." width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Main steps to perfect content with Gutenberg.">Main steps to perfect content with Gutenberg.</a><p class="text-muted">Create unique blocks easily with just a few clicks. All about new technologies, rules and not only.</p><a class="text-danger" href="post-details.html" title="Main steps to perfect content with Gutenberg.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div><div class="col-lg-6 my-3"><div class="single-trend bg-white nice-shadow d-md-flex justify-content-center align-items-center"><div class="img-container rounded-start"><img class="img-fluid rounded-start" src="dist/images/background/blog/bg-blog-6.webp" alt="Your site can work quickly without errors." width="100%" height="200px"/></div><div class="content px-3"><a class="h5 d-inline-block my-2" href="post-details.html" title="Your site can work quickly without errors.">Your site can work quickly without errors.</a><p class="text-muted">The fast work of the site is ensured by the correct arrangement of all content blocks and layouts.</p><a class="text-danger" href="post-details.html" title="Your site can work quickly without errors.">continue reading<i class="fas fa-arrow-right ms-1"></i></a></div></div></div></div><div class="text-center my-5"><a class="h5 view-more-btn" href="dist/html/articles.html">View all trends</a></div></div></section><footer class="footer py-5 main-background-color text-center"><div class="shapes"> <img class="dotted-shape" src="dist/images/icons/dotted-shape.svg" alt="dotted-shape"/></div><div class="container my-5 py-5"><a class="brand text-dark my-3 text-decoration-none h4" href="dist/html/index.html" title="homepage"><img class="img-fluid" src="dist/images/icons/favicon.png" alt="favicon" width="200" height="100"/></a><p class="text-muted mt-4">Your perfect assistant in the posting world. Now add chess layouts, create a perfect content and form minimal design easy with the Gutenberg. Get ready to be the best on the web! Make it simple, but significant!</p><ul class="m-0 list-unstyled d-flex justify-content-center"><li class="m-1 p-2 custom-nav-link"><a class="text-decoration-none" href="dist/html/index.html" title="homepage">home</a></li><li class="m-1 p-2 custom-nav-link"><a class="text-decoration-none" href="dist/html/articles.html" title="articles">articles</a></li><li class="m-1 p-2 custom-nav-link"><a class="text-decoration-none" href="dist/html/about-us.html" title="about us">about</a></li><li class="m-1 p-2 custom-nav-link"><a class="text-decoration-none" href="dist/html/contact-us.html" title="contact us">contact</a></li></ul><small class="text-muted">Copyright © 2021-<span id="current_year">1000</span> All rights reserved | <i class="fas fa-code"></i> with <i class="far fa-heart"></i> by <a href="https://github.com/Mohammed-Taysser" title="developer github homepage">Mohammed Taysser</a></small></div></footer><script src="dist/javascript/libs/bootstrap.bundle.min.js"></script><script src="dist/javascript/libs/cropper.min.js"></script><script src="dist/javascript/libs/autoComplete.min.js"></script><script src="dist/javascript/core.min.js"></script></body></html>