I intended to create a simple and clean website.
Therefore I made a sketch to get an idea of the look of my website.
I will also explain the basic of my code later on.
First of all I built a structure.
CSS, javascript and image files are stored in their own directories.
The index.html file from a website is the file that is always loaded first.
At the beginning the file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
The title tag represents the name of the page that is opened in the browser.
Now the CSS and javascript files have to be linked to the index.html file. This happens with a link and a script tag.
I also added a font from Google.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Majda Suljanovic</title>
</head>
<body>
</body>
</html>
The next step is to add the structure of the website shown in the sketch above.
For this I used div tags to reproduce the containers in the sketch and CSS classes to sort my code and style it later on:
<body>
<div class="header">
<div id="textoverdiv">
Fundamentals of Digital Fabrication
</div>
</div>
<div class="navbar">
<div class="home">
<a href="index.html">Home</a>
</div>
<div class="dropdown">
<div class="dropbtn"><a href="#projects" class="dropdownp">Projects</a></div>
<div class="dropdown-content">
<a href="project1.html">Project 1</a>
<!-- <a href="#">Link 2</a> -->
</div>
</div>
</div>
<div class="heading">
<p>About me<p>
</div>
<div class="content">
<p>
My name is Majda Suljanovic. <br>
I am 20 years old and studying Medien- und Kommunikationsinformatik <br>
at Hochschule Rhein-Waal in the fifth semester.
</p>
</div>
<div class="heading">
<p>My Projects<p>
</div>
<div class="content" id="projects">
<a href="project1.html" id="projectsa">
<div>
<img src="img/website.jpg" alt="Code of a website">
<p class="projectheading">
Project 1: Project Management
</p>
</div>
</a>
</div>
<div class="footer">
Created by Majda Suljanovic
</div>
</body>
Now it looks like this:
It does not look like the website on the sketch at all.
That is why CSS is needed. I started with the header.
I wanted a picture of the Hochschule Rhein-Waal and a text: "Fundamentals of Digital Fabrication" on it.
Here is the CSS code so far:
body {
font-family: 'Roboto', sans-serif !important;
}
.header {
width: 70%;
height: 400px;
margin: auto;
box-shadow: 0px 1px 4px #888888;
overflow: hidden;
position: relative;
text-align: center;
}
.header img {
max-width: 100%;
height: auto;
margin-top: -150px;
}
The header should have a width of 70% and portrayed in the middle of the screen-width. The "margin: auto" displays the header in the center.
I wanted the picture to be cut after the height of 400 pixels. So I needed to hide the overflow.
To make it appear more alive I added background shadows.
And now my header looks like this:
I completely rebuilt the sketch now and copied most of the CSS from my header.
My big problem was that my headings would float next to an element above them:
After a lot of trying I found out that there is a CSS option that clears an element from floating elements.
I simply had to add "clear: both" to my heading.
.heading {
font-size: 25px;
height: 35px;
border-bottom: 1px solid #888888;
width: 70%;
margin: auto;
clear: both;
font-weight: 550;
}
If you want to check out the old website click here: Old website
The website will be uploaded on GitLab.
For that I need Git Bash.
To configure my username and emailadress I use these commands:
Replace "myemailadress" with your real emailadress.
$ git config --global user.name "Majda"
$ git config --global user.email myemailadress
After that I have to generate an SSH key:
$ ssh-keygen -t rsa -C myemailadress
Now I have to get my public key.
$ cat /c/Users/Majda/.ssh/id_rsa.pub
Next I create a new project named "majda.Suljanovic" on: https://gitlab.com/dashboard/projects
$ cd /d/your/link/
$ git clone git@gitlab.com:Majdaa/majda.suljanovic.git
Now I can switch to the directory of my project.
$ cd majda.suljanovic
Here I store all of my website files which will be uploaded. The following code adds every file at once:
$ git add -A .
I commit my files with a note what I did:
Now I can push my files:
To get my own link on GitLab to my project I did the following:
I go to my repository and add a new file:
Choosing the .yml type:
Applying the HTML-template:
After submitting the file I had to wait circa 15 minutes until my website could be reached.
You can find your own link under: Your repository > settings > pages
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Now I can use their classes to build my website.
<nav class="blue-grey lighten-3" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Navbar Link</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="#">Navbar Link</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li><a href="project1.html" class="black-text">Project 1</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 2</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 3</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 4</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 5</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 6</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 7</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 8</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 9</a></li>
<li><a href="#!" class="dropdisabled grey-text">Project 10</a></li>
</ul>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<ul class="right hide-on-med-and-down">
<li><a href="index.html" class="black-text">Home</a></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger black-text" href="#!" data-target="dropdown1">Projects<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="index.html" class="black-text">Home</a></li>
<li><a href="project1.html" class="black-text">Project 1</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
.dropdisabled {
cursor: default !important;
color: white;
}
#dropdown1 li {
color: white;
}
.dropdisabled:hover {
color: white;
background-color: unset;
}
Under the navbar I am positioning a picture.
<div class="parallax-container">
<div class="parallax" ><img src="img/parallax.jpg"></div>
</div>
However the container zooms in the picture and makes it look blurred.
<div class="container">
<div class="row">
<div class="col s12">
<br> <br>
<h4>About me</h4>
</div>
<div class="col s12">
<p>
My name is Majda Suljanovic. <br>
I am 20 years old and studying Media Communication and Computer Science <br>
at Hochschule Rhein-Waal in the fifth semester.
<br><br>
</p>
</div>
<div class="col s12">
<h4>My Projects<h4>
</div>
<div class="col s12 m5">
<a href="project1.html">
<div class="card projectimage" id="project1">
<div class="card-image">
<img src="img/website.jpg">
<span class="card-title">Project Management</span>
</div>
<div class="card-action">
<a href="project1.html" class="blue-grey-text darken-1-text">Project 1</a>
</div>
</div>
<br><br>
</a>
</div>
</div>
</div>
I used Javascript respectively jQuery to add CSS effects when the mouse hovers over the whole div.
The problem with only CSS is, that hovering is only triggered when the image is hovered and not the div.
If you hover for example the title, the picture stays grey.
I also needed the ID of the hovered element because otherwise it would have effected every project card.
$(".projectimage").mouseover(function() {
var id = $(this).attr('id');
$("#" + id + " img").css({"cursor": "pointer", "-webkit-filter": "grayscale(0%)", "filter": "grayscale(0%)", "transition-duration": "0.2s"});
});
$(".projectimage").mouseleave(function() {
var id = $(this).attr('id');
$("#" + id + " img").css({"-webkit-filter": "grayscale(100%)", "filter": "grayscale(100%)", "transition-duration": "0.2s"});
});
.card-image:hover {
cursor: pointer;
}
At the end I added a second parallax-container and my old footer.