cd Douments/Website
Now I initialized my local git folder
git init
and finally I cloned the git repository using the repository link
git clone git@gitlab.fabcloud.org:academany/fabacademy/2019/labs/kamplintfort/students/hakan-zayin.git
Now the connection to the git repository was completed. I personally am used to html more, so I decided to push up my own website. To do this I had to remove the website that is inside of the repository.
Attention: only delete old website files, do not delete mkdocs, README or requirements file. Put all the files into the docs folder!
Using git
First things first I had to add everything inside my git folder to the repository, using the "." menas selecting everything. git add .
After using commands in the git console, dont matter if deleting or adding files, I needed to commit my changes.
git commit -m "commit message"
now I can push my files for the first time.
Attention : It is possible that git wants you to pull first before you can push!
git push
When the push is complete my website should be updated after a few minutes.
MY WEBSITE
I did not want to use any framework to do the design so I made a design on my own, because every framkework website looks exaclty like every other website made with that framework and I wanted to change that. I have used sublime text as a programming software, a simple code editor. I prefer using sublime text because it has a very simple interface and is perfect for web development, also it has a lot of plugins which will make the work easier and faster to finish.
The code on my website is quite easy to catch. I started off with declaring a background image in the css file.
body{
width: 100%;
background: url(media/background.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family: Helvetica;}
Then I declared a navigation bar, using a unordered list. Every list element is a href to the actual site they have to navigate.
div class="menu">
ul>
li>a href="index.html">Home
li>a href="assignments.html">Assignments
li>a href="final.html">Final Project
li>a href="about.html">About
/ul>
/div>
In the css file i declared the list elements to have a hover so they act like buttons
.menu ul{
list-style: none; //no list style
}
.menu ul li{
display: inline-block; //the way the content will be displayed
}
.menu ul li a{
text-decoration: none; //no decoration to the text
color: #fff; //color of the text
font-size: 16px; //font size
font-weight: lighter;
padding: 20px; //distance to other objects
padding-bottom: 15px; //distance to bottom objects
}
.border{
margin: 10%; //distance to every side
margin-top: 10%; //distance to top
color: white;
/*background: rgba(248,248,255,0.1);*/
}
ul a.active{
background-color: #4CAF50; //when link is clicked
color: white; //staying white
}
ul a:hover:not(.active){
background: rgba(0,0,0,0.5); //when hovering over a link in the nav bar