website/assets/css/style_desktop.css

179 lines
2.6 KiB
CSS
Raw Normal View History

2020-07-08 20:24:13 +02:00
/* Hide Mobile Divs */
#nav_mobile_div {
visibility: hidden;
display: none;
}
#mobilenavbar {
visibility: hidden;
display: none;
}
#mobilenavbar_spacer {
visibility: hidden;
display: none;
}
#mobilenavbtn {
visibility: hidden;
display: none;
}
#closebtn {
visibility: hidden;
display: none;
}
.flexparent_row {
width: 95vw;
}
#content {
margin: auto;
width: 90vw;
background-color: #222222;
}
/* Desktop split page */
.halfpage {
width: 46%;
margin:0 2%;
}
/* Nav Desktop */
#nav_desktop {
height: 85px;
background-color: #111111;
position: fixed;
width: 100%;
z-index: 1;
}
#nav_desktop_spacer {
height: 85px;
position: relative;
width: 100%;
z-index: 0;
}
#navlogo {
top: 15px;
height: 55px;
position: fixed;
right: 20px;
z-index: 1;
}
/* Bottom Navbar */
#nav_bottom_div {
width: 100%;
height: 80px;
align-items: center;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
}
ul.nav_bottom {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
li.nav {
float: left;
display: inline;
position: relative;
}
li a.nav {
display: inline-block;
color: white;
text-align: center;
padding: 30px 16px 15px;
text-decoration: none;
position: relative;
font-family: 'Montserrat', 'sans-serif';
}
li a:after {
content: "";
position: relative;
width: 100%;
height: 3px;
background: #0074D9;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
display: inline-block;
}
li a:hover:after,
li a:focus:after {
visibility: visible;
transform: scaleX(1);
}
/* Desktop Contact Form */
#contact_form {
border-radius: 5px;
border: 3px solid #0074D9;
background-color: #111111;
padding: 20px;
color: white;
margin: 20px 20px;
position: relative;
}
input[type=submit].contact {
width: 100px;
margin: 8px 0;
}
#contactinput {
order: 1;
}
#contacttextbox {
order: 2;
}
#contactinfo {
order: 3;
text-align: left;
}
#contactbtn {
order: 4;
text-align: right;
}
/* portfolio & projects */
.portentity {
width: 90vw;
max-width: 450px;
}
/* resume */
#resumeleft {
position: fixed;
width: 400px;
}
.fourhundred {
width: 400px;
margin:0 2%;
}
.eighthundred {
min-width: 600px;
max-width: 800px;
margin:0 2%;
}