EOSC section added in index page (static page)

**Missing one link
This commit is contained in:
Kristian Ntavidi 2021-06-24 12:46:31 +03:00
parent a48ac5fa0f
commit e486169ae5
5 changed files with 99 additions and 23 deletions

View File

@ -1,6 +1,6 @@
<div class="dmp-criteria"> <div class="dmp-criteria">
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="col-auto"> <div class="col-auto search-container">
<mat-form-field class="search-form-field"> <mat-form-field class="search-form-field">
<input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike" <input matInput placeholder=" {{'CRITERIA.DMP.LIKE'| translate}}" name="grantCriteriaLike"
[(ngModel)]="criteria.like" (ngModelChange)="controlModified()"> [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">

View File

@ -3,7 +3,7 @@
background-color: white !important; background-color: white !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { :host ::ng-deep .search-container .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important; padding: 0.3rem 0rem 0.6rem 0rem !important;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -254,3 +254,53 @@ section.media-kit-logo {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.eosc{
margin-top: 8.5em;
margin-bottom: 5em;
}
.eosc-row{
justify-content: space-around;
}
.european-open-cloud{
background: #C2EDED 0% 0% no-repeat padding-box;
height: 453px;
width: 347px;
box-shadow: 0px 3px 6px #0044941A;
transform: matrix(0.99, -0.16, 0.16, 0.99, 0, 0);
display: flex;
align-items: center;
justify-content: center;
}
.eosc_logo{
height: 117px;
}
.eosc-desc{
font-size: 1rem;
color: #292747;
opacity: 1;
margin-bottom: 3.5em;
}
.eosc-header{
font-weight: 400 !important;
font-size: 2.375em !important;
line-height: 2.66rem !important;
margin-bottom: .7em;
}
.eosc-tag{
color: #004494;
}
.eosc-learn-more{
max-width: 256px;
height: 40px;
cursor: pointer;
background: #004494 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;
}

View File

@ -97,33 +97,31 @@
</div> </div>
</div> </div>
</header> </header>
<!-- Start --> <!-- EOSC -->
<section class="page-section start" id="start"> <section class="page-section eosc" id="eosc">
<div class="container"> <div class="container">
<div class="row template-img"> <div class="row align-items-center eosc-row">
<div class="col-auto margin-right-6"> <div class="col-12 col-md-3 mb-4">
<p class="title-1 mb-0">Start your</p> <div class="european-open-cloud">
<div class="d-flex flex-direction-row"> <img src="assets/img/eosc_logo.png" class="eosc_logo" alt="EOSC logo">
<p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
</div>
<div class="options">
<div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1'); clearInterval(slides)">
<p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2'); clearInterval(slides)">
<p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3'); clearInterval(slides)">
<p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
</div>
</div> </div>
</div> </div>
<div class="col-auto ml-auto template-img"> <div class="col-12 col-md-5">
<img id="template-preview" src="assets/img/template-preview-1.svg" width="472" height="519"> <h2 class="eosc-header">Connect with <b>OpenAIRE & <span class="eosc-tag">EOSC</span></b></h2>
<p class="eosc-desc">
Link your plan directly to underlying OpenAIRE and EOSC services,
soures and semantics and trace the quality of your research. Use Argos
templates that incorporate the fullest collections of repositories, datasets,
metadata standards and other resources to choose from when completing your DMP's.
</p>
<p>
<a href="">
<button class="eosc-learn-more">Learn More</button>
</a>
</p>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<!-- Features --> <!-- Features -->
<section class="page-section features" id="features"> <section class="page-section features" id="features">
@ -233,6 +231,34 @@
</div> </div>
</div> </div>
</section> </section>
<!-- Start -->
<section class="page-section start" id="start">
<div class="container">
<div class="row template-img">
<div class="col-auto margin-right-6">
<p class="title-1 mb-0">Start your</p>
<div class="d-flex flex-direction-row">
<p class="title-2 text-uppercase">Argos</p>&nbsp;<p class="title-2">experience</p>
</div>
<div class="options">
<div class="selected d-flex flex-direction-row option-row" id="id1" onclick="document.getElementById('template-preview').src='assets/img/template-preview-1.svg'; toggleClass(['id1','id2','id3'], 'id1'); clearInterval(slides)">
<p class="option-number">1</p>&nbsp;<p class="option-text">Select Templates</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id2" onclick="document.getElementById('template-preview').src='assets/img/template-preview-2.svg'; toggleClass(['id1','id2','id3'], 'id2'); clearInterval(slides)">
<p class="option-number">2</p>&nbsp;<p class="option-text">Fill the information</p>
</div>
<div class="not-selected d-flex flex-direction-row option-row" id="id3" onclick="document.getElementById('template-preview').src='assets/img/template-preview-3.svg'; toggleClass(['id1','id2','id3'], 'id3'); clearInterval(slides)">
<p class="option-number">3</p>&nbsp;<p class="option-text">Share DMP</p>
</div>
</div>
</div>
<div class="col-auto ml-auto template-img">
<img id="template-preview" src="assets/img/template-preview-1.svg" width="472" height="519">
</div>
</div>
</div>
</div>
</section>
<!-- Benefits --> <!-- Benefits -->
<section class="page-section benefits" id="benefits"> <section class="page-section benefits" id="benefits">
<div class="container"> <div class="container">