6 Commits

Author SHA1 Message Date
f28184a350 readded projects tile 2020-03-25 22:27:17 +01:00
cdcaaffe87 Merge branch 'master' into 'projectstile'
merge master into projects

See merge request lukas/personalwebsite!1
2020-03-25 21:24:44 +00:00
e9c6b09688 mobile navbar background
back to top buttoncolor
2020-03-25 22:13:15 +01:00
6c3fecaf68 delete name tag on mobiles 2020-03-22 18:07:58 +01:00
c32b972bdb improved colors and fonts 2020-03-20 21:40:51 +01:00
ecf4f5b6d5 changed color theming to blues 2020-03-20 21:27:57 +01:00
6 changed files with 48 additions and 19 deletions

View File

@ -6,7 +6,7 @@
*/ */
#section2 { #section2 {
background-color: #ffc107; background-color: #deebff;
} }
#aboutmeText { #aboutmeText {
@ -41,12 +41,12 @@
width: 300px; width: 300px;
padding: 10px; padding: 10px;
background-color: #ba9320; background-color: #7a96c2;
color: black; color: black;
border-radius: 5mm; border-radius: 5mm;
font-size: larger; font-size: larger;
border-width: 1mm; border-width: 1mm;
border-color: #7f6721; border-color: #194378;
border-style: solid; border-style: solid;
transition: background-color 500ms; transition: background-color 500ms;
@ -55,7 +55,7 @@
#downloadcvbtn:hover { #downloadcvbtn:hover {
/*background-color: #facf4d;*/ /*background-color: #facf4d;*/
color: white; color: white;
background-color: #7f6721; background-color: #194378;
transition: all 500ms; transition: all 500ms;
} }

View File

@ -6,7 +6,7 @@
*/ */
#section5 { #section5 {
background-color: #dc3545; background-color: #7a96c2;
} }
.personalcontacts { .personalcontacts {
@ -36,11 +36,13 @@
padding: 10px; padding: 10px;
border-radius: 5mm; border-radius: 5mm;
font-size: larger; font-size: larger;
color: white; color: black;
} }
.contactsign:hover { .contactsign:hover {
background-color: #972f38; color: white;
background-color: #194378;
transition: background-color 500ms;
} }
#section5 { #section5 {

View File

@ -6,7 +6,8 @@
*/ */
#section3 { #section3 {
background-color: #53bf65; background-color: #001631;
color: white;
} }
.content > div { .content > div {
@ -34,7 +35,7 @@
border: 6mm solid hsla(0, 100%, 50%, 0); border: 6mm solid hsla(0, 100%, 50%, 0);
padding-left: 2mm; padding-left: 2mm;
border-left-color: #357840; border-left-color: #194378;
transition: border-left-color 500ms; transition: border-left-color 500ms;
border-bottom-right-radius: 5mm; border-bottom-right-radius: 5mm;
@ -42,8 +43,8 @@
} }
.tab:hover { .tab:hover {
color: aqua; color: #74f9d4;
background-color: #357840; background-color: #194378;
transition: background-color 500ms; transition: background-color 500ms;
cursor: pointer; cursor: pointer;
} }
@ -59,7 +60,7 @@
width: 80%; width: 80%;
top: -200px; top: -200px;
height: 260px; height: 260px;
background-color: #357840; background-color: #194378;
color: white; color: white;
border-radius: 5mm; border-radius: 5mm;
} }
@ -77,7 +78,7 @@
} }
.companyname { .companyname {
color: aqua; color: #74f9d4;
} }
.experienceworktext { .experienceworktext {
@ -122,7 +123,7 @@
.ratiobtn:checked + .tab { .ratiobtn:checked + .tab {
color: aqua; color: aqua;
background-color: #146d23; background-color: #234177;
transition: border-left-color 500ms; transition: border-left-color 500ms;
} }

View File

@ -12,6 +12,12 @@ body, html, #maincontent {
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
} }
h1{
text-transform: uppercase;
font-family: 'Open Sans', arial, sans-serif;
font-weight: bold;
}
/* general definition of a tile */ /* general definition of a tile */
.tile { .tile {
height: 80%; height: 80%;
@ -29,7 +35,7 @@ body, html, #maincontent {
margin-bottom: 40px; margin-bottom: 40px;
margin-right: 60px; margin-right: 60px;
background-color: #311E25; background-color: #194378;
opacity: 0.5; opacity: 0.5;
transition: opacity 500ms; transition: opacity 500ms;
color: white; color: white;
@ -59,7 +65,7 @@ body, html, #maincontent {
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
/*background color of collapsed navbar*/ /*background color of collapsed navbar*/
.navbar-nav { .navbar-nav {
background: #311E25; background: #001631;
} }
#backtotopbutton { #backtotopbutton {

View File

@ -6,7 +6,7 @@
*/ */
#section1 { #section1 {
background-color: #311E25; background-color: #001631;
color: white; color: white;
padding-top: 200px; padding-top: 200px;
} }
@ -22,7 +22,7 @@
#preTitle { #preTitle {
font-size: 35px; font-size: 35px;
opacity: 0.8; opacity: 0.8;
color: #fffd80; color: #78ffd9;
} }
#homepicture { #homepicture {
@ -39,14 +39,17 @@
#titleText { #titleText {
font-size: 80px; font-size: 80px;
color: #ced5f6;
} }
#subTitleText { #subTitleText {
font-size: 50px; font-size: 50px;
color: #bec1d4;
} }
#meaningFullSentence { #meaningFullSentence {
width: 40%; width: 40%;
color: #babccd;
} }
/* todo maybe a bit weird?? */ /* todo maybe a bit weird?? */
@ -90,6 +93,11 @@
height: 300px; height: 300px;
width: 100%; width: 100%;
} }
/* hide name tag on mobiles */
#nameTag {
display: none;
}
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {

View File

@ -27,7 +27,7 @@
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="maincontent"> <div id="maincontent">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top"> <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#">Lukas</a> <a class="navbar-brand" href="#"><div id="nameTag">Lukas</div></a>
<!-- Toggler/collapsibe Button --> <!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -198,6 +198,18 @@
</div> </div>
</div> </div>
<!-- Projects Page -->
<div id="section4" class="bg-secondary tile">
<div class="container">
<h1>Projects</h1>
<p>Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo
Projects Page! </p>
</div>
</div>
<!-- Contact Page --> <!-- Contact Page -->
<div id="section5" class="tile"> <div id="section5" class="tile">
<div class="container"> <div class="container">