css reformat in seperate files
This commit is contained in:
lukas-heiligenbrunner
51
css/about.css
Normal file
51
css/about.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/* About Me*/
|
||||||
|
#aboutmeText {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aboutcontainer {
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aboutPicContainer {
|
||||||
|
width: 60%;
|
||||||
|
height: 300px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#aboutPic {
|
||||||
|
float: right;
|
||||||
|
margin-top: 10%;
|
||||||
|
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* special design for Screen smaller than 600px -- mobile */
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
/* About Me*/
|
||||||
|
#aboutmeText {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aboutcontainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aboutPicContainer {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#section2 {
|
||||||
|
height: 130%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#aboutPic {
|
||||||
|
float: initial;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
/* todo nof loating right in middle */
|
||||||
|
}
|
||||||
|
}
|
||||||
37
css/general.css
Normal file
37
css/general.css
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* general definition of a tile */
|
||||||
|
.tile {
|
||||||
|
height: 80%;
|
||||||
|
padding-top: 70px;
|
||||||
|
padding-bottom: 70px;
|
||||||
|
min-height: 530px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nav item formattings */
|
||||||
|
.nav-item {
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
font: bold 15px/1.4 'Open Sans', arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* screen larger than 600px -- desktop */
|
||||||
|
@media screen and (min-width: 1201px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Screen smaller than 600px -- mobile */
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
/*background color of collapsed navbar*/
|
||||||
|
.navbar-nav {
|
||||||
|
background: #311E25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
75
css/home.css
Normal file
75
css/home.css
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
#section1 {
|
||||||
|
background-color: #311E25;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightOpacity {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigText {
|
||||||
|
font-family: 'Helvetica Neue', fantasy;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preTitle {
|
||||||
|
opacity: 0.8;
|
||||||
|
color: #fffd80;
|
||||||
|
}
|
||||||
|
|
||||||
|
#homepicture {
|
||||||
|
float: left;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* screen larger than 600px -- desktop */
|
||||||
|
@media screen and (min-width: 1201px) {
|
||||||
|
#section1 {
|
||||||
|
padding-top: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preTitle {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#titleText {
|
||||||
|
font-size: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subTitleText {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#meaningFullSentence {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Screen smaller than 600px -- mobile */
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
#section1 {
|
||||||
|
padding-top: 100px;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preTitle {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#titleText {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subTitleText {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#meaningFullSentence {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#homepicture {
|
||||||
|
height: 300px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
154
css/index.css
154
css/index.css
@@ -1,154 +0,0 @@
|
|||||||
body, html {
|
|
||||||
height: 100%;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile {
|
|
||||||
height: 80%;
|
|
||||||
padding-top: 70px;
|
|
||||||
padding-bottom: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-decoration: none;
|
|
||||||
font: bold 15px/1.4 'Open Sans', arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section1 {
|
|
||||||
background-color: #311E25;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightOpacity {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bigText {
|
|
||||||
font-family: 'Helvetica Neue', fantasy;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preTitle {
|
|
||||||
opacity: 0.8;
|
|
||||||
color: #fffd80;
|
|
||||||
}
|
|
||||||
|
|
||||||
#homepicture {
|
|
||||||
float: left;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About Me*/
|
|
||||||
#aboutmeText {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aboutcontainer {
|
|
||||||
width: 40%;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aboutPicContainer {
|
|
||||||
width: 60%;
|
|
||||||
height: 300px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#aboutPic {
|
|
||||||
float: right;
|
|
||||||
margin-top: 10%;
|
|
||||||
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* screen larger than 600px -- desktop */
|
|
||||||
@media screen and (min-width: 1201px) {
|
|
||||||
.tile {
|
|
||||||
min-height: 530px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section1 {
|
|
||||||
padding-top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preTitle {
|
|
||||||
font-size: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titleText {
|
|
||||||
font-size: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#subTitleText {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#meaningFullSentence {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Screen smaller than 600px -- mobile */
|
|
||||||
@media screen and (max-width: 1200px) {
|
|
||||||
/*background color of collapsed navbar*/
|
|
||||||
.navbar-nav {
|
|
||||||
background: #311E25;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile {
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section1 {
|
|
||||||
padding-top: 100px;
|
|
||||||
height: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preTitle {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titleText {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#subTitleText {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#meaningFullSentence {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#homepicture {
|
|
||||||
height: 300px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About Me*/
|
|
||||||
#aboutmeText {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aboutcontainer {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aboutPicContainer {
|
|
||||||
width: 100%;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section2 {
|
|
||||||
height: 130%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#aboutPic {
|
|
||||||
float: initial;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
/* todo nof loating right in middle */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -15,7 +15,9 @@
|
|||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<link rel="stylesheet" href="css/general.css">
|
||||||
|
<link rel="stylesheet" href="css/home.css">
|
||||||
|
<link rel="stylesheet" href="css/about.css">
|
||||||
</head>
|
</head>
|
||||||
<!-- The scrollable area -->
|
<!-- The scrollable area -->
|
||||||
<body data-spy="scroll" data-target=".navbar" data-offset="50">
|
<body data-spy="scroll" data-target=".navbar" data-offset="50">
|
||||||
|
|||||||
Reference in New Issue
Block a user