css reformat in seperate files
This commit is contained in:
lukas-heiligenbrunner
parent
8bd8985995
commit
f8d599de22
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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- The scrollable area -->
|
||||
<body data-spy="scroll" data-target=".navbar" data-offset="50">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user