Skip to content

Naomi Rojas - Bootcamp Solutions #116

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
naomirojash wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Naomi Rojas - Bootcamp Solutions #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
453639d
HTML Section
naomirojash Mar 24, 2025
3a36d08
CCS Section
naomirojash Mar 24, 2025
4a48d85
JS Section
naomirojash Mar 27, 2025
2263151
CCS Grid
naomirojash Mar 31, 2025
2277d74
CSS Grid
naomirojash Mar 31, 2025
018277c
Flexbox
naomirojash Apr 1, 2025
e625a2f
Changes Of HTML
naomirojash Jun 19, 2025
9818a36
HTML changes
naomirojash Jun 19, 2025
25fd608
CSS Changes
naomirojash Jun 19, 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
78 changes: 76 additions & 2 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
Expand Up @@ -4,10 +4,84 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;

}
.form-container {
max-width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
label {
display: block;
margin: 8px 0;
font-weight: bold;
}
input {
width:-webkit-fill-available;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;

}

</style>
</head>
<body>

<!-- Add your code here -->
<div class="form-container">
<h2>Login</h2>
<form action="/login/" method="POST" id="loginForm">
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="Enter your email" />
<span id="emailHelp" class="error-message">Enter a valid email address.</span>
</div>

<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" required placeholder="Enter your password" />
</div>

<button type="submit">Login</button>
</form>
</div>
<script>
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const submitButton = form.querySelector('button');

form.addEventListener('submit', function (event) {
const email = emailInput.value.trim();
if (!validateEmail(email)) {
alert("Please enter a valid email address.");
event.preventDefault();
}
});

function validateEmail(email) {
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return regex.test(email);
}
</script>

</body>
</html>
57 changes: 35 additions & 22 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,43 @@
<!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>

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

html {
margin: 0;
padding: 0;
}

img {
display: block;
width: 100%;
height: auto;
}
</style>
<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;
}

html {
margin: 0;
padding: 0;
}

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

<body>

<!-- Add your code here -->

<h1>Responsive Image</h1>
<picture>
<source media="(min-width: 1800px)" srcset="https://placehold.co/2000x900">
<source media="(min-width: 1440px)" srcset="https://placehold.co/1600x720">
<source media="(min-width: 1024px)" srcset="https://placehold.co/1200x540">
<source media="(min-width: 640px)" srcset="https://placehold.co/800x360">
<img src="https://placehold.co/400x180" alt="Responsive Image">
</picture>


</body>

</html>
9 changes: 8 additions & 1 deletion 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
Expand Up @@ -24,7 +24,14 @@
</head>
<body>

<!-- Add your code here -->
<div class="content">
<h1>Responsive Image with Aspect Ratio</h1>
<picture>
<source srcset="https://placehold.co/1200x900" media="(min-width: 640px)">
<source srcset="https://placehold.co/1600x720" media="(min-width: 1024px)">
<img src="https://placehold.co/540x800" alt="Responsive Image">
</picture>
</div>

</body>
</html>
71 changes: 70 additions & 1 deletion 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 @@ -4,10 +4,79 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up a Design</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body{
background: url('https://picsum.photos/1920/1080') no-repeat center center/cover;
color: #ddd;
width: 100vw;
height: 100vh;
font-family: Arial, sans-serif;
}

article {
width: 40vw;
padding: 20px;
border-radius: 8px;
position: relative;
margin-left: 120px;
}

hr {
border: none;
height: 2px;
background: #ddd;
margin: 20px 0;
}

.inline {
display: flex;
align-items: center;
gap: 8px;
}

.material-icons {
font-size: 24px;
vertical-align: middle;
}

p{
margin: 0;
}
</style>
</head>
<body>

<!-- Add your code here -->
<article>
<section>
<h1>Phase 4:</h1>
<h2>Destination Thrive</h2>
<h3>Objective: Create Omni-Channel Synergy</h3>
<p>
This is the time to 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-of-funnel awareness campaigns have been creating. Use insights
gained from your contact lists, data, and web analytics to prospect and build lookalike audiences for incremental growth.
</p>
</section>
<hr>
<section>
<h4>KEY FOCUS:</h4>
<ul>
<li>Harvesting the demand created by your content marketing efforts</li>
<li>Scaling paid media and social efforts</li>
<li>Leveraging your new audiences</li>
<li>Creating omni-channel synergy</li>
</ul>

<div class="inline">
<h4>TIME</h4>
<span class="material-icons" style="color: yellow;" aria-hidden="true">schedule</span>
</div>
<p>aprox. 24 months and beyond</p>
</section>
</article>


</body>
</html>
46 changes: 23 additions & 23 deletions Week 1.2 - CSS/1. Selectors - Attributes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors - Attributes</title>
</head>
<body>

<style>
/* Update the following line of CSS to only style the inputs of type `text` */
* { border: 2px solid rebeccapurple; }
</style>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Selectors - Attributes</title>
</head>
<body>
<style>
/* Update the following line of CSS to only style the inputs of type `text` */
input[type="text"] {
border: 2px solid rebeccapurple;
}
</style>

<input type="text" />
<input type="search" />
<input type="email" />
<input type="text" />
<input type="password" />
<input type="text" />
<input type="url" />
<input type="file" />
<input type="color" />

</body>
</html>
<input type="text" />
<input type="search" />
<input type="email" />
<input type="text" />
<input type="password" />
<input type="text" />
<input type="url" />
<input type="file" />
<input type="color" />
</body>
</html>
74 changes: 37 additions & 37 deletions Week 1.2 - CSS/2. Selectors - Children/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors - Children</title>
</head>
<body>

<style>
/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
.container .item { border: 2px solid rebeccapurple; }
</style>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Selectors - Children</title>
</head>
<body>
<style>
/* Update the following line of CSS to only style the immediate `.item` children of `.container` */
.container > .item {
border: 2px solid rebeccapurple;
}
</style>

<ul class="container">
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
</ul>

</body>
</html>
<ul class="container">
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
<li class="item">
<ul>
<li class="item">Descendant 1</li>
<li class="item">Descendant 2</li>
<li class="item">Descendant 3</li>
</ul>
</li>
</ul>
</body>
</html>
Loading