-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (133 loc) · 6.28 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
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Independent Project 1</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Lora|Pacifico" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="container">
<!-- Page Heading Section -->
<div class="jumbotron">
<h1>Mary Ng'ang'a Designs</h1>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT ME</a></li>
<li><a href="contact.html">CONTACTS</a></li>
</ul>
</div>
<!-- About Me Section -->
<div class="well">
<div class="row">
<div class="col-md-4">
<img src="images/image6.jpg" alt="Photo of Mary" class="portrait" </div>
</div>
<div class="col-md-8">
<h2>About Me</h2>
<p>Welcome to my personal website!<br /> It is a compilation of my best work.</p>
<p>I am Mary Ng'ang'a as the page title indicates. A novice in the field of web design intent on bettering herslef in all things software development. My entrance into the world of programming was borne out of a dream to be a blogger. I wished
to learn the basics in order to have the ability to create and manage my own blog. I'm now a happy camper after coming to the realization that I can create a wide variety of software and make a difference in how people interact with the world
through it.
</p>
<a href="about.html">Continue Reading...</a>
</div>
</div>
</div>
<!-- My Portfolio Section -->
<h2 class="portfolio">Portfolio</h2>
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Photography Website</h2></div>
<div class="panel-body">
<img src="images/photography.png" alt="Photography Website Picture">
<p>This is a website for a photographer which acts as their photography portfolio . It features different categories of photography: portraits, nature, weddings and fashion.</p>
</div>
<div class="panel-footer">
<p>To view the project, <a href="https://marynganga.github.io/practising-media-queries/photography">click here.</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Catering Website</h2>
</div>
<div class="panel-body">
<img src="images/catering.png" alt="Catering Website Picture">
<p>This is a catering company website designed using Bootstrap to be responsive right out of the box.</p>
</div>
<div class="panel-footer">
<p>To view the project, <a href="https://carolwanjohi.github.io/practising-bootstrap/catering">click here.</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Resume</h2></div>
<div class="panel-body">
<img src="images/resume.png" alt="Resume Website Picture">
<p>This is a webpage to display a mockup resume. I used divs and spans to style sections of the page to list work experience, skills, education and contact info.</p>
</div>
<div class="panel-footer">
<p>To view the project, <a href="https://carolwanjohi.github.io/practising-divs-spans/resume">click here.</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">News-Article Webpage</h2>
</div>
<div class="panel-body">
<img src="images/news-article.png" alt="News Article Website Picture">
<p>This is a project containing fake news articles. I have used lorem ipsum text with <p> tags to give us paragraphs, images to illustrate the news and headers to divide sections I also created styles for the webpage.</p </div>
<div class="panel-footer">
<p>To view the project, <a href="https://carolwanjohi.github.io/practising-divs-spans/news-article">click here.</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Travel Agency Website</h2>
</div>
<div class="panel-body">
<img src="images/travel-agency.png" alt="Travel Agency Website Picture">
<p>This is a webpage mockup for a webpage for the Happy Trails Travel Agency. The page has text, images, and links. It features various travel destinations, listed according to popularity and tropical area.</p>
</div>
<div class="panel-footer">
<p>To view the project, <a href="https://carolwanjohi.github.io/practising-divs-spans/travel-agency">click here.</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h2 class="panel-title">Band Website</h2>
</div>
<div class="panel-body">
<img src="images/band.png" alt="Band Website Picture">
<p>This is a website for my favorite band. It features a sidebar for upcoming shows, an "About the band" section and a section for images, I used floats to set the layout of the page.
</p>
</div>
<div class="panel-footer">
<p>To view the project, <a href="https://carolwanjohi.github.io/practising-boxmodel-inheritance/band-website">click here.</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>