Skip to content

Commit bb21fdb

Browse files
dic14svidic14svi
committed
Initial commit
0 parents  commit bb21fdb

File tree

6 files changed

+286
-0
lines changed

6 files changed

+286
-0
lines changed

‎GitHub-Mark-Light-64px.png‎

2.28 KB
Loading

‎bgpattern.png‎

21 KB
Loading

‎djupvik.png‎

65.8 KB
Loading

‎index.html‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<html lang="sv">
5+
</head>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
html {
12+
font-family: sans-serif;
13+
scroll-behavior: smooth;
14+
padding-top: 0;
15+
background-color: black;
16+
}
17+
body {
18+
padding: 0;
19+
margin: 0;
20+
font-color: white;
21+
}
22+
23+
h1 {
24+
text-align:center;
25+
color: white;
26+
font-size: 300%;
27+
margin: 0em;
28+
}
29+
30+
#name {
31+
text-align:center;
32+
color: white;
33+
font-size: 300%;
34+
}
35+
#job-title {
36+
text-align:center;
37+
color: white;
38+
font-size: 150%;
39+
font-weight: 200;
40+
padding: 0em;
41+
margin-top: 1em;
42+
}
43+
44+
p {
45+
text-align:left;
46+
color: white;
47+
font-size: 100%;
48+
}
49+
a {
50+
color: white;
51+
text-decoration: none;
52+
font-size: 100%;
53+
}
54+
55+
#portfolio-link {
56+
text-align:center;
57+
color: white;
58+
font-size: 200%;
59+
font-weight: 200;
60+
padding: 0em 0em;
61+
margin-top: 2em;
62+
}
63+
64+
a.orange {
65+
color: orange;
66+
}
67+
a.red {
68+
color: red;
69+
}
70+
a.purple {
71+
color: purple;
72+
}
73+
a.green {
74+
color: green;
75+
}
76+
a.blue {
77+
color: blue;
78+
}
79+
a.black {
80+
color: black;
81+
}
82+
a:hover {
83+
text-decoration: underline;
84+
}
85+
div.status {
86+
text-align: center;
87+
margin: auto;
88+
width: 80%;
89+
border: 0px solid green;
90+
padding: 10px;
91+
}
92+
div.links {
93+
text-align: center;
94+
margin: auto;
95+
width: 30%;
96+
border: 0px solid green;
97+
}
98+
/*
99+
div.center links{
100+
width: 50%;
101+
text-align: right;
102+
display: block;
103+
margin-left: auto;
104+
margin-right: auto;
105+
} */
106+
div.center {
107+
margin: auto;
108+
/* width: 50%; */
109+
max-width: 40em;
110+
}
111+
112+
div.page {
113+
padding: 10em;
114+
}
115+
116+
div.fs {
117+
height: 100vh;
118+
119+
/* retain height */
120+
-webkit-box-sizing: border-box;
121+
-moz-box-sizing: border-box;
122+
box-sizing: border-box;
123+
}
124+
125+
div.bg {
126+
/* center background */
127+
background: url(start_background_bw.jpg) no-repeat center bottom; /* fixed */
128+
-webkit-background-size: cover;
129+
-moz-background-size: cover;
130+
-o-background-size: cover;
131+
background-size: cover;
132+
}
133+
134+
div.contact-box {
135+
margin-bottom: 5em;
136+
}
137+
138+
.fl {
139+
float: left;
140+
}
141+
142+
.project-info {
143+
padding: 0 1em;
144+
}
145+
146+
.wrapper {
147+
display: grid;
148+
grid-template-columns: all all;
149+
grid-gap: 10px;
150+
color: #444;
151+
margin: auto;
152+
padding: 0;
153+
}
154+
155+
.box {
156+
background-color: #444;
157+
color: #fff;
158+
border-radius: 5px;
159+
padding: 20px;
160+
font-size: 150%;
161+
}
162+
163+
form {
164+
padding: 2em 0;
165+
text-align: center;
166+
}
167+
168+
/* Style inputs with type="text", select elements and textareas */
169+
input[type=text], select, textarea {
170+
width: 100%; /* Full width */
171+
padding: 12px; /* Some padding */
172+
border: 1px solid #ccc; /* Gray border */
173+
border-radius: 4px; /* Rounded borders */
174+
box-sizing: border-box; /* Make sure that padding and width stays in place */
175+
margin-top: 6px; /* Add a top margin */
176+
margin-bottom: 16px; /* Bottom margin */
177+
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
178+
}
179+
180+
/* Style the submit button with a specific background color etc */
181+
input[type=submit] {
182+
background-color: white;
183+
color: black;
184+
padding: 12px 20px;
185+
border: none;
186+
border-radius: 4px;
187+
cursor: pointer;
188+
}
189+
190+
/* When moving the mouse over the submit button, add a darker green color */
191+
input[type=submit]:hover {
192+
background-color: silver;
193+
}
194+
195+
/* Add a background color and some padding around the form */
196+
.container {
197+
border-radius: 5px;
198+
background-color: #f2f2f2;
199+
padding: 20px;
200+
}
201+
202+
footer {
203+
min-height: 10em;
204+
/*
205+
border-color: white;
206+
border-width: 2px;
207+
border-style: solid;
208+
*/
209+
}
210+
211+
img {
212+
display: block;
213+
margin: auto;
214+
}
215+
216+
</style>
217+
</head>
218+
<body>
219+
<div class="page fs bg">
220+
<h1 id="name">Sebastian Axel Wikstr&#246;m</h1>
221+
<h2 id="job-title">front-end developer</h2>
222+
<p id="portfolio-link"><a href="#portfolio">[PORTFOLIO]</a></p>
223+
</div>
224+
225+
<div id="portfolio" class="page">
226+
<h1 id="name">MY WORK</h1>
227+
228+
<div class="wrapper center">
229+
<div class="box a">
230+
<img class="fl" src="djupvik.png" alt="">
231+
<div class="fl project-info">
232+
<h3>Djupviks Hamn</h3>
233+
<p>HTML, CSS, Javascript</p>
234+
<p>Project description</p>
235+
<a href="projects/djupvik/index.html">DEMO</a>
236+
</div>
237+
</div>
238+
<div class="box b">
239+
<img class="fl" src="seaxwi.png" alt="">
240+
<div class="fl project-info">
241+
<h3>seaxwi.com</h3>
242+
<p>HTML, CSS</p>
243+
<p>Project description</p>
244+
<a href="">DEMO</a>
245+
</div>
246+
</div>
247+
<!--
248+
<div class="box c">
249+
<img class="fl" src="bgpattern.png" alt="">
250+
<div class="fl project-info">
251+
<h3>TBA</h3>
252+
<p>Tech 1, Tech 2</p>
253+
<p>Project description</p>
254+
<a>DEMO</a>
255+
</div>
256+
</div>
257+
-->
258+
</div>
259+
</div>
260+
<div class="contact-box center">
261+
<h1 id="contactme">Contact me</h1>
262+
263+
<form action="action_page.php">
264+
265+
<label for="fname">Name</label>
266+
<input type="text" id="fname" name="firstname" placeholder="Your name.">
267+
268+
<label for="lname">Email</label>
269+
<input type="text" id="email" name="email" placeholder="Your email.">
270+
271+
<label for="subject">message</label>
272+
<textarea id="subject" name="subject" placeholder="Write a message." style="height:200px"></textarea>
273+
274+
<input type="submit" value="Submit">
275+
276+
</form>
277+
278+
<h1 id="links">Links</h1>
279+
<a href="href=https://github.com/seaxwi">
280+
<img src="GitHub-Mark-Light-64px.png" alt="github mark">
281+
</a>
282+
</div>
283+
</body>
284+
</html>
285+
286+

‎seaxwi.png‎

33.4 KB
Loading

‎start_background_bw.jpg‎

1.85 MB
Loading

0 commit comments

Comments
 (0)