diff --git a/src/bg.jpg b/src/bg.jpg new file mode 100644 index 000000000..b4a5e756f Binary files /dev/null and b/src/bg.jpg differ diff --git a/src/index.html b/src/index.html index 6a7c812fa..5d97cc96f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,49 @@ + HTML Portfolio + - Welcome to the HTML Portfolio Project +
+

Sergio Cruz

+

Application Developer

+
+ +
+
+

A bit more about me

+

Hey I am Sergio, I work for Code School and I love writing JavaScript!

+
+
+ + +
+
+

Skills

+

Here are some of the technologies I enjoy writing day-to-day:

+ +
+
+ +
+
+

How to contact me

+

The easiest way to contact me is via twitter: @hashtagserg

+
+
+ diff --git a/src/main.css b/src/main.css index e69de29bb..f1578099f 100644 --- a/src/main.css +++ b/src/main.css @@ -0,0 +1,121 @@ +*, *:before, *:after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + background: #F5F5F5; + color: #444; + font-family: "Helvetica Neue", Arial, serif; + font-size: 22px; + margin: 0; + padding: 0; + font-weight: 200; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, h2, h3, h4 { + margin: 10px 0 15px; +} + +p, ul { + margin: 10px 0; +} + +ul li { + margin-left: 30px;; +} + +a { + color: #00b8d4; + font-weight: 600; + text-decoration: none; + border-bottom: 3px solid #00b8d4; + padding: 3px; +} + +a:hover { + background-color: #00b8d4; + color: white; +} + +a:active { + position: relative; + top: 1px; +} + +.content-wrapper { + line-height: 1.4; + margin: 0 auto; + max-width: 900px; + padding: 30px 25px; +} + +/* + * HEADER + */ + +.header { + align-items: center; + background-color: #EFEFEF; + background-image: url('bg.jpg'); + background-position: cover; + background-repeat: no-repeat; + background-size: 100% auto; + border-top: 4px solid #e91e63; + color: #FFFFFF; + display: flex; + flex-direction: column; + height: 40vh; + justify-content: center; + min-height: 250px; + padding: 0 20px; + position: relative; + text-align: center; +} + +@media only screen and (max-device-width: 420px) { + .header { + background-size: auto 100%; + } +} + +.header:before { + background: rgba(0, 0, 0, .7); + bottom: 0; + content: ' '; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1; +} + +.header * { + position: relative; + z-index: 2; + text-shadow: 1px 1px 10px black; +} + +.header h1 { + font-size: 4rem; + font-weight: 100; +} + +.header h2 { + font-size: 2.1rem; + font-weight: 100; + margin: 5px 0; +} + +/* + * SKILLS + */ + +.skills { + background: #e91e63; + color: white; +}