diff --git a/README.md b/README.md index 8587267..a37402e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ Hello World Personal Page ========================= -A stylish and personable webpage to tell the world about yourself. View the [demo page](http://timpotter.github.io/hello-world-page/). +A stylish and personable webpage to tell the world about yourself. View the [demo page](http://chriskeno.github.io/hello-world-page/). ![alt text](http://tejpotter.com/projects/hello-world-page/background.jpg "Hello World Personal Page by Tim Potter") diff --git a/css/style.css b/css/style.css index da3b35e..682e448 100644 --- a/css/style.css +++ b/css/style.css @@ -13,20 +13,15 @@ Author URI: http://littlethunder.co margin: 0; } -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} + /* Typography */ body { font-family: 'Roboto Slab', serif; font-weight: 300; - color: #444; + color: #0f0f0f; -webkit-font-smoothing: antialiased; + background: url(../images/triangle.png) top center repeat; } header { @@ -39,6 +34,12 @@ header p { font-weight: 300; } +section{ +padding:2em;} + +section h2{ +padding-bottom: 1em;} + h1 { font-weight: 100; font-size: 3em; /* 48/16 */ @@ -46,44 +47,83 @@ h1 { line-height: 1em; } -p { - line-height: 1.75em; +section p { + line-height: 1.9em; + font-size: 1.2em; } -.about p:nth-of-type(1) { - font-size: 1.5em; /* 24/16 */ - line-height: 1.5em; + +/*----nav----*/ +nav +{position: fixed; +top: 0px; + left: 0; + margin: 0; + width: 100%; + background-color:whitesmoke; + } -.about p { - padding-bottom: 20px; - text-align: justify; +nav +{ +padding: 0.5em 0; +margin-bottom: 0.4em; } -footer p { - text-align: center; - font-size: 0.625em; /* 10/16 */ +nav ul +{text-align: center; } -small { - text-align: center; +nav ul li +{display: inline; +margin: 20px;} +/*-----links------------*/ +a { +color:darkgray; +text-decoration:none; + text-transform: uppercase; + letter-spacing: 2px; } -strong { - font-weight: 400; +a:hover { + color:white; + border-bottom: 1px dotted; + } +.svglinks a { + opacity: 0.3; + transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; + -webkit-transition: opacity .25s ease-in-out; } -a { - text-decoration: none; - font-weight: 400; - color: #333; +.svglinks a:hover { + opacity: 0.8; } -a:hover { - text-decoration: underline; - color: #666; +.svglinks li { + display: inline; + margin: 0px; + color: #444; +} + +.svglinks li img { + width: 0px; + display: inline; +padding-left: 1em; + padding-top: 1em; } +.svglinks a:hover { + padding: 7px; + /*background:; + color: #fff;*/ + border-bottom: none; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + border-radius: 1em;} + .social a { opacity: 0.3; @@ -104,10 +144,6 @@ a:hover { /* Images */ -.background { - /* Delete background class from for a vanilla style */ - background: url(../images/background.jpg) top center no-repeat; -} img.avatar { margin-bottom: 30px; @@ -124,9 +160,9 @@ img.avatar { /* Layout */ .container { - width: 600px; + width: 800px; margin: 100px auto 25px; - background-color: rgba(255, 255, 255, 0.5); + background-color:rgba(255, 255, 255, 0.8); padding: 0 60px 30px; border-radius: 6px; } @@ -136,43 +172,3 @@ img.avatar { text-align: center; } -footer { - margin-top: 30px; -} - - -/* Responsive Styles */ - -@media only screen and (min-width: 1920px) { - .background { - background-size: 100%; - } -} - -@media only screen and (max-width: 600px) { - - .container { - width: 90%; - margin-top: 50px; - padding: 0 30px 30px; - } - - h1 { - font-size: 2.25em; /* 36/16 */ - margin-bottom: 20px; - } - - .social { - margin-top: 20px; - } - - .about p { - text-align: left; - padding-bottom: 15px; - } - - .about p:nth-of-type(1) { - font-size: 1.25em; /* 20/16 */ - text-align: center; - } -} \ No newline at end of file diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..62cfc6c Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/logo3new.jpg b/images/logo3new.jpg new file mode 100644 index 0000000..2ff9323 Binary files /dev/null and b/images/logo3new.jpg differ diff --git a/images/triangle.png b/images/triangle.png new file mode 100644 index 0000000..8ebaceb Binary files /dev/null and b/images/triangle.png differ diff --git a/index.html b/index.html index 41465e4..06366ed 100755 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Hello World Personal Page - + @@ -16,35 +16,68 @@ - - + +
+
- My Avatar + My Avatar +

Hello World, I'm

-

Your Name

+

Chris Kennedy

+
-
-

An introductory paragraph about who you are and what you do.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non quaerat voluptatem.

-
- +
+

ABOUT ME

+

My name is Christopher Kennedy and I am a 20 year old student at the University of Ulster Belfast, I am studying Interaction Design and I am currently in my first Year.

+

I am original from a small town called Keady in Armagh and I come from a very creative and artistic family which help me discover my interests in all things art and design.

+

In my spare time i enjoy sketching, painting and working on personal projects and exploring other areas of art and design that inerest me.

+
+ +
+

EDUCATION

+

As a child I was always very creative and always drawing pictures or creating something and taking part in school competitions. + I went to a school called St.Francis of Assisi in my home town before then going to my secondary school, St.Patrick high school. It was here that I became even more interested in art and design and I always loved my art classes and learning new art styles and trying new materials that I had never tried before.

+

I continued my art studies through GCSE's and Alevel's andd built up a portfolio that I would then use to apply for the Art college. + I got accepted and started the foundation art course and moved to student accomodation in Jordanstown.

+

Foudation was a great course and I choose this degree as i was not sure exactly what degree programme I was interested and because I wanted to try new disciplines. At the end of the year I had narrowed down my choices to two degree programmes and in September 2015 i began my new degree, Interaction design.

+

From the very beginnin I have loved this course and i enjoy learning all the new areas of design, both off screen and on.

+
+ +
+

PORTFOLIO

+

Below you can visit my Flickr account and view examples of the work I have created while on my Interaction design degree. At first I designed some work for phone and laptop backgrounds based on point, line and plane, I fully enjoyed doing this as I was then able to use my own work to design my own devices. I also then designed posters and fonts and started learning how to develop web pages with HTML and CSS which I enjoy very much as I love to learn new things and ways to create.

+ +
+ + - - \ No newline at end of file +
+