Update to html and css

5 years ago · dcfd7f01d7
--- a/about.css
+++ b/about.css
@ -0,0 +1,22 @@
 #content {
    top: 120px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
 }
 #content-title {
    position: relative;
    top: 20%;
    height: 80px;
    background-color: rgb(208, 208, 208);
    border-radius: 20px 20px 0px 0px;
    
 }
 #content-body {
    position: relative;
    background-color: rgb(242, 242, 242);
    border-radius: 0px 0px 20px 20px;
 }
 body {
    background-color: #232323;
 }
--- a/about.html
+++ b/about.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./about.css" />
 </head>
 <body>
    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
@ -27,14 +28,23 @@
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="./about">
                <a href="./about.html">
                    About
                </a>
            </li>
        </ul>
    </div>
    <div>
        This is where the body will be
    <div id="main">
        <div id="content" class="container">
            <div id="content-title">
                <h1 class="big-title text-center">Developers</h1>
            </div>
            <div id="content-body" class="container">
                <p>
                    some stuff will go here
                </p>
            </div>
        </div>
    </div>
 </body>
 </html>
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
    <div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
        <div id="header-title">
            <a href="./index.html">
                <img id="icon" src="./logo.svg" />
                <img id="logo" src="./logo.svg" />
            </a>
        </div>
        <ul id="navigation" class="nav justify-content-end">
@ -27,7 +27,7 @@
            </li>
            <div class="nav-sep"></div>
            <li class="nav-item">
                <a href="./about">
                <a href="./about.html">
                    About
                </a>
            </li>
--- a/style.css
+++ b/style.css
@ -1,5 +1,20 @@
@font-face {
    font-family: Comfortaa;
    src: url(./fonts/Comfortaa-Regular.ttf);
    font-weight: normal;
 }
@font-face {
    font-family: Comfortaa;
    src: url(./fonts/Comfortaa-Light.ttf);
    font-weight: lighter;
 }
@font-face {
    font-family: Comfortaa;
    src: url(./fonts/Comfortaa-Bold.ttf);
    font-weight: bold;
 }
 #header-bar {
    height: 70px;
    height: 10%;
    width: 100%;
    background-color: rgb(208, 208, 208);
 }
@ -8,13 +23,17 @@
    padding-left: 20px;
    font-size: 25px;
 }
 #icon {
    height: 60px;
 #logo {
    height: 40px;
 }
 #navigation {
    width: 70%;
    padding-right: 20px !important;

 }
 .big-title {
    font-family: Comfortaa;
    font-weight: bold;
    font-size: 60px;
 }
 .nav-sep {
    position: relative;
@ -24,6 +43,10 @@
    border-left: 2px solid #232323;
    height: 30px;
 }
 .nav-item {
    padding: 5px;
    font-size: 20px;
 }
 a {
    color: #232323;
    text-decoration: none;
@ -32,10 +55,6 @@ a:hover {
    color: rgb(57, 163, 225);
    text-decoration: none;
 }
 .nav-item {
    padding: 5px;
    font-size: 20px;
 }
 body {
    background-color: rgb(242, 242, 242);
 }