-
Notifications
You must be signed in to change notification settings - Fork 0
/
breathe.html
133 lines (124 loc) · 7.6 KB
/
breathe.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,600;0,1000;1,200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="main.css">
<title>Breathe Project</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md" style="background-color: #03001C;">
<div class="container-fluid">
<a class="navbar-brand fs-4 text-white" href="index.html">Zosimo Uy Jr</a>
<button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon bg-white"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link text-white" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white active" aria-current="page" href="index.html#project">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Breathe Content -->
<section class="min-vh-100">
<div class="container mt-5">
<h2 class="display-5">Breathe</h2>
<p class="lead">
Breathe is an E-magazine website dedicated to promoting a healthy lifestyle through various forms of exercise, with a particular focus on yoga, strength training, and aerobics.
</p>
<div class="row">
<div class="col-4">
<h4 class="fs-4 fw-bold">Type</h4>
<p class="text-secondary">E-Magazine</p>
</div>
<div class="col-4">
<h4 class="fs-4 fw-bold">Stack</h4>
<ul class="text-secondary list-unstyled" >
<li>HTML</li>
<li>CSS</li>
<li>BOOTSTRAP</li>
</ul>
</div>
<div class="col-4">
<h4 class="fs-4 fw-bold">Live</h4>
<p class="fw-bold"><a href="https://pinkdollar123.github.io/Breathe.io/" class="text-decoration-none text-danger" target="_blank">Site</a></p>
</div>
</div>
<div>
<img src="breatheme.png" alt="" class="img-fluid mb-2">
</div>
<h2 class="display-6 my-4">
Project Purpose and Goal
</h2>
<p class="lead">
The goal is to provide a <strong>seamless and enjoyable experience</strong>for all visitors, allowing them to easily access and engage with the content while promoting a healthier and more balanced lifestyle.
</p>
<h2 class="display-6 my-4">
Web Stack and Explanation
</h2>
<p class="lead">
For my Breathe website, I utilized HTML and CSS to create a visually engaging and responsive user experience.HTML provided the foundation for structuring the content and ensuring accessibility. CSS was used for styling, including the creation of an active effect for the current page and <strong>implementing responsive design</strong> through media queries.
</p>
<p class="lead">
To expedite development and enhance design capabilities, I leveraged resources from the Bootstrap CSS framework. Bootstrap offered pre-built components, a responsive grid system, and utility classes, enabling consistent styling and layout across the website.
</p>
<p class="lead">
With this optimized web stack, combining HTML, CSS, and Bootstrap, I created a well-structured website that <strong>
showcases my skills and knowledge gained during my bootcamp class
</strong>.
</p>
<h2 class="display-6 my-4">
Problems and Thought Process
</h2>
<p class="lead">
I encountered difficulties in arranging the grid columns and understanding how flex styling works. My layout was becoming messy, and I needed a solution. <strong>Through research</strong>, I discovered Bootstrap 5, a CSS framework that proved to be immensely helpful in creating a responsive website. Bootstrap provided the necessary utilities and tools to maintain responsiveness and streamline my project.
</p>
</div>
</section>
<!-- Footer -->
<div class="" style="background-color: #03001C;">
<footer class="container row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 text-white d-flex justify-content-evenly">
<div class="col mb-3">
<a href="index.html" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none fs-4 text-white">
Zosimo Uy Jr
</a>
<p class="text-body-light small">© 2023, Built and designed by Zosimo Uy Jr</p>
</div>
<div class="col mb-3">
<h5 class="fs-6 fw-semibold">Links</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="about.html" class="nav-link p-0 text-decoration-none text-danger fw-bold">About</a></li>
<li class="nav-item mb-2"><a href="index.html#project" class="nav-link p-0 text-decoration-none text-danger fw-bold">Projects</a></li>
<li class="nav-item mb-2"><a href="index.html#contact" class="nav-link p-0 text-decoration-none text-danger fw-bold">Contact</a></li>
</ul>
</div>
<div class="col mb-3">
<h5 class="fs-6 fw-semibold">Get in touch</h5>
<ul class="list-group list-group-horizontal">
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://github.com/pinkdollar123" target="_blank"><i class="bi bi-github"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://www.linkedin.com/in/zosimo-uy-0a9900275/" target="_blank"><i class="bi bi-linkedin"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://www.facebook.com/zosr.code" target="_blank"><i class="bi bi-facebook"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="mailto:[email protected]" target="_blank"><i class="bi bi-envelope"></i></a></li>
</ul>
</div>
</footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</html>