Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

LND10 | Adrian Ilovan | HTML-CSS-Challenges #247

Open
AdrianIlovan wants to merge 5 commits into
base: main
Choose a base branch
from
Open

LND10 | Adrian Ilovan | HTML-CSS-Challenges #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ceb3e3a
Form Ready- 1/3
AdrianIlovan Apr 12, 2023
7f8112a
First step done
AdrianIlovan Apr 12, 2023
174809d
Form-Controls Done
AdrianIlovan Apr 14, 2023
99afc92
Two-Truths-One-Lie Done!
AdrianIlovan Apr 15, 2023
4d05fd5
Finished all 3 Tasks
AdrianIlovan Apr 16, 2023
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
90 changes: 64 additions & 26 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>

</html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<div>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
required
pattern="[A-Za-z]{2,}"
/>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="color">Choose a color:</label>
<select name="color" id="color" required>
<option value="">Please choose a color--</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<div>
<label for="size">Choose a size:</label>
<select name="size" id="size" required>
<option value=""></option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>
<div>
<label for="date">Delivery Date</label>
<input type="date" name="date" required aria-required="true" min="<?php echo date('Y-m-d');?>
"max="<?php echo date('Y-m-d', strtotime('+4 weeks'));?>"step="1"title="Please enter a date in the format DD-MM-YYYY."/>
</div>
<button type="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
</html>
36 changes: 36 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
form {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem auto;
max-width: 600px;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
}

label {
font-weight: bold;
}

input, select {
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 1rem;
}

button[type="submit"] {
padding: 0.5rem;
border:none;
border-radius: 3px;
background-color: rgb(0, 7, 15);
color: rgb(243, 242, 242);
font-size: 1rem;
cursor: pointer;
}

button[type="submit"]:hover {
background-color: rgb(48, 48, 48);
}
27 changes: 24 additions & 3 deletions Two-Truths-One-Lie/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -11,14 +11,35 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<header class="header">
<h1>Two Truths, One Lie</h1>
<h2>Can you guess which one is a lie?</h2>
</header>
<main>
<!-- how will you mark up your media objects -->
<div class="container">
<div class="box">
<h2>Bekir</h2>
<p>I am younger then 30 years old.</p>
<p>I like javascript functions.</p>
<p>I am not Turkish</p>
</div>
<div class="box2">
<h2>Adrian</h2>
<p>I am not over 30 years old.</p>
<p>I am Romanian.</p>
<p>I don't have kids.</p>
</div>
<div class="img-container">
<img src="https://images.pexels.com/photos/5197130/pexels-photo-5197130.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="My Second Image" width="500px" height="500px">
</div>
<div>
<img src="https://images.pexels.com/photos/2499769/pexels-photo-2499769.jpeg?auto=compress&cs=tinysrgb&w=600" alt="My Image" width="500px" height="500px" >
</div>
</div>
</main>
<footer>
<h3>By YOUR NAMES HERE</h3>
<h3>By Adrian Ilovan</h3>
</footer>
</body>
</html>
88 changes: 88 additions & 0 deletions Two-Truths-One-Lie/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,92 @@

body {
font: 100% "Poppins", sans-serif;
display: flex;
background-color: aquamarine;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60vh;
margin: 0;
}
.header {
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.header h1, .header h2 {
margin: 0;
text-align: center;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
position: relative;
width: 900px;
height: 400px;
box-shadow: 5px 5px 5px #888888;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color:aliceblue;
}
.box2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color:aliceblue;
}
.img-container {
object-fit: cover;
width: 20%;
height: 20%;
}

footer {
position: fixed;
bottom: 0;
display: flex;
flex-direction: column;
width: 35%;
background-color: lightblue;
padding: 0.5px;
text-align: center;
font-size: 13px;
}

/* Media query for mobile devices */

@media screen and (max-width: 768px) {
body {
height: auto;
}

.container {
grid-template-columns: 1fr;
width: 90%;
height: auto;
box-shadow: none;
margin-bottom: 80px;
}

.img-container {
width: 100%;
height: auto;
margin-top: 20px;
}

.box, .box2 {
margin: 20px 0;
}

footer {
position: relative;
bottom: auto;
}
}
43 changes: 33 additions & 10 deletions zoo-css-challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<main>
<section class="introduction">
<h1>Birmingham Zoo</h1>
<p>The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, and the Polar Circle. From tropical birds, to snow leopards, grizzly bears, and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.</p>
</section>

<div id="badge">
Expand All @@ -31,18 +32,20 @@ <h1>Birmingham Zoo</h1>
<h2>Bears</h2>
<p>Did you know that a bear's closest relative is the seal? Or that bears can smell over 2,000 times better than humans?</p>
<div class="image-container">
<img
<img class="bear1"
src="https://placebear.com/200/300"
alt="Grizzly Bear"
width="200"
height="300"
>
<img src="https://placebear.com/400/300"
<img class="bear2"
src="https://placebear.com/400/300"
alt="Grizzly Bear"
width="400"
height="300"
>
<img src="https://placebear.com/200/400"
<img class="bear3"
src="https://placebear.com/200/400"
alt="Grizzly Bear"
width="200"
height="400"
Expand All @@ -51,15 +54,15 @@ <h2>Bears</h2>
</section>

<section class="tigers">
<h2>Tiger</h2>
<h3>Top 5 Tiger Facts</h3>
<ol>
<h2 class="tigerh2">Tiger</h2>
<h3 class="tigerh3">Top 5 Tiger Facts</h3>
<ul>
<li>Tigers are the largest cat species in the world reaching up to 3.3 meters in length and weighing up to 670 pounds!
<li>Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur.
<li>The Bengal tiger is the most common tiger.
<li>Tigers live between 20-26 years in the wild.
<li>Unlike most other cats, tigers are great swimmers and actually like the water.
</ol>
</ul>
</section>

<section class="giraffe">
Expand All @@ -77,6 +80,21 @@ <h3>Height and Size</h3>

<p>Giraffes use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.</p>
</section>
<section class="ryno">
<h2>Ryno</h2>

<p>Ryno's are the world's strongest mammals, thanks to their big legs and fat necks.</p>

<h3>Behavior</h3>

<p>Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.</p>

<p>Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually dangerous and end when one animal submits and walks away.</p>

<h3>Height and Size</h3>

<p>Rynos use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.</p>
</section>

<section class="news">
<h2>News</h2>
Expand All @@ -90,6 +108,11 @@ <h4>Helping wild turtles in Seychelles</h4>
<h4>Learning about the rainforest</h4>
<a>Find out More</a>
</div>
<div class="card">
<time>2010-04-12</time>
<h4>Which big cat are you?</h4>
<a>Find out More</a>
</div>
</section>

<section class="education">
Expand All @@ -110,15 +133,15 @@ <h2>Are there any benefits or discounts for members?</h2>
<h2>Programs</h2>
<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
<a href="www.google.com">Find out More</a>
</div>
<div class="card">
<h4>Adult Programs</h4>
<a>Find out More</a>
<a href="www.google.com">Find out More</a>
</div>
<div class="card">
<h4>Youth and young adults</h4>
<a>Find out More</a>
<a href="www.google.com">Find out More</a>
</div>
<h3>Useful Links</h3>
<p>
Expand Down
Loading