Skip to content

Commit

Permalink
update design v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoine-nedelec
antoine-nedelec committed Dec 12, 2019
1 parent 7aed80b commit 393f2c5
Show file tree
Hide file tree
Showing 8 changed files with 391 additions and 86 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.idea
322 changes: 256 additions & 66 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,301 @@
/* GENERICS */
body { max-width: 1280px; margin: 0 auto; padding: 0; font-family: "Avenir Next", sans-serif; }
body{ max-width: 1280px; margin: 0 auto 50px auto; padding: 0; background: #282828; font-family: "Avenir Next", sans-serif; }
.pointer{ cursor: pointer; }
h1{
font-weight: initial;
margin: 0;
}
h2{
font-weight: 600;
font-size: 30px;
margin: 20px 0;
}

.main-bg{
position: relative;
background: rgba(86,97,151,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(86,97,151,1)), color-stop(20%, rgba(86,97,151,1)), color-stop(21%, rgba(103,115,177,0)), color-stop(100%, rgba(103,115,177,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,0) 21%, rgba(103,115,177,0) 100%);
background-size: 6px 6px;
background-position-x: 3px;
background-position-y: 3px;
}

.main-bg:before{
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 0;
background: rgba(86,97,151,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(86,97,151,1)), color-stop(20%, rgba(86,97,151,1)), color-stop(21%, rgba(103,115,177,1)), color-stop(100%, rgba(103,115,177,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(86,97,151,1) 0%, rgba(86,97,151,1) 20%, rgba(103,115,177,1) 21%, rgba(103,115,177,1) 100%);
background-size: 6px 6px;
z-index: -1;
}

.secondary-bg{
background: #232424;
background: -moz-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(35,36,36,1)), color-stop(20%, rgba(35,36,36,1)), color-stop(21%, rgba(50,50,50,0)), color-stop(100%, rgba(50,50,50,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%);
background: radial-gradient(ellipse at center, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,0) 21%, rgba(50,50,50,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232424', endColorstr='#323232', GradientType=1 );
background-position-x: 3px;
background-position-y: 3px;
background-size: 6px 6px;
}

.secondary-bg:before{
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0;
bottom: 0;
background: rgba(35,36,36,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(35,36,36,1)), color-stop(20%, rgba(35,36,36,1)), color-stop(21%, rgba(50,50,50,1)), color-stop(100%, rgba(50,50,50,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%);
background: radial-gradient(ellipse at center, rgba(35,36,36,1) 0%, rgba(35,36,36,1) 20%, rgba(50,50,50,1) 21%, rgba(50,50,50,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232424', endColorstr='#323232', GradientType=1 );
background-size: 6px 6px;
z-index: -1;
}

/* END GENERICS */

#main-container {
#main-container{
display: grid;
grid-template-columns: 400px auto;
grid-template-rows: 80px auto auto auto auto 150px;
grid-template-areas:
"header header"
"photo main"
"contact main"
"me main"
"summary-contact main"
"skills main"
". main"
"filler main"
"footer footer";
align-items: start;
align-content: stretch;
}

#sub-container {
#filler{
grid-area: filler;
align-self: stretch;
height: 100%;
}

#sub-container{
grid-area: main;
display: grid;
background: white;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas:
"summary"
"experiences"
"experiences";
height: 100%;
z-index: -3;
}

#skills {
grid-area: skills;
height: 600px;
}

#summary {
background: #f9f9ff;
grid-area: summary;
padding: 40px;
font-size: 25px;
line-height: 35px;
}

#experiences {
background: violet;
grid-area: experiences;
height: 1500px;
}

footer {
background: cyan;
grid-area: footer;
height: 150px;
#sub-container h2 {
font-size: 40px;
font-weight: 700;
color: #343434;
}

/* HEADER */
header { grid-area: header; background: #000000; height: 80px; position: relative; }
header h1 { font-size: 40px; margin: 0 0 0 20px; font-weight: 100; height: 80px; line-height: 80px; color: white; }
header #search-bar { position: absolute; right: 15px; top: 15px; height: 50px; width: 50px; border-radius: 25px; overflow: hidden; background: white; transition: width 0.3s; }
header #search-bar:hover { width: 400px; }
header #search-bar::before { position: absolute; width: 30px; height: 30px; margin: 10px; content: ''; background: url("../img/icon-search.png") no-repeat; background-size: contain; }
header{ grid-area: header; background: #282828; height: 80px; position: relative; }
header #languages{ position: absolute; left: 15px; top: 15px; height: 50px; }
header #languages #french{ display: inline-block; border-radius: 100%; width: 50px; height: 50px; margin-right: 20px; background: url('../img/fr_flag.jpg'); background-size: cover; }
header #languages #english{ display: inline-block; border-radius: 100%; width: 50px; height: 50px; background: url('../img/en_flag.jpg'); background-size: cover; }
header #search-bar{ position: absolute; right: 15px; top: 15px; height: 50px; width: 50px; border-radius: 25px; overflow: hidden; background: white; transition: width 0.3s; }
header #search-bar:hover{ width: 400px; }
header #search-bar::before{ position: absolute; width: 30px; height: 30px; margin: 10px; content: ''; background: url("../img/icon-search.png") no-repeat; background-size: contain; }
header #search-bar-input{ border: none; height: 40px; width: 350px; margin: 5px 15px 5px 40px; padding: 5px 10px; font-size: 20px; font-weight: 100; }
header #search-bar-input::placeholder{ color: black; font-weight: 100; }
header #search-bar-input:focus, header #search-bar-input:active{ outline:0; }
/* END HEADER */

/* PHOTO */
#photo {
grid-area: photo;
height: 400px;
/* ME */
#me{
grid-area: me;
position: relative;
font-family: 'Bebas Neue', cursive;
color: #fff;
}
#me #name{
padding: 30px 0 0 30px;
font-size: 100px;
line-height: 85px;
}
#me #job{
padding: 0 0 0 30px;
margin: 0;
font-size: 45px;
font-weight: initial;
}
#me #picture{
position: relative;
margin: 50px auto -115px auto;
width: 230px; height: 230px;
background: linear-gradient(to bottom, #ffffff 0%, #6773b1 100%);
border-radius: 100%;
z-index: 1;
}
#me #picture:before{
content: '';
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
background: url("../img/antoine.jpg");
background-size: cover;
overflow: hidden;
border-radius: inherit;
z-index: 5;
}
/* END PHOTO */
/* END ME */

/* CONTACT-LINKS */
#contact-links {
background: rgba(8, 20, 41, 0.71);
grid-area: contact;
padding: 20px 0;
/* SUMMARY-CONTACT */
#summary-contact{
grid-area: summary-contact;
position: relative;
font-family: 'Montserrat', sans-serif;
padding-top: 120px;
padding-bottom: 30px;
margin-right: -30px;
color: #dadada;
}

#contact-links .contact-link {
height: 40px;
line-height: 40px;
width: 100%;
margin: 0 20px 0 40px;
padding-left: 50px;
#summary-contact:after{
content: '';
position: absolute;
right: -30px;
top: -30px;
bottom: -30px;
border: 30px solid transparent;
border-left-color: #222221;
z-index: -2;
}
#summary-contact #summary{
padding: 30px 20px 20px 30px;
font-size: 20px;
line-height: 28px;
}
#summary-contact .contact{
line-height: 22px;
min-height: 25px;
font-size: 18px;
margin: 0 20px 15px 40px;
padding-left: 40px;
position: relative;
}

#contact-links .contact-link.icon:before {
#summary-contact .contact.icon:before{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
width: 25px;
height: 25px;
top: -1px;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: invert(0.9);
}

#contact-links .icon-mail:before { background: url("../img/icon-mail.png"); }
#contact-links .icon-phone:before { background: url("../img/icon-phone.png"); }
#summary-contact .icon-mail:before{ background: url("../img/icon-mail.png"); }
#summary-contact .icon-phone:before{ background: url("../img/icon-phone.png"); }
#summary-contact .icon-here:before{ background: url("../img/icon-here.png"); }
/* END CONTACT-LINKS */

/* SKILLS */
#skills .skill{ width: 100%; position: relative; height: 50px; line-height: 50px; padding-left: 20px; font-size: 25px; background: orange }
#skills .skill::before{ content: ''; position: absolute; height: 100%; left: 0; top: 0; background: red; width: 30%; mix-blend-mode: multiply; }
#skills{
grid-area: skills;
position: relative;
color: #fff;
padding: 20px 40px;
}

#skills .skill{
position: relative;
height: 32px;
line-height: 32px;
font-size: 20px;
font-weight: 500;
}
#skills .skill .skill-bar{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 50%;
transform: translateY(-50%);
height: 9px;
background: white;
}
progress::-webkit-progress-bar {
width: 100%;
margin:0;
background-color: #343434;
border-radius: 0;
}
progress::-webkit-progress-value {
background: white;
}
/* END SKILLS */

#experiences{
padding: 40px 60px;
grid-area: experiences;
font-family: 'Montserrat', sans-serif;
}

.experience{
margin-bottom: 35px;
}

.experience .experience-title {
font-weight: 700;
font-size: 24px;
color: #292929;
margin-bottom: 2px;
}

.experience .experience-place {
font-weight: normal;
font-style: italic;
font-size: 23px;
color: #414042;
margin-bottom: 5px;
}

.experience .experience-description {
font-weight: normal;
font-size: 20px;
color: #6d6e71;
}

footer{
background: lightblue;
grid-area: footer;
height: 150px;
}

/*
#7279a9
#636c9a
#4c548a
#434f7e
#41403b
#272924
*/
Binary file added img/en_flag.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/fr_flag.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/icon-here.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/icon-mail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/icon-phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 393f2c5

Please sign in to comment.