Skip to content

Commit 5031fec

Browse files
hierrorhierror
committed
First finished version
1 parent 78a5af6 commit 5031fec

File tree

5 files changed

+703
-42
lines changed

5 files changed

+703
-42
lines changed

‎css/main.css

Lines changed: 52 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,146 @@
1-
21
body {
2+
font-size: 16px;
33
font-family: 'Raleway', sans-serif;
44
margin: 0;
55
}
6+
67
ul {
7-
padding: 0;
8+
padding: 0;
89
list-style: none;
910
}
11+
12+
a {
13+
text-decoration: none;
14+
color: #047ca5;
15+
}
16+
1017
header#header {
1118
height: 100vh;
12-
padding-top: 20vh;
19+
padding: 25vh 0;
1320
box-sizing: border-box
1421
}
15-
#header > p {
16-
display: block;
17-
text-align: center;
18-
width: 50%;
19-
margin: 0 auto;
20-
}
22+
2123
.header-group {
2224
display: flex;
2325
justify-content: space-around;
2426
align-items: center;
2527
padding: 0 15%;
2628
}
29+
2730
.name {
28-
font-size: 82px;
31+
font-size: 5.1em;
2932
color: #222;
3033
}
34+
3135
.surname {
3236
display: block;
3337
margin: -20px;
3438
padding-left: 10vmin;
3539
}
40+
3641
nav#navbar {
3742
margin-top: 10px;
3843
}
44+
3945
footer {
4046
width: 100%;
4147
height: 10vh;
4248
background: #000;
4349
}
50+
4451
.navbar-list {
4552
display: flex;
4653
justify-content: center
4754
}
55+
4856
.navbar-list-item {
4957
display: inline-block;
5058
color: #ddd;
51-
font-size: 14px;
59+
font-size: .9em;
5260
padding: 0 10px;
5361
text-transform: uppercase;
5462
}
5563

56-
.navbar-list-item > a {
64+
.navbar-list-item>a {
5765
color: #4c4c4c;
5866
text-decoration: none;
5967
}
6068

61-
.navbar-list-item > a:visited {
69+
.navbar-list-item>a:visited {
6270
color: #4c4c4c;
6371
}
64-
.navbar-list-item > a:hover {
72+
73+
.navbar-list-item>a:hover {
6574
color: #000;
6675
}
67-
.navbar-list-item > a::after {
76+
77+
.navbar-list-item>a::after {
6878
content: "";
6979
display: block;
7080
background-color: #424242;
7181
height: 1px;
7282
width: 0;
7383
transition: 200ms ease all;
7484
}
75-
.navbar-list-item:hover > a::after {
85+
86+
.navbar-list-item:hover>a::after {
7687
width: 100%;
7788
}
89+
7890
.social-media {
7991
position: absolute;
8092
top: 0;
8193
right: 5vmin;
8294
}
95+
8396
.social-media-item {
8497
display: inline-block;
8598
margin: 5px 15px;
86-
background-color: #fff;
87-
padding: 5px;
8899
}
100+
89101
.social-media-item:hover {
90102
transform: scale(1.1);
91103
}
104+
92105
.header-sentence {
93-
display: inline-block;
94-
width: 80%;
95-
margin: 0 10%;
106+
display: block;
107+
text-align: center;
108+
width: 40%;
109+
margin: 0 auto;
96110
padding-bottom: 10px;
97111
border-bottom: 1px solid #eee;
98112
}
113+
99114
section.content-section {
100115
width: 60vw;
101116
margin: 0 auto;
102117
}
118+
103119
h2.content-header {
104120
text-transform: uppercase;
105121
text-align: center;
106-
font-size: 40px;
122+
font-size: 2em;
107123
}
124+
108125
.header-background {
109126
position: absolute;
110127
top: 0;
111128
left: 0;
112-
background: url("http://wallpapercave.com/wp/AJfAZuY.jpg");
129+
background: url("../img/background.jpg");
113130
background-size: cover;
114131
width: 100%;
115132
height: 100%;
116133
z-index: -1;
117-
-webkit-clip-path: polygon(80% 0, 100% 0, 84% 100%, 70% 100%);
118-
clip-path: polygon(80% 0, 100% 0, 84% 100%, 70% 100%);
134+
-webkit-clip-path: polygon(0 0, 64% 0, 16% 100%, 0% 100%);
135+
clip-path: polygon(0 0, 64% 0, 16% 100%, 0% 100%);
136+
}
137+
138+
.email {
139+
position: absolute;
140+
bottom: 20px;
141+
right: 20px;
142+
font-weight: 600;
143+
font-size: .8em;
144+
color: #222;
145+
margin: 0;
119146
}

‎img/background.jpg

171 KB
Loading

‎index.html

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<title>hierror</title>
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
10-
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css?family=Raleway|Poor+Story" rel="stylesheet">
11+
<script src="js/dist/smooth-scroll.polyfills.js"></script>
1112
<script src="js/main.js"></script>
1213
</head>
1314

@@ -20,32 +21,39 @@ <h1 class="name">
2021
<span class="surname">Duarte</span>
2122
</h1>
2223
</div>
23-
<p class="header-sentence">A newby web developer trying to grow both professionally and socially.</p>
24-
<nav id="navbar">
24+
<p class="header-sentence">brazilian web developer working at
25+
<a href="https://deliverymuch.com.br/">Delivery Much</a>
26+
</p>
27+
<!--<nav id="navbar">
2528
<ul class="navbar-list">
26-
<li class="navbar-list-item">
27-
<a href="#about">
29+
<li class="navbar-list-item">
30+
<a data-scroll href="#about">
2831
About
2932
</a>
3033
</li>
31-
<li class="navbar-list-item">
34+
<li data-scroll class="navbar-list-item">
3235
<a href="#blog">
3336
Blog
3437
</a>
3538
</li>
36-
<li class="navbar-list-item">
39+
<li data-scroll class="navbar-list-item">
3740
<a href="#talks">
3841
Talks
3942
</a>
4043
</li>
41-
<li class="navbar-list-item">
44+
<li data-scroll class="navbar-list-item">
4245
<a href="#projects">
4346
Projects
4447
</a>
4548
</li>
4649
</ul>
47-
</nav>
50+
</nav>-->
4851
<ul class="social-media">
52+
<li class="social-media-item">
53+
<a href="https://github.com/hierror">
54+
<img src="img/github.svg" alt="Github icon" width="32" height="32" />
55+
</a>
56+
</li>
4957
<li class="social-media-item">
5058
<a href="https://twitter.com/hierror404">
5159
<img src="img/twitter.svg" alt="Twitter icon" width="32" height="32" />
@@ -56,17 +64,15 @@ <h1 class="name">
5664
<img src="img/linkedin.svg" alt="Linkedin icon" width="32" height="32" />
5765
</a>
5866
</li>
59-
<li class="social-media-item">
60-
<a href="https://github.com/hierror">
61-
<img src="img/github.svg" alt="Github icon" width="32" height="32" />
62-
</a>
63-
</li>
6467
</ul>
6568
<div class="header-background">
66-
69+
6770
</div>
71+
<p class="email">
72+
get in touch at <a href="mailto:[email protected]">[email protected]</a>
73+
</p>
6874
</header>
69-
<section class="content-section" id="about">
75+
<!--<section class="content-section" id="about">
7076
<h2 class="content-header">About</h2>
7177
</section>
7278
<section class="content-section" id="blog">
@@ -80,7 +86,7 @@ <h2 class="content-header">Projects</h2>
8086
</section>
8187
<footer>
8288
<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
83-
</footer>
89+
</footer>-->
8490
</body>
8591

8692
</html>

0 commit comments

Comments
 (0)