Commit 27aa0a5f authored by Thodoris Papadopoulos's avatar Thodoris Papadopoulos

changed all components to use flexbox

parent 0f79ff03
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
footer {
padding: 15px;
background: linear-gradient(315deg,#003476 .09%,#134a86);
background-image: linear-gradient(315deg, rgb(0, 52, 118) 0.09%, rgb(19, 74, 134));
background-position-x: initial;
......@@ -17,10 +10,8 @@ footer {
background-origin: initial;
background-clip: initial;
background-color: initial;
text-align: center;
}
footer p {
}
footer p {
font-size:0.85rem;
flex-grow: 1;
}
\ No newline at end of file
}
\ No newline at end of file
......@@ -2,7 +2,6 @@
<html lang="el" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
......@@ -24,24 +23,19 @@
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p class="lead">A footer pinned to the bottom of the viewport.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-primary">
<div class="container">
<div class="row pt-2">
<div class="col">
<div class="d-flex flex-column justify-content-center">
<p class="text-white mb-0 pb-2">Μια υπηρεσία του</p>
<div class=" pb-4">
<div class="mx-auto logo_govgr logo_xsmall"></div>
</div>
</div>
<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>
</div>
</footer>
</body>
</html>
\ No newline at end of file
......@@ -8,3 +8,18 @@ header .borderHeader {
height: 5px;
background:linear-gradient(358.5deg,#00aeef .09%,#134a86) ;
}
header .gov-logo-seperator {
border-right: 1px solid #10619f;
}
header .organization-logo img {
background: transparent;
height: 50px;
}
header .service-name {
font-size: 25px;
line-height: 50px;
}
......@@ -2,7 +2,6 @@
<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="">
......@@ -15,35 +14,25 @@
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="../../css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!-- Header styles -->
<link href="./header.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="bg-primary">
<div class="pb-4 container-fluid">
<div class="container">
<div class="row toping">
<div class="text-center text-sm-left pb-4 col-sm-4 col-md-3 col-12">
<a class="logo_govgr logo_small" href="https://gov.gr"></a>
</div>
<div class="col-sm-6 col-md-6 offset-sm-2 offset-md-3 col-12">
</div>
</div> <!-- row toping-->
</div> <!-- container -->
</div> <!-- container-fluid -->
<div class="borderHeader"></div>
</header>
</body>
<body class="d-flex flex-column">
<!-- 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 ">
<a class="logo_govgr logo_small" href="https://gov.gr"></a>
</div>
</div>
</div>
<div class="borderHeader"></div>
</header>
</body>
</html>
header .toping {
padding-top: 35px;
margin-bottom: -20px;
}
header .borderHeader {
border: 0;
height: 5px;
background:linear-gradient(358.5deg,#00aeef .09%,#134a86) ;
}
<!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 - Starter Template</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="./header.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="bg-primary">
<div class="pb-4 container-fluid">
<div class="container">
<div class="row toping">
<div class="text-center text-sm-left pb-4 col-sm-4 col-md-3 col-12">
<a class="logo_govgr logo_small" href="https://gov.gr"></a>
</div>
<div class="col-sm-6 col-md-6 offset-sm-2 offset-md-3 col-12">
</div>
</div> <!-- row toping-->
</div> <!-- container -->
</div> <!-- container-fluid -->
<div class="borderHeader"></div>
</header>
</body>
</html>
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
header .toping {
padding-top: 35px;
margin-bottom: -20px;
}
header .borderHeader {
border: 0;
height: 5px;
background:linear-gradient(358.5deg,#00aeef .09%,#134a86) ;
}
footer {
padding: 15px;
background: linear-gradient(315deg,#003476 .09%,#134a86);
background-image: linear-gradient(315deg, rgb(0, 52, 118) 0.09%, rgb(19, 74, 134));
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
text-align: center;
}
footer p {
font-size:0.85rem;
flex-grow: 1;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="el" class="h-100">
<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 - Starter Template</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="./base.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Header -->
<header class="bg-primary">
<div class="pb-4 container-fluid">
<div class="container">
<div class="row toping">
<div class="text-center text-sm-left pb-4 col-sm-4 col-md-3 col-12">
<a class="logo_govgr logo_small" href="https://gov.gr"></a>
</div>
<div class="col-sm-6 col-md-6 offset-sm-2 offset-md-3 col-12">
</div>
</div> <!-- row toping-->
</div> <!-- container -->
</div> <!-- container-fluid -->
<div class="borderHeader"></div>
</header>
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Heading 1</h1>
<p class="lead">Communicate your message.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-primary">
<div class="container">
<div class="row pt-2">
<div class="col">
<div class="d-flex flex-column justify-content-center">
<p class="text-white mb-0 pb-2">Μια υπηρεσία του</p>
<div class=" pb-4">
<div class="mx-auto logo_govgr logo_xsmall"></div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
<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 - Starter Template</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">
<!-- 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 -->
<link href="./base.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- 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>
<main role="main" class="flex-shrink-0">
<div class="container">
<div class="row mt-5">
<div class="col col-12 col-md-8">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="lead">Communicate your message.</p>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-primary">
<div class="container">
<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>
</body>
</html>
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