Skip to content

Commit 5150b3e

Browse files
Mihael SandroMihael Sandro
Mihael Sandro
authored and
Mihael Sandro
committed
first comit
0 parents  commit 5150b3e

12 files changed

+1665
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# https://git-scm.com/docs/gitignore
2+
# https://help.github.com/articles/ignoring-files
3+
# Example .gitignore files: https://github.com/github/gitignore
4+
/bower_components/
5+
/node_modules/

‎about.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Mihael Sandro</title>
9+
</head>
10+
11+
<body>
12+
<header>
13+
<!--burger menu school example -->
14+
<input type="checkbox" id="toggle">
15+
<label for="toggle"> <img class="burger" src="burger.svg" alt="yo issa burger"></label>
16+
<nav>
17+
<ul>
18+
<li> <a class="navblue" href="index.html">Home</a> </li>
19+
<li> <a class="navblue" href="projects.html">Projects</a> </li>
20+
<li> <a class="navblue" href="about.html">About</a> </li>
21+
</ul>
22+
</nav>
23+
</header>
24+
<h1 class="verticaltxt">About</h1>
25+
<main>
26+
<article>
27+
28+
<div><img class="portrait" src="images/Mihael%20Sandro.jpg" alt="selfportrait"></div>
29+
<p>20 years old Multimedia design and communication student at KEA, Copenhagen. For four years now, I have been in creative fields like graphic design, photography and videography. Firstly, I begun with photography and my second favorite hobby, skateboarding, where I was introduced with film making and graphic design. Through last couple of years, I collaborated on various projects with a lot of professional skateboarders, snowboarders and wakeboarders.</p>
30+
31+
</article>
32+
33+
34+
35+
</main>
36+
</body>
37+
38+
<script src="javas.js"></script>
39+
40+
</html>

‎burger.svg

+276
Loading

‎header.svg

+1,026
Loading

‎images/Interactive-animation

62.5 KB
Binary file not shown.

‎images/Mihael Sandro.jpg

2.69 MB
Loading

‎images/adi.jpg

1.28 MB
Loading

‎index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Mihael Sandro</title>
9+
</head>
10+
11+
<body class="homepg">
12+
<header>
13+
14+
15+
<input type="checkbox" id="toggle">
16+
<label for="toggle"> <img class="burger" src="burger.svg" alt="yo issa burger"></label>
17+
<nav>
18+
<ul>
19+
<li> <a href="projects.html">Projects</a> </li>
20+
<li> <a href="about.html">About</a> </li>
21+
</ul>
22+
</nav>
23+
24+
25+
26+
</header>
27+
<main>
28+
<section>
29+
<h1>
30+
Mihael Sandro
31+
</h1>
32+
<p> Graphic design, motion graphics, UI and love for letters and typography.</p>
33+
</section>
34+
</main>
35+
<img src="header.svg">
36+
</body>
37+
38+
<script src="javas.js"></script>
39+
</html>

‎javas.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* let menu = document.querySelector("#myNav");
2+
3+
menu.addEventListener('mouseover', openMenu);
4+
5+
function openMenu() {
6+
console.log("open menu bro");
7+
8+
9+
}
10+
11+
12+
Open when someone clicks on the span element
13+
function openNav() {
14+
document.querySelector("myNav").style.width = "100%";
15+
}
16+
17+
/* Close when someone clicks on the "x" symbol inside the overlay
18+
function closeNav() {
19+
document.getElementById("myNav").style.width = "0%";
20+
}
21+
22+
23+
24+
25+
menu.addEventListener('mouseover', colorComes);
26+
27+
function colorComes() {
28+
console.log("broski");
29+
bruh.classList.add("retardcolor");
30+
menu.addEventListener("mouseout", colorGoes)*/

‎pattern.svg

+43
Loading

‎projects.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Mihael Sandro</title>
9+
</head>
10+
11+
<body>
12+
<header>
13+
<!--burger menu school example -->
14+
<input type="checkbox" id="toggle">
15+
<label for="toggle"> <img class="burger" src="burger.svg" alt="yo issa burger"></label>
16+
<nav>
17+
<ul>
18+
<li> <a class="navblue" href="index.html">Home</a> </li>
19+
<li> <a class="navblue" href="projects.html">Projects</a> </li>
20+
<li> <a class="navblue" href="about.html">About</a> </li>
21+
</ul>
22+
</nav>
23+
</header>
24+
<h1 class="verticaltxt">Projects</h1>
25+
<main>
26+
<article class="projectpg">
27+
<figure>
28+
<img class="imgproject" src="images/Interactive-animation">
29+
30+
</figure>
31+
<figure>
32+
<img class="imgproject" src="images/Interactive-animation">
33+
34+
</figure>
35+
<figure>
36+
<img class="imgproject" src="images/Interactive-animation">
37+
38+
</figure>
39+
</article>
40+
</main>
41+
</body>
42+
43+
<script src="javas.js"></script>
44+
45+
</html>

‎style.css

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
html, body {
2+
width: 100%;
3+
height: 100%;
4+
}
5+
6+
.homepg {
7+
background-color: #1946bb;
8+
}
9+
10+
@import url('https://fonts.googleapis.com/css?family=Raleway');
11+
.projectpg {
12+
background: url(pattern.svg) repeat center fixed;
13+
background-size: 15%;
14+
}
15+
16+
header {
17+
max-height: 10%;
18+
max-width: 100%;
19+
}
20+
21+
article {
22+
width: 100%;
23+
}
24+
25+
input {
26+
display: none;
27+
}
28+
29+
label {
30+
float: right;
31+
color: black;
32+
display: inline-block;
33+
cursor: pointer;
34+
}
35+
36+
nav {
37+
max-height: 0;
38+
overflow: hidden;
39+
}
40+
41+
input:checked~nav {
42+
max-height: 500px;
43+
transition: all 1s;
44+
}
45+
46+
nav ul {
47+
list-style: none;
48+
margin: 8px 0 0 0;
49+
}
50+
51+
nav a {
52+
color: white;
53+
display: block;
54+
padding: 6px 12px;
55+
text-decoration: none;
56+
}
57+
.navblue{
58+
color: #1946bb;
59+
}
60+
.burger {
61+
width: 30%;
62+
height: 100%;
63+
background: url(burger.svg) no-repeat;
64+
background-size: 100%;
65+
margin-right: 3%;
66+
float: right;
67+
}
68+
69+
h1 {
70+
margin: auto;
71+
text-align: center;
72+
margin: auto;
73+
font-family: 'Raleway', serif;
74+
font-size: 2em;
75+
font-weight: 200;
76+
font-style: italic;
77+
color: #fc4f00;
78+
}
79+
80+
p {
81+
font-family: 'Raleway', sans-serif;
82+
color: #fe9d0d;
83+
margin: auto;
84+
font-size: 1.5em;
85+
text-align: center;
86+
}
87+
88+
h2 {
89+
text-align: center;
90+
font-family: 'Playfair Display', serif;
91+
font-size: 2em;
92+
}
93+
94+
.active {
95+
text-decoration-line: line-through;
96+
color: black;
97+
}
98+
99+
.imgproject {
100+
max-width: 20em;
101+
max-height: 20em;
102+
}
103+
104+
.portrait {
105+
width: 80%;
106+
position: inherit;
107+
right: 0;
108+
}
109+
110+
nav li {
111+
font-family: 'Raleway', serif;
112+
font-weight: 200;
113+
font-style: italic;
114+
}
115+
116+
@media only screen and (min-width:874px) {
117+
main {
118+
display: grid;
119+
grid-template-columns: repeat(12, 1fr);
120+
}
121+
header,
122+
nav {
123+
grid-template-columns: repeat(12, 1fr);
124+
grid-column: 3/10;
125+
max-height: 3em;
126+
padding: 10px;
127+
}
128+
footer {
129+
grid-column: 1/-1;
130+
}
131+
article {
132+
grid-column: 3/11;
133+
}
134+
nav li {
135+
font-family: 'Raleway', serif;
136+
font-size: 1.5em;
137+
font-weight: 200;
138+
font-style: italic;
139+
140+
}
141+
142+
ul {
143+
position: fixed;
144+
right: 10px;
145+
margin: auto;
146+
padding-bottom: 2%;
147+
}
148+
label {
149+
display: none;
150+
}
151+
h1 {
152+
font-size: 6em;
153+
margin: 7%;
154+
}
155+
.verticaltxt {
156+
position: fixed;
157+
transform: rotate(-90deg) translate( -300px);
158+
transform-origin: left top;
159+
float: left;
160+
z-index: -1;
161+
}

0 commit comments

Comments
 (0)