flexbox-framework
Version:
A flex Css framework to build a responsive website using only the flexbox model and media queries.
658 lines (631 loc) • 27.6 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 style="background-color: #000000;">
<!-- top level and navigation -->
<header class="mb-6">
<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="">
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>
<li class="nav-item">
<a class="nav-link" href="">
link
</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="container mb-7">
<div class="row justify-content-center align-items-center mb-4">
<div class="col-lg-7 p-2">
<h1 class="display-4 fw-bold text-white fadeInDown">Using Flex_Dev</h1>
<p class="lead mb-2 text-white fadeInLeft">
A flex Css framework to build a responsive website using only the flexbox model and media queries.
</p>
<a href="" class="btn btn-gradient-blue">Action Link Button</a>
</div>
<div class="col-lg-5 p-2">
<img src="./assets/intro.png" class="img-fluid" alt="Using Flex_Dev" loading="lazy">
</div>
</div>
<h2 class="h1 text-white text-center">Features of this framework</h2>
<article class="row mb-3">
<div class="col-lg-3 p-2">
<a href="">
<div class="card">
<h2 class="card-title">Flex Box Model</h2>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
</ul>
</div>
</a>
</div>
<div class="col-lg-3 p-2">
<a href="">
<div class="card">
<h2 class="card-title">Flex Box Model</h2>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
</ul>
</div>
</a>
</div>
<div class="col-lg-3 p-2">
<a href="">
<div class="card">
<h2 class="card-title">Flex Box Model</h2>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
</ul>
</div>
</a>
</div>
<div class="col-lg-3 p-2">
<a href="">
<div class="card">
<h2 class="card-title">Flex Box Model</h2>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</li>
</ul>
</div>
</a>
</div>
</article>
<aside class="row justify-content-center mb-3">
<div class="col-lg-10">
<h3 class="display-5 fw-bolder text-white">Responsive Design</h3>
<p class="text-white mb-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consequuntur deleniti enim est excepturi expedita hic, iusto laborum maxime nam natus optio reiciendis, rem! Consectetur eaque officia recusandae sequi voluptates.
</p>
<h3 class="display-5 text-white fw-bolder">Ready for React.js</h3>
<p class="text-white mb-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consequuntur deleniti enim est excepturi expedita hic, iusto laborum maxime nam natus optio reiciendis, rem! Consectetur eaque officia recusandae sequi voluptates.
</p>
<hr class="mb-3">
<h3 class="display-5 text-white mb-3 fw-bolder">SVG Page Loader Animated Icons</h3>
<svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="5s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</circle>
<circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="5s"
from="0 50 50"
to="-360 50 50"
repeatCount="indefinite" />
</circle>
<g fill="#fff">
<rect x="30" y="35" width="5" height="30">
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.1"/>
</rect>
<rect x="40" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.2"/>
</rect>
<rect x="50" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.3"/>
</rect>
<rect x="60" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.4"/>
</rect>
<rect x="70" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.5"/>
</rect>
</g>
</svg>
<!-- Loader 2 -->
<svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
<animateTransform
attributeName="transform"
dur="2s"
type="rotate"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</line>
<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
<animateTransform
attributeName="transform"
dur="15s"
type="rotate"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</line>
</svg>
<!-- Loader 3 -->
<svg version="1.1" id="L3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="4" cx="50" cy="50" r="44" style="opacity:0.5;"/>
<circle fill="#fff" stroke="#e74c3c" stroke-width="3" cx="8" cy="54" r="6" >
<animateTransform
attributeName="transform"
dur="2s"
type="rotate"
from="0 50 48"
to="360 50 52"
repeatCount="indefinite" />
</circle>
</svg>
<!-- Loader 4 -->
<svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.1"/>
</circle>
<circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.2"/>
</circle>
<circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
<animate
attributeName="opacity"
dur="1s"
values="0;1;0"
repeatCount="indefinite"
begin="0.3"/>
</circle>
</svg>
<!-- Loader 5 -->
<svg version="1.1" id="L5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 15 ; 0 -15; 0 15"
repeatCount="indefinite"
begin="0.1"/>
</circle>
<circle fill="#fff" stroke="none" cx="30" cy="50" r="6">
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 10 ; 0 -10; 0 10"
repeatCount="indefinite"
begin="0.2"/>
</circle>
<circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.3"/>
</circle>
</svg>
<!-- Loader 6 -->
<svg version="1.1" id="L6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="none" stroke="#fff" stroke-width="4" x="25" y="25" width="50" height="50">
<animateTransform
attributeName="transform"
dur="0.5s"
from="0 50 50"
to="180 50 50"
type="rotate"
id="strokeBox"
attributeType="XML"
begin="rectBox.end"/>
</rect>
<rect x="27" y="27" fill="#fff" width="46" height="50">
<animate
attributeName="height"
dur="1.3s"
attributeType="XML"
from="50"
to="0"
id="rectBox"
fill="freeze"
begin="0s;strokeBox.end"/>
</rect>
</svg>
<!-- Loader 7 -->
<svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#fff" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
<path fill="#fff" d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="-360 50 50"
repeatCount="indefinite" />
</path>
<path fill="#fff" d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="2s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>
<!-- Loader 8 -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
<animate
attributeName="height"
attributeType="XML"
dur="1s"
values="30; 100; 30"
repeatCount="indefinite"/>
</rect>
<rect x="17" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 20 50)">
<animate
attributeName="height"
attributeType="XML"
dur="1s"
values="30; 100; 30"
repeatCount="indefinite"
begin="0.1s"/>
</rect>
<rect x="40" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 40 50)">
<animate
attributeName="height"
attributeType="XML"
dur="1s"
values="30; 100; 30"
repeatCount="indefinite"
begin="0.3s"/>
</rect>
<rect x="60" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 58 50)">
<animate
attributeName="height"
attributeType="XML"
dur="1s"
values="30; 100; 30"
repeatCount="indefinite"
begin="0.5s"/>
</rect>
<rect x="80" fill="#fff" width="3" height="100" transform="translate(0) rotate(180 76 50)">
<animate
attributeName="height"
attributeType="XML"
dur="1s"
values="30; 100; 30"
repeatCount="indefinite"
begin="0.1s"/>
</rect>
</svg>
<!-- Loader 9 -->
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<rect x="20" y="50" width="4" height="10" fill="#fff">
<animateTransform attributeType="xml"
attributeName="transform" type="translate"
values="0 0; 0 20; 0 0"
begin="0" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="30" y="50" width="4" height="10" fill="#fff">
<animateTransform attributeType="xml"
attributeName="transform" type="translate"
values="0 0; 0 20; 0 0"
begin="0.2s" dur="0.6s" repeatCount="indefinite" />
</rect>
<rect x="40" y="50" width="4" height="10" fill="#fff">
<animateTransform attributeType="xml"
attributeName="transform" type="translate"
values="0 0; 0 20; 0 0"
begin="0.4s" dur="0.6s" repeatCount="indefinite" />
</rect>
</svg>
<!-- Loader 10 -->
<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="1s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</path>
</svg>
</div>
</aside>
<div class="wrapper mb-4">
<div class="container-calendar">
<div class="row">
<div class="col-lg-5 p-2">
<div id="left">
<h1>Dynamic Calendar</h1>
<div id="event-section">
<h3>Add Event</h3>
<input type="date" id="eventDate">
<input type="text"
id="eventTitle"
placeholder="Event Title">
<input type="text"
id="eventDescription"
placeholder="Event Description">
<button id="addEvent" onclick="addEvent()">
Add
</button>
</div>
<div id="reminder-section">
<h3>Reminders</h3>
<!-- List to display reminders -->
<ul id="reminderList">
<li data-event-id="1">
<strong>Event Title</strong>
- Event Description on Event Date
<button class="delete-event"
onclick="deleteEvent(1)">
Delete
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-7 p-2">
<div id="right">
<h3 id="monthAndYear"></h3>
<div class="button-container-calendar">
<button id="previous"
onclick="previous()">
‹
</button>
<button id="next"
onclick="next()">
›
</button>
</div>
<table class="table-calendar"
id="calendar"
data-lang="en">
<thead id="thead-month"></thead>
<!-- Table body for displaying the calendar -->
<tbody id="calendar-body"></tbody>
</table>
<div class="footer-container-calendar">
<label for="month">Jump To: </label>
<!-- Dropdowns to select a specific month and year -->
<select id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<!-- Dropdown to select a specific year -->
<select id="year" onchange="jump()"></select>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br><br><br>
</main>
<footer class="footer-bg mt-5">
<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>