flexbox-framework
Version:
A flex Css framework to build a responsive website using only the flexbox model and media queries.
198 lines (197 loc) • 8.19 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Css & Scss Framework for building responsive web apps.</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Description.">
<meta property="og:title" content="Description" />
<meta property="og:type" content="articles" />
<meta property="og:url" content="Your Url" />
<meta property="og:image" content="/assets/logo.png" />
<meta property="og:description" content="Web App Name - Description." />
<link rel="apple-touch-icon" href="Your Logo">
<link rel="shortcut icon" href="Your Url" type="image/x-icon">
<link rel="icon" href="Your Logo" type="image/x-icon">
<meta property="fb:app_id" content="your_app_id" />
<meta name="facebook:image:alt" content="Description">
<meta name="facebook:App Name" content="Description of app technical details. ">
<meta name="facebook:description" content="Description.">
<meta name="facebook:image" content="/assets/logo.png">
<meta name="facebook:image:alt" content="web app name">
<meta name="facebook:card" content="Your Url">
<meta name="twitter:site" content="@website-username">
<meta name="twitter:web app name" content="SEO Description. ">
<meta name="twitter:description" content="web app description.">
<meta name="twitter:image" content="your logo">
<meta name="twitter:card" content="Your Url">
<meta name="twitter:image:alt" content="web app name">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/e6e21676c0.js" crossorigin="anonymous"></script>
<!-- navigation css -->
<link rel="stylesheet" href="./src/styles/index.css">
<!-- main css -->
<link rel="stylesheet" href="./src/styles/main.css">
<!-- other styles -->
<link rel="stylesheet" href="./src/styles/styles.css">
<!-- calendar css -->
<link rel="stylesheet" href="./src/styles/calendar.css">
</head>
<body>
<!-- top level and navigation -->
<header>
<nav class="navbar bg-primary fixed-top">
<ul class="nav-items-left">
<li class="nav-item">
<a class="nav-logo" href="#!">
<i class="fa-brands fa-sass"></i>
</a>
</li>
<li class="nav-form">
<form action="">
<input type="search" placeholder="Search" aria-label="Search">
</form>
</li>
</ul>
<ul class="nav-items-right">
<!-- hidden drop down -->
<li class="dropdown">
<!-- menu icon revealed at a width of 862px -->
<a href="" class="drop-down-toggle">
<i class="fa-solid fa-bars"></i>
</a>
<!-- these are revealed on hover of the menu icon -->
<div class="drop-down-items">
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<form action="">
<input type="search" placeholder="Search" aria-label="Search" class="form-control">
</form>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="test.html">
Other Demo
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
link
</a>
</li>
</ul>
</nav>
</header>
<main style="margin-top: 190px; margin-bottom: 90px;">
<section class="container mb-8">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6">
<h1 class="fw-bold mb-1 display-5 fadeInDown">Using Flexbox for your next project</h1>
<p class="lead mb-1 fadeInLeft">
Components created with Css flexbox model, Sass and JavaScript. This framework has prebuilt navbars, buttons, cards and other components.
</p>
<a href="" class="btn btn-gradient-blue mb-3">Read Documentation</a> <a href="https://www.npmjs.com/package/flexbox-framework" target="_blank" class="btn mb-3 btn-gradient-blue">npm Install</a>
</div>
<div class="col-lg-6">
<img src="./assets/home-other-intro.png" class="img-fluid" alt="Using Flexbox for your next project">
</div>
</div>
</section>
<section class="container text-center" style="margin-top: 60px;">
<h2 class="display-5">Using Some Components</h2>
<p class="lead mb-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae, commodi corporis cum deleniti ea earum et ipsam magni, non quaerat ratione repellat repudiandae sint tempora, tenetur vitae voluptates!
</p>
<article class="row">
<div class="col-lg-3 mb-3">
<a href="">
<div class="card">
<h3>Front End</h3>
</div>
</a>
</div>
<div class="col-lg-3 mb-3">
<a href="">
<div class="card">
<h3>Back End</h3>
</div>
</a>
</div>
<div class="col-lg-3 mb-3">
<a href="">
<div class="card">
<h3>Deploying Apps</h3>
</div>
</a>
</div>
<div class="col-lg-3 mb-3">
<a href="">
<div class="card">
<h3>CMS and SEO</h3>
</div>
</a>
</div>
</article>
</section>
</main>
<footer class="footer-bg">
<div class="container">
<div class="row justify-content-center align-items-center mt-5">
<div class="col-lg-8 p-2">
<h5>Flex_Dev</h5>
<p>
Using Html, Css, Scss and JavaScript for building responsive web apps. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis cum dicta est impedit minus nihil quae, soluta. Beatae consequuntur dicta earum et laudantium nam officia perspiciatis praesentium repudiandae rerum.
</p>
</div>
<div class="col-lg-2 p-2">
<h5>Link</h5>
<p>
<a href="">link</a>
</p>
<p>
<a href="">link</a>
</p>
<p>
<a href="">link</a>
</p>
</div>
<div class="col-lg-2 p-2">
<h5>Link</h5>
<p>
<a href="">link</a>
</p>
<p>
<a href="">link</a>
</p>
<p>
<a href="">link</a>
</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="./src/scripts/calendar.js"></script>
<!--fake / test api script-->
<script type="text/javascript" src="./src/scripts/api.js"></script>
</body>
</html>