-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (91 loc) · 6.03 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marisa Brantley's Milestone Project</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700&display=swap' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,500,600,700&display=swap' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="full-width">
<h1>Hi! I'm Marisa Brantley.</h1>
<h2>I’m a litigation paralegal turned e-commerce professional<br>currently studying for a career in UI/UX design.<br>Based in sunny Orange County, California.</h2>
</div>
</header>
<main>
<section id="portfolio">
<div class="full-width">
<h3>My Portfolio</h3>
<div class="half-width">
<div class="rogue-image"><img src="img/rogue-image.png" alt="Rogue Pickings Website" /></div>
<div class="jubilee-image"><img src="img/jubilee-image.png" alt="Jubilee Austen Website" /></div>
<div class="holstee-image"><img src="img/holstee-image.jpg" alt="Holstee Manifesto Project" /></div>
</div>
<div class="half-width">
<div class="rogue-pickings">
<h4><a href="http://roguepickings.marisabrantley.com/" target="_blank">Rogue Pickings Website</a></h4>
<p>HTML & CSS from Photoshop Design Comp</p>
<p>The Rogue Pickings website was a mock portfolio sample client site as part of our final project. Based on a Photoshop PSD comp, it consists of four sections, including navigation, a responsive full-width image, and a three-column portion for the specials, a review, and contact information. It also features an About page.
</p>
</div>
<div class="jubilee-austen">
<h4><a href="http://codegoddess.marisabrantley.com/" target="_blank">Jubilee Austen Project</a></h4>
<p>HTML5 & CSS Website</p>
<p>The Jubilee Austen single-page website mock portfolio project took us from coding a site based on a Photoshop PSD to launching it. It introduced us to using a text editor, Photoshop, setting up structure and content with HTML, styling with CSS, validating and testing our code, obtaining a domain, and ultimately launching the website.
</p>
</div>
<div class="holstee-manifesto">
<h4><a href="https://codepen.io/marisab/full/PVdbdb/" target="_blank">Holstee Manifesto</a></h4>
<p>HTML5 & CSS Exercise</p>
<p>The Holstee Manifesto project was a fun, creative exercise allowing us to play with color, fonts, spans, and show off our floating skills. The pastel colors were inspired by nature in Spring.
</p>
</div>
</div>
</div>
</section>
<section id="about">
<div class="full-width">
<h3>About Me</h3>
<div class="half-width">
<div class="about-image"><img src="img/about-me.png" alt="About Me" /></div>
</div>
<div class="half-width">
<h4>I love design.</h4>
<p>I love the detailed process of selecting the perfect colors, layouts, and images for a website that will convey the most enjoyable - and beautiful - experience for the user. I think a site should
be like a mini-vacation,
transporting its visitor to a world where they can amusingly lose themselves for a bit, all while obtaining the information for which they came. Let me create this adventure for you!</p>
<p>When taking a break from classes, you’ll find me reading classics, road biking, cleaning beaches and continuing on my quest to create the perfect oat milk cappuccino.</p>
</div>
</div>
</section>
<section id="contact">
<div class="full-width">
<h3>Let's Connect</h3>
<div class="third-width">
<h4>Hire Me</h4>
<p>(949) 355-6447<br><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="third-width">
<h4>Follow Me</h4>
<ul>
<li><a href="https://www.linkedin.com/in/marisabrantley/" target="_blank"><img src="img/linkedin-icon.png" alt="Linkedin Icon" /></a></li>
<li><a href="https://twitter.com/MarisaBrantley" target="_blank"><img src="img/twitter-icon.png" alt="Twitter Icon" /></a></li>
<li><a href="https://www.instagram.com/marisab_oc/" target="_blank"><img src="img/instagram-icon.png" alt="Instagram Icon" /></a></li>
<li><a href="https://github.com/marisabrantley" target="_blank"><img src="img/github-icon.png" alt="Github Icon" /></a></li>
</ul>
<div class="copyright">
<p>Copyright 2020 | Marisa Brantley</p>
</div>
</div>
<div class="third-width">
<h4>Meet Me</h4>
<p>Orange County, CA, USA<br>See you at OC meetups!</p>
</div>
</div>
</section>
</main>
</body>
</html>