-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (117 loc) · 4.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Karla Gaudet Portfolio</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Header section -->
<body>
<header>
<a href="/">
<img src="images/logo.png" id="logo" alt="Karla Gaudet's logo. Directs to homepage"/>
</a>
<nav>
<a
href="about.html">about</a>
<a href="contact.html" class="contact">contact</a>
<a href="https://www.instagram.com/ktech.code/" target="_blank"><img src="images/insta.png" alt="Instagram logo that directs you to my instagram profile"></a
>
<a
href="https://www.linkedin.com/in/karla-gaudet-b95b2b261/"
target="_blank"><img src="images/linkedin.png"alt=" linkedin icon that links you to my linkedin profile"></a>
</nav>
</header>
<!-- Hero Section -->
<main>
<section class="hero">
<div class="header-text">
<h1><span class="emphasis">Aspiring Software Developer</span></h1>
<span class="arrow">
<a href="#about"><img src="images/arrow.png" alt="an image of an arrow that links you to the about summary section. Behind this arrow is an iamge of hands using a laptop"></a></span>
</div>
</section>
<!-- <section id="break1">
<img src="images/break.png" alt="soft image of a code icon"/>
</section>-->
<!-- About me summary section -->
<section class="about" id="about">
<article class="about-me">
<img src="images/me.jpg" alt="photo of me smiling " />
</article>
<article class="about-me">
<section class="about-text">
<h3>Hey! I'm Karla</h3>
<p>
After running a successful beauty salon for 17 years, I've embarked on a new journey in
the field of IT and software development. Currently enrolled in a Certificate IV in IT,
I'm also part of the She Codes Australia Perth Plus cohort.
<p>
When I am not learning to code you may find me somewhere outdoors!</p>
</p>
</section>
<section class="button" >
<a href="about.html"><h5>Find out more</h5></a>
</section>
</article>
</section>
<!-- <section id="break2">
<img src="images/break.png"/>
</section> -->
<!-- Portfolio Thumbnail and summary section -->
<section class="portfolio-head">
<h2>Portfolio</h2>
</section>
<section class="articles">
<article class="shecodes1">
<a href="https://codepen.io/ktechgau/pen/BavPYGQ" target="_blank">
<img src="images/shecodes.jpg" alt="screenshot image of a landing page portfolio linking to codepen work" class="image">
<div class="overlay">
<h3> Landing Page</h3>
<p> Using HTML & CSS using flexbox for a responsive landing page.</p>
<img src="images/magnify.png" alt="magnify glass icon" class="magnify"/>
</div>
</a>
</article>
<article class="shecodes2">
<a href= "https://codepen.io/ktechgau/pen/WNLYVBY" target="_blank">
<img src="images/stylepicjpg.jpg" alt="screenshot image of a stylesheet created with css. The image links to a codepen" class="image">
<div class="overlay">
<h3> StyleSheet Plan</h3>
<p> Using CSS, Flexbox and Root colours. It can be used as style guide.</p>
<img src="images/magnify.png" alt="magnify glass icon" class="magnify"/>
</div>
</a>
</article>
<article class="fcc1">
<a href= " https://codepen.io/ktechgau/pen/poxpNeb" target="_blank">
<img src="images/city.jpg" alt="screenshot image of a city skyscrape. Image links to a codepen." class="image">
<div class="overlay">
<h3> City Skyscrape</h3>
<p> Using variables in CSS by building a skyline. </p>
<img src="images/magnify.png" alt="magnify glass icon" class="magnify"/>
</div>
</a>
</article>
<article class="fcc2">
<a href="https://codepen.io/ktechgau/pen/GRYyNre" target="_blank">
<img src="images/penguin.jpg" alt="screenshot image of a penguin created using CSS. Image links to a codepen." class="image">
<div class="overlay">
<h3> Waving Penguin</h3>
<p> Created a moving penguin using CSS Transforms. </p>
<img src="images/magnify.png" alt="magnify glass icon" class="magnify"/>
</div>
</a>
</article>
</section>
<!-- Footer Section -->
<footer>
<section id="footer-logo">
<a href="/"><img src="images/logo.png" id="logo" alt="Karla Gaudet's logo" /></a>
</section>
</main>
</body>
</footer>
</html>