Commit 6db60529 authored by Thodoris Papadopoulos's avatar Thodoris Papadopoulos

updated examples and images (index.html)

parent 39ec8f15
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>GOV.GR - Bootstrap Theme Kit</title>
<link rel="shortcut icon" href="./images/gov_logo_16x16_favicon.png">
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="./css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./index.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Header -->
<header class="bg-primary mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-8">
<div class="logo_govgr"></div>
<h1 class="display-4 text-white mt-5 mb-2">Bootstrap Theme Kit</h1>
<p class="lead mb-5 text-white-50">
A project to help you get started quickly when developing a GOV.GR-like website using Bootstrap.
It includes a project structure with a gulp script that builds a custom CSS version of Bootstrap 4, according to the styling guidelines of GOV.GR</p>
</div>
<div class="col-lg-4">
<img src="./images/govgr-bootstrap-theme.png" />
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row mb-3">
<div class="col-md-8 themed-grid-col"> <!-- left column (on desktop) -->
<div class="pb-3">
<h2>Page Templates</h2>
<p> reference page templates </p>
</div>
<div class="row">
<div class="col-md-6 themed-grid-col">
<div class="card h-100">
<img class="card-img-top" src="./images/screencapture-base.png" alt="Base Page">
<div class="card-body">
<h4 class="card-title">Base</h4>
<p class="card-text">A starter base page.</p>
</div>
<div class="card-footer">
<a href="./templates/base/base.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-6 themed-grid-col">
<div class="card h-100">
<img class="card-img-top" src="./images/screencapture-login.png" alt="Login Page">
<div class="card-body">
<h4 class="card-title">Login Page</h4>
<p class="card-text">A page with a login form.</p>
</div>
<div class="card-footer">
<a href="./templates/login/login.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
</div>
<div class="row py-5">
<div class="col-md-6 themed-grid-col">
<div class="card h-100">
<img class="card-img-top" src="./images/screencapture-landingpage.png" alt="Landing Page">
<div class="card-body">
<h4 class="card-title">Landing Page 1</h4>
<p class="card-text">A sample landing page, using a large header with title and subtitle.</p>
</div>
<div class="card-footer">
<a href="./templates/landingpage/landingpage.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-6 themed-grid-col">
<div class="card h-100">
<img class="card-img-top" src="./images/screencapture-landingpage2.png" alt="Landing Page 2">
<div class="card-body">
<h4 class="card-title">Landing Page 2</h4>
<p class="card-text">A landing page with a small header and a second logo.</p>
</div>
<div class="card-footer">
<a href="./templates/landingpage/landingpage2.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 border-left"> <!-- right column (on desktop) -->
<h2>Components </h2>
<p></p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Components
</a>
<a href="./components/header/header.html" class="list-group-item list-group-item-action">Header</a>
<a href="./components/footer/footer.html" class="list-group-item list-group-item-action">Footer</a>
<a href="./components/alert/alert.html" class="list-group-item list-group-item-action">Alert</a>
<a href="./components/button/button.html" class="list-group-item list-group-item-action">Button</a>
<a href="./components/input/input.html" class="list-group-item list-group-item-action">Input</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Menu</a>
</div>
<p class="py-5">
<a href="./templates/reference/reference.html">Bootstrap Reference page</a>
</p>
</div>
</div> <!-- end row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; 2020 GOV.GR</p>
<p> GOVGR unit </p>
</div>
</footer>
<!-- Put any javaScript scripts here-->
</body>
</html>
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>GOV.GR - Bootstrap Theme Kit</title>
<link rel="shortcut icon" href="../images/gov_logo_16x16_favicon.png">
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./index.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="bg-primary mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-8">
<div class="logo_govgr"></div>
<h1 class="display-4 text-white mt-5 mb-2">Bootstrap Theme Kit</h1>
<p class="lead mb-5 text-white-50">
A project to help you get started quickly when developing a GOV.GR-like website using Bootstrap.
It includes a project structure with a gulp script that builds a custom CSS version of Bootstrap 4, according to the styling guidelines of GOV.GR</p>
</div>
<div class="col-lg-4">
<img src="../images/govgr-bootstrap-theme.png" />
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-8 mb-5">
<h2>Page Examples</h2>
<hr>
<p>See reference implementations of pages build using the theme. </p>
</div>
<div class="col-md-4 mb-5">
<h2>Get The Code</h2>
<hr/>
<p> You can grab the code and start developing from the
<a href="https://gitlab.grnet.gr/govgr-unit/govgr-bootstrap-theme-kit">gitlab repository</a>
</p>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="../images/screencapture-landingpage.png" alt="Landing Page">
<div class="card-body">
<h4 class="card-title">Landing Page 1</h4>
<p class="card-text">A sample landing page, using a large header with title and subtitle.</p>
</div>
<div class="card-footer">
<a href="./landingpage/landingpage.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="../images/screencapture-landingpage2.png" alt="Landing Page 2">
<div class="card-body">
<h4 class="card-title">Landing Page 2</h4>
<p class="card-text">A landing page with a small header and a second logo (on the right).</p>
</div>
<div class="card-footer">
<a href="./landingpage/landingpage2.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="../images/screencapture-landingpage3.png" alt="Login Page">
<div class="card-body">
<h4 class="card-title">Landing Page 3</h4>
<p class="card-text">A landing page that includes a login form.</p>
</div>
<div class="card-footer">
<a href="./landingpage/landingpage3.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; 2020 GOV.GR</p>
</div>
</footer>
<!-- Put necessary JavaScript scripts here-->
</body>
</html>
......@@ -14,42 +14,33 @@
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../../css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Header and Footer styles -->
<link href="../../components/header/header.css" rel="stylesheet">
<link href="../../components/footer/footer.css" rel="stylesheet">
<!-- Custom styles for this template -->
</head>
<body>
<!-- Header Small-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <a class="navbar-brand" href="#!">Navbar</a> -->
<a href="/" class="navbar-brand"><div class="logo_govgr logo_small"></div></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
<li class="nav-item active">
<a class="nav-link" href="#!">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#!">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</form>
</div>
</nav>
<!-- Header -->
<header class="bg-primary">
<div class="container pb-4 pt-4">
<div class="d-flex flex-row justify-content-start py-2">
<div class="text-center text-sm-left pl-4 gov-logo-seperator">
<a class="logo_govgr logo_small" href="https://gov.gr"></a>
</div>
<div class="organization-logo ml-4">
<a href="https://test.gov.gr"><img src="../../images/org_logo.png" height="35"></a>
</div>
<div class="d-flex pl-4 justify-content-end flex-nowrap text-nowrap service-name">
<a href="" class="text-white text-decoration-none">Title service</a>
</div>
</div>
</div>
<div class="borderHeader"></div>
</header>
<div class="container-fluid">
<div class="row mt-3">
<div class="col-lg-3 col-md-6">
......@@ -545,12 +536,14 @@
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<footer class="footer mt-auto py-3 bg-primary">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; 2020 GOV.GR</p>
<div class="d-flex flex-column justify-content-center pt-2">
<p class="text-white font-weight-light text-center flex-grow-1 mb-0 pb-2">Μια υπηρεσία του</p>
<div class="mx-auto pb-4 logo_govgr logo_xsmall"></div>
</div>
</div>
</footer>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment