Skip to content

Luis Avila - Bootcamp Solutions #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luis-avila-cr wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Luis Avila - Bootcamp Solutions #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b01de0f
luis avila html task
luis-avila-cr Apr 3, 2025
9d48e68
luis avila css task
luis-avila-cr Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions Week 1.1 - HTML/1. Build a Form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Form</title>
</head>
<body>

<!-- Add your code here -->

<!-- Add your code here -->
<fieldset>
<legend>Login</legend>

<form action="/login/" method="post">
<div>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" aria-required="true" aria-describedby="enter your email">
</div>
<br>
<div>
<label for="pwd">Enter your password:</label>
<input type="password" id="pwd" name="pwd" aria-required="true" aria-describedby="enter your password"/>
</div>

<br>
<input type="submit" value="Submit">
</form>

</fieldset>

</body>
</html>
70 changes: 51 additions & 19 deletions Week 1.1 - HTML/2. Create a Responsive Image - Resolution/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Resolution</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Resolution</title>

<style>
*,
*::before,
*::after { box-sizing: border-box; }
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}

img {
display: block;
width: 100%;
height: auto;
}
</style>
img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>

<!-- Add your code here -->

<!-- Add your code here -->
<picture>
<source
src="https://placehold.co/2000x900"
srcset="https://placehold.co/2000x900"
media="(min-width: 1441px) and (max-width: 1800px)"
width="900"
height="2000"/>
<source
src="https://placehold.co/1600x720"
srcset="https://placehold.co/1600x720"
media="(min-width: 1025px) and (max-width: 1440px)"
width="720"
height="1600"/>
<source
src="https://placehold.co/1200x540"
srcset="https://placehold.co/1200x540"
media="(min-width: 641px) and (max-width: 1024px)"
width="540"
height="1200"/>
<source
src="https://placehold.co/800x360"
srcset="https://placehold.co/800x360"
media="(max-width: 640px)"
width="360"
height="800"/>
<img
src="https://placehold.co/400x180"
alt="Image used when the browser does not support the sources"
width="500"
height="400"/>
</picture>
</body>
</html>
59 changes: 40 additions & 19 deletions Week 1.1 - HTML/3. Create a Reponsive Image - Aspect Ratio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Aspect Ratio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Responsive Image - Aspect Ratio</title>

<style>
*,
*::before,
*::after { box-sizing: border-box; }
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}

img {
display: block;
width: 100%;
height: auto;
}
</style>
img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>

<!-- Add your code here -->

<!-- Add your code here -->
<picture>

<source
src="https://placehold.co/1600x720"
srcset="https://placehold.co/1600x720"
media="(min-width: 641px) and (max-width: 1024px)"
width="1600"
height="720"/>
<source
src="https://placehold.co/1200x900"
srcset="https://placehold.co/1200x900"
media="(max-width: 640px)"
width="1200"
height="900"/>
<img
src="https://placehold.co/540x800"
alt="Image used when the browser does not support the sources"
width="800"
height="540"/>
</picture>
</body>
</html>
46 changes: 46 additions & 0 deletions Week 1.1 - HTML/4. Mock Up a Design/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,52 @@
<body>

<!-- Add your code here -->
<header>
<h2>Phase 4</h2>
<h1>Destination Thrive</h1>
<h3>Objective Create Omni-channel synergy</h3>
</header>
<section>
<nav>
<ul>
<li><a href="#">▓</a></li>
<li><a href="#">▓</a></li>
<li><a href="#">▓</a></li>
<li><a href="#">▓</a></li>
</ul>
</nav>
<article>
<p>This is the time fully leverage your hard work and thrive. During this phase, attention should be given to
creating omni-channel synergy, syncing your messaging and channels from top to bottom. Scale high
performing channels and fully harvest the demand your top pf funnel awareness campaigns have been creating.
Use insights gained from your contact list, data and web analytics to do prospecting and build look-a-like
audiences for incremental growth. </p>
</article>

<article>
<h4>Key Focus</h4>
<ul>
<li> Harvesing the demand created by your contecnt markeitng efforts</li>
<li>Sacale paid media and social efforts</li>
<li>Leveare your new audiences</li>
<li>Omni-channelssynergy</li>
</ul>

</article>

<article>
<div>
<h4>
Time
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
fill="#e3e3e3">
<path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"/>
</svg>
</h4>

</div>
<p>approx. 24 months and beyond</p>
</article>
</section>
</body>
</html>
4 changes: 3 additions & 1 deletion Week 1.2 - CSS/1. Selectors - Attributes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

<style>
/* Update the following line of CSS to only style the inputs of type `text` */
* { border: 2px solid rebeccapurple; }
input[type="text"] {
border: 2px solid purple;
}
</style>

<input type="text" />
Expand Down
2 changes: 1 addition & 1 deletion Week 1.2 - CSS/2. Selectors - Children/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<style>
/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
.container .item { border: 2px solid rebeccapurple; }
.container > .item { border: 2px solid rebeccapurple; }
</style>

<ul class="container">
Expand Down
4 changes: 4 additions & 0 deletions Week 1.2 - CSS/3. Selectors - Siblings/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
margin: 0 auto;
max-width: 72ch;
}
h2 + p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
Expand Down
37 changes: 33 additions & 4 deletions Week 1.2 - CSS/4. Inheritance and Systems/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,42 @@

<style>
/* Add your CSS here */
/* Base button style: common to all buttons */
.btn {
border-radius: 4px;
padding: 12px 32px; /* 12px top/bottom and 32px on the sides */
color: black;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}

/* Specific styles for each button type */
.btn-default {
background-color: #f5f5f5;
}

.btn-primary {
background-color: #90CDF4;
}

.btn-link {
background-color: transparent;
/* Remove any default button styling if needed */
text-decoration: underline;
}

.btn-danger {
background-color: #FEB2B2;
}
</style>

<!-- Add as many or as few classes as needed to accomplish the goal to the buttons below -->
<button>Default</button>
<button>Primary</button>
<button>Link</button>
<button>Danger</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-danger">Danger</button>

</body>
</html>
6 changes: 6 additions & 0 deletions Week 1.2 - CSS/5. Transitions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
width: 100px;
height: 100px;
background-color: rebeccapurple;
transition: transform 200ms ease-in, transform 160ms ease-out;
transform: scale(1);
}

.box:hover {
transform: scale(2);
}
</style>

Expand Down
1 change: 1 addition & 0 deletions Week 1.2 - CSS/6. Tricks - Click Passthrough/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent, black);
pointer-events: none;
}
</style>

Expand Down