Merge remote-tracking branch 'origin/Development' into Development

This commit is contained in:
George Kalampokis 2020-05-29 11:36:47 +03:00
commit 1c91103781
10 changed files with 1218 additions and 293 deletions

View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="../assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Core theme CSS -->
<link href="../css/styles.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
<link href="../css/section.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="../index.html"><img src="../assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i
class="fas fa-bars ml-1"></i></button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn active-nav-link" onclick="dropdownToggle('aboutDropdown')"
href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')"
href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="../resources/media-kit.html">Media kit</a>
<a href="../resources/user-guide.html">User Guide</a>
<a href="../resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- FAQs -->
<section class="page-section how-it-works" id="how-it-works">
<div class="container-small">
<div class="col">
<div class="page-title">About</div>
</div>
<div class="col pt-5 pb-3">
<div class="row title-1">FAQs</div>
</div>
<div class="collapse-box">
<div class="panel-heading">
<div class="collapse-title">
<a data-toggle="collapse" href="#collapseFAQ-1" aria-expanded="true" aria-controls="collapseFAQ-1">What is ARGOS?</a>
</div>
</div>
<div class="collapse show" id="collapseFAQ-1">
<div class="faq-content">
ARGOS is an open and collaborative platform for creating Data Management Plans according to
funders or institutions open science policy requirements. ARGOS technology provides solutions
and workflows that connect the DMP to the actual data where they are stored and link to other
useful information such as publications and funding information, thus enabling the association
between research outputs and processes and leading to the creation of coherent/ complete
research entities. ARGOS is comprised of two major features: the ARGOS template and the Dataset
Description.
</div>
</div>
</div>
<div class="collapse-box">
<div class="panel-heading">
<div class="collapse-title">
<a data-toggle="collapse" href="#collapseFAQ-2" aria-expanded="true" aria-controls="collapseFAQ-2">Who is it for?</a>
</div>
</div>
<!-- <div class="collapse show" id="collapseFAQ-2">
<div class="faq-content"></div>
</div> -->
</div>
<div class="collapse-box">
<div class="panel-heading">
<div class="collapse-title">
<a data-toggle="collapse" href="#collapseFAQ-3" aria-expanded="true" aria-controls="collapseFAQ-3">How can I use it?</a>
</div>
</div>
<!-- <div class="collapse show" id="collapseFAQ-3">
<div class="faq-content"></div>
</div> -->
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and
Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i
class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i
class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i
class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i
class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under
</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

View File

@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="../assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Core theme CSS -->
<link href="../css/styles.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
<link href="../css/section.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="../index.html"><img src="../assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i
class="fas fa-bars ml-1"></i></button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn active-nav-link" onclick="dropdownToggle('aboutDropdown')"
href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')"
href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="../resources/media-kit.html">Media kit</a>
<a href="../resources/user-guide.html">User Guide</a>
<a href="../resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- How it works -->
<section class="page-section how-it-works" id="how-it-works">
<div class="container-small">
<div class="col">
<div class="page-title">About</div>
</div>
<div class="col pt-5 pb-2">
<div class="row title-1">How it works</div>
</div>
<p class="pt-2">
ARGOS is the joint effort of OpenAIRE and EUDAT to deliver an open platform for Data Management Planning
that addresses FAIR and Open best practices and assumes no barriers for its use and adoption.
</p>
<p class="pt-2">
It is an open extensible service - available as a standalone service (OpenDMP) and as a OpenAIRE service
(ARGOS)
- that simplifies the management, validation, monitoring and maintenance of Data Management Plans. It
allows actors (researchers, managers, supervisors etc) to create actionable DMPs that may be freely
exchanged among infrastructures for carrying out specific aspects of the Data management process in
accordance with the intentions and commitment of Data owners.
</p>
<p class="pt-2">
ARGOS is a service that is integrated within the OpenAIRE platform and is freely offered for use through
the
<a href="#"><u>OpenAIRE Service Catalogue</u></a> and the EOSC Catalogue. ARGOS enhances the OpenAIRE
Research Graph while at the same time utilises its
underlying services, external sources and semantics to add value to the Dataset Description templates it
produces thus increasing validation of DMPs. DMPs in ARGOS are treated as research outputs that can be
assigned DOIs, licenses and can be re-distributed in a FAIR manner.
</p>
<div class="text-box">
<p>
<b>The Name:</b> ARGOS is inspired by Greek mythology, both from
<a href="#"><u>Argus Panoptes</u></a> the hundred-eyed giant and
from <a href="#"><u>Argus (Argonaut)</u></a> builder of Argos ship, for the many-eyes monitoring sense and for the crafting
and building for endurance concealing long-term goals.
</p>
</div>
<p class="pt-2">
More details on ARGOS as registered in the OpenAIRE services catalogue is available here:
<a href="#"><u>http://catalogue.openaire.eu/service/openaire.argos</u></a>. ARGOS as a Data Management
Planning tool within
EOSC can be explored in the EOSC catalogue of services here:
<a href="#"><u>https://catalogue.eosc-portal.eu/service/openaire.argos</u></a>
</p>
<p class="pt-2 pb-5">
ARGOS is offered as a standalone service, where
users can download the source code and co-brand it. Read more on how to implement that in the
<a href="#"><u>Resources section</u></a>.
</p>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and
Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i
class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i
class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i
class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i
class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under
</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

View File

@ -31,9 +31,9 @@
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#howItWorks">How it works</a>
<a href="#roadmap">Roadmap</a>
<a href="#faqs">faqs</a>
<a href="about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="about/faqs.html">faqs</a>
</div>
</div>
</li>
@ -42,9 +42,9 @@
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#mediaKit">Media kit</a>
<a href="#userGuide">User Guide</a>
<a href="#coBranding">Co-branding</a>
<a href="resources/media-kit.html">Media kit</a>
<a href="resources/user-guide.html">User Guide</a>
<a href="resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
@ -58,10 +58,10 @@
<section class="page-section contact" id="contact">
<div class="container">
<div class="col ">
<div class="contact-title">Contact</div>
<div class="page-title">Contact</div>
</div>
<div class="main-contact">
<div class="col contact-subtitle"><div>Contact us to learn more</div></div>
<div class="col page-subtitle"><div>Contact us to learn more</div></div>
<div class="col required"><div>* Required fields</div></div>
<form class="form">
<!-- Full Name -->

View File

@ -1,23 +1,3 @@
.contact-title {
text-align: center;
font-weight: 700;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: -0.95px;
color: #212121;
opacity: 1;
}
.contact-subtitle {
text-align: left;
font-weight: 300;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 1;
}
.main-contact {
padding: 3rem 16.5rem;
}
@ -39,4 +19,4 @@
font-family: 'Roboto', sans-serif;
font-size: 1.12rem;
color: #212121;
}
}

View File

@ -1,206 +1,249 @@
section.start {
text-align: center;
color: #fff;
background: #23BCBA 0% 0% no-repeat padding-box;
text-align: center;
color: #fff;
background: #23BCBA 0% 0% no-repeat padding-box;
}
.template-img {
margin-right: 6.8rem;
margin-right: 6.8rem;
}
.options {
padding-top: 4rem;
padding-top: 4rem;
}
.option-row {
cursor: pointer;
cursor: pointer;
}
.option-number {
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 3.25rem;
line-height: 1;
letter-spacing: 0px;
color: #0E6978;
opacity: 1;
padding: 0rem 1rem;
text-align: left;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 3.25rem;
line-height: 1;
letter-spacing: 0px;
color: #0E6978;
opacity: 1;
padding: 0rem 1rem;
}
.option-text {
display: flex;
align-items: center;
text-align: left;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.56rem;
line-height: 1.68rem;
letter-spacing: 0px;
color: #FFFFFF;
display: flex;
align-items: center;
text-align: left;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.56rem;
line-height: 1.68rem;
letter-spacing: 0px;
color: #FFFFFF;
}
.selected {
opacity: 1;
opacity: 1;
}
.not-selected {
opacity: 0.6;
opacity: 0.6;
}
.features-layout {
display: flex;
justify-content: space-around;
padding-bottom: 4rem;
display: flex;
justify-content: space-around;
padding-bottom: 4rem;
}
.features-title {
display: flex;
justify-content: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
padding-bottom: 3rem;
color: #212121;
opacity: 1;
display: flex;
justify-content: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
padding-bottom: 3rem;
color: #212121;
opacity: 1;
}
.feature-subtitle {
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 1.87rem;
padding: 1.5rem 0rem;
color: #000000;
opacity: 0.8;
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 1.87rem;
padding: 1.5rem 0rem;
color: #000000;
opacity: 0.8;
}
.feature-img {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
}
.feature-desc {
text-align: center;
font-size: 1rem;
color: #292747;
opacity: 1;
max-width: 429px;
text-align: center;
font-size: 1rem;
color: #292747;
opacity: 1;
max-width: 429px;
}
section.benefits {
background: #F3F3F3 0% 0% no-repeat padding-box;
opacity: 1;
background: #F3F3F3 0% 0% no-repeat padding-box;
opacity: 1;
}
.benefits-title-1 {
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
.title-1 {
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.benefits-title-2 {
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
.title-2 {
text-align: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.title-3 {
text-align: left;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 2.37rem;
color: #212121;
}
.benefit-card {
width: 370px;
height: 378px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 6px 15px #0000001A;
border-radius: 36px;
opacity: 1;
width: 370px;
height: 378px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 6px 15px #0000001A;
border-radius: 36px;
opacity: 1;
}
.benefit-card-title {
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.68rem;
color: #292747;
opacity: 1;
padding: 2.81rem 0rem 1.5rem 0rem;
text-align: center;
font-weight: 300;
font-family: 'Roboto', sans-serif;
font-size: 1.68rem;
color: #292747;
opacity: 1;
padding: 2.81rem 0rem 1.5rem 0rem;
}
.benefit-desc {
text-align: center;
color: #292747;
max-width: 226px;
text-align: center;
color: #292747;
max-width: 226px;
}
.benefit-desc-1 {
text-align: center;
color: #292747;
max-width: 250px;
text-align: center;
color: #292747;
max-width: 250px;
}
.benefit-card hr {
width: 286px;
border: 1px solid #DBDBDB;
opacity: 1;
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
width: 286px;
border: 1px solid #DBDBDB;
opacity: 1;
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.benefit-card-subtitle {
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #292747;
padding-left: 10px;
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #292747;
padding-left: 10px;
}
.benefit-card-sub-color {
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #008887;
text-align: left;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 0.87rem;
color: #008887;
}
.benefit-ic {
margin-left: 40px !important;
margin-bottom: .8rem;
margin-left: 40px !important;
margin-bottom: .8rem;
}
.branding-logo {
display: flex;
align-items: flex-end;
display: flex;
align-items: flex-end;
}
.co-branding-text {
text-align: left;
font-family: 'Roboto',sans-serif;
font-weight: 300;
font-size: 1rem;
color: #212121;
opacity: 0.81;
max-width: 357px;
padding-top: 1.5rem;
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1rem;
color: #212121;
opacity: 0.81;
max-width: 357px;
padding-top: 1.5rem;
}
.media-kit-logo-title, .moo-card-logo-title {
text-align: left;
font-weight: 300;
font-family: 'Roboto',sans-serif;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
}
.co-branding p, .user-guide p, .media-kit p {
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 0.87rem;
line-height: 1.6rem;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
padding: 2rem 0rem;
}
section.media-kit-logo {
background: #F3F3F3;
opacity: 1;
}
@media (min-width: 768px) {
section.start, section.features, section.co-branding, .footer {
padding-top: 6rem;
padding-bottom: 5.4rem;
}
section.benefits {
padding-top: 3.8rem;
padding-bottom: 5.4rem;
}
section.contact {
padding-top: 2.8rem;
padding-bottom: 0.5rem;
}
.footer {
padding-top: 4.8rem;
padding-bottom: 2rem;
}
section.start, section.features, section.co-branding, section.user-guide, section.media-kit .footer {
padding-top: 6rem;
padding-bottom: 5.4rem;
}
section.benefits {
padding-top: 3.8rem;
padding-bottom: 5.4rem;
}
section.contact {
padding-top: 2.8rem;
padding-bottom: 0.5rem;
}
section.how-it-works {
padding-top: 2.8rem;
padding-bottom: 3.8rem;
}
section.media-kit-logo, section.moo-cards {
padding-top: 4rem;
padding-bottom: 5rem;
}
.footer {
padding-top: 4.8rem;
padding-bottom: 2rem;
}
}

View File

@ -1,223 +1,325 @@
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
*, *::before, *::after {
box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #212529;
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #212529;
}
button:focus {
outline: none !important;
outline: none !important;
}
input[type=text], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
input[type=email], select {
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
width: 100%;
height: 56px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
textarea {
width: 100%;
height: 142px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
width: 100%;
height: 142px;
padding: 16px;
background: #FAFAFA 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
p {
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0px;
color: #212121;
}
p a {
color: #23BCBA;
}
.bootstrap-overrides a {
text-decoration: none;
background-color: transparent;
text-decoration: none;
background-color: transparent;
}
.bootstrap-overrides a:hover {
color: #23BCBA;
text-decoration: none;
color: #23BCBA;
text-decoration: none;
}
.bootstrap-overrides h1, .bootstrap-overrides h2, .bootstrap-overrides h3, .bootstrap-overrides h4, .bootstrap-overrides h5, .bootstrap-overrides h6, .caption, .placeholder, .body-text, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Roboto', sans-serif;
color: #212121;
text-align: left;
font-family: 'Roboto', sans-serif;
color: #212121;
text-align: left;
}
.bootstrap-overrides h1, .h1 {
font-size: 3.3125rem;
line-height: 4rem;
font-weight: 300;
font-size: 3.3125rem;
line-height: 4rem;
font-weight: 300;
}
.bootstrap-overrides h2, .h2 {
font-size: 3.16rem;
line-height: 3.66rem;
font-weight: 300;
font-size: 3.16rem;
line-height: 3.66rem;
font-weight: 300;
}
.bootstrap-overrides h3, .h3 {
font-size: 2.5rem;
line-height: 2.83rem;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.83rem;
font-weight: 700;
}
.bootstrap-overrides h4, .h4 {
font-size: 1.66rem;
line-height: 1.2;
font-weight: 700;
font-size: 1.66rem;
line-height: 1.2;
font-weight: 700;
}
.bootstrap-overrides h5, .h5 {
font-size: 1.33rem;
line-height: 2.16rem;
font-weight: 300;
font-size: 1.33rem;
line-height: 2.16rem;
font-weight: 300;
}
.bootstrap-overrides h6, .h6 {
font-size: 1.66rem;
line-height: 1.2;
font-weight: 300;
font-size: 1.66rem;
line-height: 1.2;
font-weight: 300;
}
.caption {
font-size: 1rem;
line-height: 1.66rem;
font-weight: 300;
font-size: 1rem;
line-height: 1.66rem;
font-weight: 300;
}
.placeholder {
font-size: 1.33rem;
line-height: 1.83rem;
font-weight: 300;
font-size: 1.33rem;
line-height: 1.83rem;
font-weight: 300;
}
.title-1 {
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #FFFFFF;
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #FFFFFF;
}
.title-2 {
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #FFFFFF;
text-align: left;
font-size: 2.37rem;
line-height: 2.75rem;
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #FFFFFF;
}
.title-3 {
text-align: left;
font-size: 2.37rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #212121;
opacity: 0.95;
text-align: left;
font-size: 2.37rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #212121;
opacity: 0.95;
}
.page-title {
text-align: center;
font-weight: 700;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: -0.95px;
color: #212121;
opacity: 1;
}
.page-subtitle {
text-align: left;
font-weight: 300;
font-size: 2.375rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 1;
}
.body-text {
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
opacity: 0.8;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
opacity: 0.8;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fixed-top {
position: fixed !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
position: fixed !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.container {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
z-index: 1;
.container, .container-small {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
z-index: 1;
}
.normal-btn {
width: 162px;
height: 40px;
cursor: pointer;
background: #129D99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border-radius: 30px;
border: none;
color: #FFFFFF;
opacity: 1;
min-width: 162px;
max-width: 256px;
height: 40px;
cursor: pointer;
background: #129D99 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1E202029;
border-radius: 30px;
border: none;
color: #FFFFFF;
opacity: 1;
font-size: 0.87rem;
padding: 0.62rem 1.87rem;
}
.mirror {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.text-box {
width: 894px;
height: 221px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #23BCBA;
border-radius: 37px;
opacity: 1;
margin: 3.75rem 0rem;
padding: 3.37rem 4.37rem;
}
.collapse-box {
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
padding: 1.45rem 1.5rem;
margin: 1rem 0rem;
}
.collapse-title a {
text-align: left;
font-size: 1.25rem;
font-weight: 700;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 0.76;
}
.collapse-title a:after {
content: '\f077';
font-family: "Font Awesome 5 Free" !important;
float: right;
font-size: 1rem;
font-weight: 900;
color: black;
}
.collapse-title a.collapsed:after {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: black;
}
.collapse:not(.show) {
display: none;
display: none;
}
.faq-content {
text-align: left;
font-weight: 400;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
letter-spacing: 0px;
color: #212121;
opacity: 0.8;
padding-top: 1.5rem;
}
.fa-download {
color: #212121;
opacity: 0.8;
padding-right: .5rem;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
.margin-right-6 {
margin-left: 5.8rem;
}
.container {
max-width: 960px;
}
.margin-right-6 {
margin-left: 5.8rem;
}
}
@media (min-width: 1244px) {
.container {
max-width: 1204px !important;
}
.container {
max-width: 1204px !important;
}
.container-small {
max-width: 900px;
}
}

View File

@ -31,9 +31,9 @@
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#howItWorks">How it works</a>
<a href="#roadmap">Roadmap</a>
<a href="#faqs">faqs</a>
<a href="about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="about/faqs.html">faqs</a>
</div>
</div>
</li>
@ -42,9 +42,9 @@
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="#mediaKit">Media kit</a>
<a href="#userGuide">User Guide</a>
<a href="#coBranding">Co-branding</a>
<a href="resources/media-kit.html">Media kit</a>
<a href="resources/user-guide.html">User Guide</a>
<a href="resources/co-branding.html">Co-branding</a>
</div>
</div>
</li>
@ -214,7 +214,7 @@
<div class="row justify-content-around">
<div class="col"></div>
<div class="col d-flex align-items-center justify-content-center flex-direction-row">
<span class="benefits-title-1">Who</span>&nbsp;<span class="benefits-title-2">Benefits</span>
<span class="title-1">Who</span>&nbsp;<span class="title-2">Benefits</span>
</div>
<div class="col">
<div class="row justify-content-center"><div class="col-auto">

View File

@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="../assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Core theme CSS -->
<link href="../css/styles.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
<link href="../css/section.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="../index.html"><img src="../assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i
class="fas fa-bars ml-1"></i></button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="../about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="../about/faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn active-nav-link" onclick="dropdownToggle('resourcesDropdown')"
href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="media-kit.html">Media kit</a>
<a href="user-guide.html">User Guide</a>
<a href="co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- Co-branding -->
<section class="page-section co-branding" id="co-branding">
<div class="container">
<div class="col"><div class="page-title">Resources</div></div>
<div class="col pt-5 pb-3"><div class="title-3">Download ARGOS</div></div>
<div class="col"><p>
Hello there, welcome to Expensifys press kit! Before downloading our brand assets, please
familiarize yourself with our guidelines and best practices. We love what weve created, so please
dont modify the logo in any way — that includes changing the colors, rotating the icons, moving the
icons, adding text, etc. If theres a version of our logo you need but dont see, please reach out
to press@argos.eu with your request.
</p>
</div>
<div class="col d-flex justify-content-center"><button href="#" class="normal-btn">View User Guide Online</button></div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and
Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i
class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i
class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i
class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i
class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under
</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

View File

@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="../assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Core theme CSS -->
<link href="../css/styles.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
<link href="../css/section.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="../index.html"><img src="../assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i
class="fas fa-bars ml-1"></i></button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="../about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="../about/faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn active-nav-link" onclick="dropdownToggle('resourcesDropdown')"
href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="media-kit.html">Media kit</a>
<a href="user-guide.html">User Guide</a>
<a href="co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- Media-kit -->
<section class="page-section media-kit" id="media-kit">
<div class="container">
<div class="col">
<div class="page-title">Resources</div>
</div>
<div class="col pt-5 pb-3">
<div class="title-3">Media Kit</div>
</div>
<div class="col">
<p>
Hello there, welcome to Expensifys press kit! Before downloading our brand assets, please
familiarize yourself with our guidelines and best practices. We love what weve created, so please
dont modify the logo in any way — that includes changing the colors, rotating the icons, moving the
icons, adding text, etc. If theres a version of our logo you need but dont see, please reach out
to press@argos.eu with your request.
</p>
</div>
</div>
</section>
<!-- logo -->
<section class="page-section media-kit-logo" id="media-kit-logo">
<div class="container">
<div class="row media-kit-logo-title">Primary Logo</div>
<div class="row pt-3 pb-5">
<div class="col-auto">
<img src="../assets/img/logo-1.png" width="570" height="283">
<div class="row pr-4">
<div class="col-auto ml-auto pt-4"><i class="fas fa-lg fa-download"></i>SVG</div>
<div class="col-auto pt-4"><i class="fas fa-lg fa-download"></i>PNG</div>
</div>
</div>
<div class="col-auto">
<img src="../assets/img/logo-2.png" width="570" height="283">
<div class="row pr-4">
<div class="col-auto ml-auto pt-4"><i class="fas fa-lg fa-download"></i>SVG</div>
<div class="col-auto pt-4"><i class="fas fa-lg fa-download"></i>PNG</div>
</div>
</div>
</div>
<div class="row media-kit-logo-title pt-5">Logo Usage Crimes</div>
<div class="row d-flex justify-content-center pt-5">
<div class="col-auto">
<img src="../assets/img/logo-wrong-use-1.jpg" width="288" height="122">
<div class="col-auto d-flex justify-content-center pt-4"><i class="far fa-lg fa-times-circle"></i>
</div>
</div>
<div class="col-auto">
<img src="../assets/img/logo-wrong-use-2.jpg" width="288" height="122">
<div class="col-auto d-flex justify-content-center pt-4"><i class="far fa-lg fa-times-circle"></i>
</div>
</div>
<div class="col-auto">
<img src="../assets/img/logo-wrong-use-3.jpg" width="288" height="122">
<div class="col-auto d-flex justify-content-center pt-4"><i class="far fa-lg fa-times-circle"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Moo Cards -->
<section class="page-section moo-cards" id="moo-cards">
<div class="container">
<div class="row moo-card-logo-title pb-5">Moo Cards</div>
<div class="row d-flex justify-content-center">
<div class="col-auto">
<img src="../assets/img/moocard-1.png" width="254" height="254">
</div>
<div class="col-auto">
<img src="../assets/img/moocard-2.png" width="254" height="254">
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-auto pt-4"><i class="fas fa-lg fa-download"></i>SVG</div>
<div class="col-auto pt-4"><i class="fas fa-lg fa-download"></i>PNG</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and
Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i
class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i
class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i
class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i
class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under
</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

View File

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Argos</title>
<link rel="icon" type="image/x-icon" href="../assets/img/fav-icon.png">
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- Core theme CSS -->
<link href="../css/styles.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
<link href="../css/footer.css" rel="stylesheet">
<link href="../css/section.css" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body id="page-top" class="bootstrap-overrides">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg" id="nav">
<div class="container">
<a class="navbar-brand" href="../index.html"><img src="../assets/img/argos-logo.svg"></a>
<button class="collapse navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars ml-1"></i></button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
<div id="aboutDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="../about/how-it-works.html">How it works</a>
<a href="https://trello.com/b/x49lylnK/argos" target="_blank">Roadmap</a>
<a href="../about/faqs.html">faqs</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link dropbtn active-nav-link" onclick="dropdownToggle('resourcesDropdown')" href="#resources">RESOURCES</a>
<div id="resourcesDropdown" class="dropdown-content">
<div class="dropdown-top"></div>
<div class="dropdown-options">
<a href="media-kit.html">Media kit</a>
<a href="user-guide.html">User Guide</a>
<a href="co-branding.html">Co-branding</a>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../contact.html">CONTACT</a></li>
<li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
</ul>
</div>
</div>
</nav>
<!-- User Guide -->
<section class="page-section user-guide" id="user-guide">
<div class="container">
<div class="col"><div class="page-title">Resources</div></div>
<div class="col pt-5 pb-3"><div class="title-3">User Guide</div></div>
<div class="col"><p>
Hello there, welcome to Expensifys press kit! Before downloading our brand assets, please
familiarize yourself with our guidelines and best practices. We love what weve created, so please
dont modify the logo in any way — that includes changing the colors, rotating the icons, moving the
icons, adding text, etc. If theres a version of our logo you need but dont see, please reach out
to press@argos.eu with your request.
</p>
</div>
<div class="col d-flex justify-content-center"><button href="#" class="normal-btn">View User Guide Online</button></div>
</div>
</section>
<!-- Footer-->
<footer class="footer">
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<img src="../assets/img/argos-logo - Copy.svg" width="98" height="37">
</div>
<div class="col-auto">
<div class="footer-text">ARGOS receives funding from the European Union's Horizon 2020 Research and Innovation programme under grant agreement No. 731011.</div>
</div>
<div class="col-auto">
<img src="../assets/img/Logo_Horizontal_white_small.png" width="126" height="30">
</div>
</div>
<div class="row justify-content-center pt-5">
<div class="col d-flex justify-content-end">
<a class="btn rounded-circle btn-social mx-1" href="#!"><i class="fab fa-lg fa-facebook-f"></i></a>
<a class="btn rounded-circle btn-social twitter mx-1" href="#!"><i class="fab fa-lg fa-twitter"></i></a>
<a class="btn rounded-circle btn-social linkedin mx-1" href="#!"><i class="fab fa-lg fa-linkedin-in"></i></a>
<a class="btn rounded-circle btn-social youtube mx-1" href="#!"><i class="fab fa-lg fa-youtube"></i></a>
</div>
<div class="col">
<a class="btn mx-1" href="#!"><span class="newsletter">Newsletter</span><i class="fas fa-lg fa-wifi wifi-rotate"></i></i></a>
</div>
</div>
<div class="row justify-content-center pt-5">
<a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
<a class="col conditions-policy" href="#!">Cookies policy</a>
</div>
<div class="row justify-content-center pt-5">
<div class="col-auto"><img src="../assets/img/Cc.logo.circle.png" width="24" height="24"></div>
<div class="col-auto pl-0"><img src="../assets/img/univ-access.png" width="24" height="24"></div>
<div class="licence">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</div>&nbsp;
<div class="licence"><u>ATTRIBUTION 4.0 INTERNATIONAL LICENSE.</u></div>
</div>
</div>
</footer>
<!-- Core theme JS-->
<script src="../js/scripts.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>