Skip to content
Snippets Groups Projects
Commit be16f685 authored by Benoit Alessandroni's avatar Benoit Alessandroni
Browse files

Updating the splash screen design

parent 7c83daca
No related branches found
No related tags found
1 merge request!5Integration/splash screen
Hide whitespace changes
Inline Side-by-side
src/includes/splash.pug
+ 2
− 2
View file @ be16f685
...@@ -6,9 +6,9 @@ sib-router(default-route='splash-index') ...@@ -6,9 +6,9 @@ sib-router(default-route='splash-index')
figure(class="logo") figure(class="logo")
img(src="../images/logo.png" alt="Coopstarter logo") img(src="../images/logo.png" alt="Coopstarter logo")
h2 Welcome to our international index of resources for cooperative mentors and entrepreneurs h2.title_lead Welcome to our international index of resources for cooperative mentors and entrepreneurs
#splash-index #splash-index.flex
sib-link.block_log(next='mentor-login') sib-link.block_log(next='mentor-login')
div div
figure.img_log figure.img_log
......
src/index.pug
+ 5
− 5
View file @ be16f685
...@@ -10,19 +10,19 @@ html ...@@ -10,19 +10,19 @@ html
sib-route(name='entrepreneur-dashboard') sib-route(name='entrepreneur-dashboard')
body body
#mentor-dashboard(hidden).no-sidebar #mentor-dashboard(hidden).no-sidebar.container
include includes/mentor/dashboard.pug include includes/mentor/dashboard.pug
#entrepreneur-dashboard(hidden).no-sidebar #entrepreneur-dashboard(hidden).no-sidebar.container
include includes/entrepreneur/dashboard.pug include includes/entrepreneur/dashboard.pug
#splash(hidden).no-sidebar.flex #splash(hidden).no-sidebar.container
include includes/splash.pug include includes/splash.pug
#mentor-new-account(hidden).no-sidebar #mentor-new-account(hidden).no-sidebar.container
include includes/mentor/create.pug include includes/mentor/create.pug
#entrepreneur-new-account(hidden).no-sidebar #entrepreneur-new-account(hidden).no-sidebar.container
include includes/entrepreneur/create.pug include includes/entrepreneur/create.pug
sib-auth sib-auth
......
src/styles/index.scss
+ 341
− 49
View file @ be16f685
...@@ -38,8 +38,7 @@ footer, header, hgroup, menu, nav, section { ...@@ -38,8 +38,7 @@ footer, header, hgroup, menu, nav, section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
max-width: 1440px;
} }
ol, ul { ol, ul {
list-style: none; list-style: none;
...@@ -63,19 +62,23 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...@@ -63,19 +62,23 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX GLOBAUX XXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX GLOBAUX XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* variables*/ /* XXXXXXXXXXXXXXXXXXXXXXXX variables XXXXXXXXXXXXXXXXXXXXXX */
:root { :root {
--typo: calisto; --typo: calisto;
--typo-btn: avenir; --typo-btn: avenir;
--bg-page: #f5f6fa; --bg-page: #f5f6fa;
--clr-typo-base : #7A8789;
--bg-block:#FFFFFF; --bg-block:#FFFFFF;
--bg-form : rgba(236,241,251,1);
--bg-form-focus : rgba(236,241,251,0.5);
--marge-base: 4.5rem; --marge-base: 4.5rem;
--marge-petit: 3rem;
--marge-base-750: 1rem; --marge-base-750: 1rem;
--bg-btn-base: #01AFCC; --bg-btn-base: #01AFCC;
} }
/* technique */ /* XXXXXXXXXXXXXXXXXXXXXXXX technique XXXXXXXXXXXXXXXXXXXXXX */
@font-face { @font-face {
font-family: 'var(--typo)'; font-family: 'var(--typo)';
src: url('../fonts/CALIST.eot'); /* IE9 Compat Modes */ src: url('../fonts/CALIST.eot'); /* IE9 Compat Modes */
...@@ -88,12 +91,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ ...@@ -88,12 +91,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@font-face { @font-face {
font-family: 'var(--typo-btn)'; font-family: 'var(--typo-btn)';
src: url('../fonts/Avenir.eot'); /* IE9 Compat Modes */ src: url('../fonts/avenir-light.eot'); /* IE9 Compat Modes */
src: url('../fonts/Avenir.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('../fonts/avenir-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Avenir.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/avenir-light.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Avenir.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/avenir-light.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/Avenir.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/avenir-light.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/Avenir.svg#svgFontName') format('svg'); /* Legacy iOS */ url('../fonts/avenir-light.svg#svgFontName') format('svg'); /* Legacy iOS */
} }
html{ html{
...@@ -109,11 +112,13 @@ img{ ...@@ -109,11 +112,13 @@ img{
max-width: 100%; max-width: 100%;
} }
/* visuels */ .pull-right{
float: right;
body{ width: auto;
font-family: "var(--typo)"; }
background: var(--bg-page); .pull-left{
float: left;
width: auto;
} }
.flex{ .flex{
...@@ -123,6 +128,54 @@ body{ ...@@ -123,6 +128,54 @@ body{
justify-content: center; justify-content: center;
} }
.flex_espace{
justify-content: space-between;
}
.flex_item_center{
align-items: center;
}
.container{
max-width: 1440px;
margin: 0 auto;
}
.w_50{
width: 50%;
}
.w_33{
width: 33%;
}
.w_66{
width: 66%;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX visuels XXXXXXXXXXXXXXXXXXXXXX */
body{
font-family: "var(--typo)";
background: var(--bg-page);
}
.title_lead{
width: 50%;
margin: 0 25% var(--marge-base) 25%;
font-size: 2.2rem;
line-height: 1.4;
text-align: center;
}
.title_lead_avenir{
font-size: 2.4rem;
text-align: center;
margin: 2rem;
font-weight: 900;
font-family: 'var(--typo-btn)';
}
.block_log{ .block_log{
width: 33%; width: 33%;
background: var(--bg-block); background: var(--bg-block);
...@@ -135,6 +188,7 @@ body{ ...@@ -135,6 +188,7 @@ body{
} }
.button_base{ .button_base{
transition: all .3s ease-in-out;
background-color: var(--bg-btn-base); background-color: var(--bg-btn-base);
color: var(--bg-block); color: var(--bg-block);
text-transform: uppercase; text-transform: uppercase;
...@@ -142,48 +196,289 @@ body{ ...@@ -142,48 +196,289 @@ body{
padding: 1.5rem 1.9rem 1.5rem 1.9rem; padding: 1.5rem 1.9rem 1.5rem 1.9rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-family: 'var(--typo-btn)'; font-family: 'var(--typo-btn)';
border: none; border: 2px solid var(--bg-btn-base);
box-shadow: none; box-shadow: none;
border-radius: 20px; border-radius: 20px;
} }
.button_base:hover{
background-color: var(--bg-block);
color: var(--bg-btn-base);
}
.button_dark{
transition: all .3s ease-in-out;
background-color: #444C4D;
color: var(--bg-block);
text-transform: uppercase;
font-size: 1.4rem;
padding: 1.5rem 1.9rem 1.5rem 1.9rem;
margin: 3rem 0 1rem 0;
font-family: 'var(--typo-btn)';
border: 2px solid #444C4D;
box-shadow: none;
width: auto;
}
.button_dark:hover{
background-color: var(--bg-block);
color: #444C4D;
}
p{
font-size: 1.6rem;
color: var(--clr-typo-base);
font-family: 'var(--typo-btn)';
text-align: left;
margin: 0 0 var(--marge-petit) 0;
}
.p_entete{
text-align: center;
font-size: 1.8rem;
}
.backlink{
display: inline-block;
color: var(--clr-typo-base);
font-size: 1.4rem;
text-decoration: underline;
font-family: 'var(--typo-btn)';
transition: all .3s ease-in-out;
margin: 3rem;
}
.backlink:hover{
color: var(--bg-btn-base);
}
.add_browse{
font-family: 'var(--typo-btn)';
min-width: 10rem;
font-size: 1.4rem;
color: var(--bg-block);
border-radius: 16.5px;
padding: .8rem 2rem;
background: #5B6374;
border: 2px solid #5B6374;
transition: all .3s ease-in-out;
margin: 2rem;
display: inline-block;
text-align: center;
text-decoration: none;
}
.add_browse:hover{
color: #5B6374;
background: var(--bg-block);
}
.btn_filtre{
border-radius: 15.5px;
background-color: #818998;
padding: .5rem 3.5rem .5rem 1.5rem;
font-family: 'var(--typo-btn)';
color: var(--bg-block);
text-decoration: none;
text-align: center;
font-size: 1.4rem;
border:none;
position: relative;
}
.btn_filtre:after{
font-family: "Font Awesome 5 pro";
font-weight: 900;
content: "\f00d";
position: absolute;
right: 1.2rem;
top: 30%;
}
/* XXXXXXXXXXXXXXXXXXXXXXXX formulaires XXXXXXXXXXXXXXXXXXXXXX */
.block_creat_count{
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: var(--marge-petit);
overflow: hidden;
}
sib-form-label-text, sib-multiple-select,cs-form-password{
display: block;
width: 48.5%;
}
sib-set-default, cs-section_header, sib-form-textarea{
display: block;
width: 100%;
}
textarea{
height: 9.5rem;
transition: all .3s ease-in-out;
resize: none;
}
label div{
text-align: left;
font-size: 1.4rem;
font-weight: bold;
padding: 1rem 0;
font-family: 'var(--typo-btn)';
}
input, textarea, select{
background: var(--bg-form);
color: #7A8789;
font-size: 1.4rem;
padding: 1rem 2rem 1rem 2rem;
width: 100%;
border:none;
font-weight: lighter;
font-family: 'var(--typo-btn)';
outline: none;
transition: all .3s ease-in-out;
}
input:focus, textarea:focus{
background: var(--bg-form-focus);
}
.titr_form{
font-family: 'var(--typo)';
font-size: 2.2rem;
text-align: left;
width: 100%;
color: #444C4D;
border-bottom: 1px solid #DBE2ED;
padding: 0 0 1.5rem 0;
margin: 2rem 0 2rem 0;
}
.titr_form_avenir{
font-family: 'var(--typo-btn)';
color: #3D424A;
border-bottom: 1px solid #C5CCD9;
padding: 0 0 1.5rem 0;
margin: 2rem 0 2rem 0;
text-align: left;
font-size: 1.8rem;
width: 100%;
font-weight: 900;
}
.input_big{
width: 100%;
}
.input_photo label{
position: relative;
}
.input_photo label div{
position: absolute;
left: 25%;
margin-top: 3rem;
}
.input_photo label input{
width: 10rem;
height: 10rem;
border-radius: 50%;
margin: 0 3rem 0 0;
background: url(../images/telecharger.png) no-repeat 52% 67% var(--bg-form);
}
sib-form-label-text[name="iframe_link"] div{
position:relative;
}
sib-form-label-text[name="iframe_link"] div:before{
content: "";
display: block;
width: 19px;
height: 19px;
background: url(../images/bulle_quest.png) no-repeat;
top: 0.4rem;
left: 24%;
position: absolute;
}
select{
padding: 0;
}
option{
border-bottom: 1px solid #DBE2ED;
padding: 1rem;
}
button{
outline: none;
}
/* ----------------- CHECKBOX ---------------------------*/
.ss-list.checkbox{
padding-left: 2.5rem;
color: #818998;
font-weight: lighter;
}
.ss-list.checkbox .ss-option{
position: relative;
font-weight: lighter;
}
.ss-list.checkbox .ss-option:before {
content: "";
position : absolute;
display: block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #818998;
border-radius: 3px;
left: -2.5rem;
top: .9rem;
}
.ss-list.checkbox .ss-option.active:after {
font-family: "Font Awesome 5 pro";
font-weight: 900;
content: "\f00C";
position : absolute;
display: block;
width: 1.5rem;
height: 1.5rem;
left: -1.95rem;
top: .9rem;
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXX MENTOR DASHBOARD XXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX MENU LOGUE XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
[hidden] { #header{
display: none !important; background: #152935;
height: 5rem;
} }
/* Style tab links */ #header img{
.tablink { width: 3rem;
background-color: #555; height: 3rem;
color: white; border-radius: 50%;
float: left;
border: none;
outline: none;
cursor: pointer;
font-size: 17px;
width: 33.33%;
} }
.tablink:hover { #header .flex, #header>div{
background-color: #777; height: 100%;
} }
/* Style the tab content (and add height:100% for full page content) */ #header .flex a{
.tabcontent { display: inline-block;
display: none; font-size: 1.8rem;
padding: 100px 20px; font-family: 'var(--typo-btn)';
margin-top: 75px; color: white;
background-color: #888; margin: 0 0 0 5rem;
height: 100%; text-decoration: none;
} }
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX PAGE LOGO XXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX PAGE LOG XXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.logo{ .logo{
...@@ -192,16 +487,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ ...@@ -192,16 +487,7 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
width: 100%; width: 100%;
} }
#splash>h2{ #splash .block_log{
width: 50%;
max-width: 47rem;
margin: 0 25% var(--marge-base) 25%;
font-size: 2.2rem;
line-height: 1.4;
text-align: center;
}
#splash-index .block_log{
max-width: 30rem; max-width: 30rem;
margin-bottom: var(--marge-base); margin-bottom: var(--marge-base);
} }
...@@ -210,6 +496,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/ ...@@ -210,6 +496,12 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
margin: 0 0 4rem 0; margin: 0 0 4rem 0;
} }
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX UPLOAD RESSOURCE XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX MEDIA QUERIES XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX MEDIA QUERIES XXXXXXXXXXXXXXXXXXXXX
......
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