<body>
<div class="container">
<!-- nav bar -->
<div class="navbar">
<ul style="padding-left: 0px;">
<li class="logo"> <a href="#"> rosa swaby </a> </li>
<section class="div_navbar_items">
<li class="navbar_items"> <a href="#home"> home </a> </li>
<li class="navbar_items"> <a href="#about_me"> about me </a> </li>
<li class="navbar_items"> <a href="#skills"> skills </a> </li>
<li class="navbar_items"> <a href="#projects"> projects </a> </li>
<li class="navbar_items"> <a href="#contact"> contact </a> </li>
</section>
<li class="icon">
<a href="#" onclick="navBarFunction()"> ☰</a>
</li>
</ul>
</div>
<!-- closing navbar -->
<div class="intro">
<p> Hi! I'm Rosa! </p>
</div>
<!-- closing container div -->
</div>
</body>@import 'https://fonts.googleapis.com/css?family=Quicksand';
body {
background-color: #17171e;
}
.container {
/*
background-color: pink;
height:1500px; testing*/
margin: auto;
width: 90%;
}
.navbar {
position: fixed;
z-index: 100;
overflow: hidden;
margin: auto;
/* background-color: #ecc9cd; */
width: 100%;
left:0;
top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
list-style-type: none;
display: inline-block;
}
.navbar li a {
font-family: Quicksand;
font-size: 1.05em;
color: white;
display: inline-block;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.navbar li.navbar_items a:hover {
border-bottom-style: solid;
border-bottom-color: white;
/* padding-bottom: 5px; */
}
.navbar li.icon {
display: none;
}
.div_navbar_items {
float: right;
padding-right:1%;
}
.intro{
position: relative;
top: 100px;
text-align:center;
}
p {
color:white;
font-size: 20px;
font-family: Quicksand;
}
/* ----------------------- */
/* responsive navigation bar: CSS */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("navbar_name"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:875px) {
.navbar li.navbar_items {
display: none;
}
.navbar li.icon {
float: right;
display: inline-block;
position: absolute;
right: 0;
top: 19px;
}
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens */
@media screen and (max-width:875px) {
.navbar.responsive {
position:fixed;
width: 100%;
height: 100vh;
background-color: rgba(236,201,205, 1);
transition: background-color .6s;
}
.navbar.responsive li.logo {
floatL: left;
display: block;
}
.navbar.responsive .div_navbar_items {
float: none;
padding-right:0;
}
.navbar.responsive li.navbar_items {
display: block;
padding: 50px;
font-size: 25px;
}
.navbar.responsive li.navbar_items a {
display: block;
text-align: center;
}
.navbar.responsive li.navbar_items a:hover{
color:#17171e;
border-bottom-color: transparent;
}
}
/* end of navgation bar styling - responsive */function navBarFunction() {
document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}
External CSS
This Pen doesn't use any external CSS resources.