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

html/css-week3-Ebrahim Beiati-Asl#245

Open
ebrahimbeiati wants to merge 1 commit into
base:main
Choose a base branch
from
Open

html/css-week3-Ebrahim Beiati-Asl #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 32 additions & 4 deletions Form-Controls/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,15 +13,43 @@
<h1>Product Pick</h1>
</header>
<main>

<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="color">T-shirt color:</label>
<select id="color" name="color" required>
<option value="">Choose a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<label for="size">T-shirt size:</label>
<select id="size" name="size" required>
<option value="">Choose a size</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>

<label for="deliveryDate">Delivery date:</label>
<input type="date" id="deliveryDate" name="deliveryDate" min="<?php echo date('Y-m-d'); ?>" max="<?php echo date('Y-m-d', strtotime('+4 weeks')); ?>" required>

@SallyMcGrathSallyMcGrathApr 6, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This task asks you to use HTML and CSS only. What is this php doing here? When you tested your form, what happened?


<button type="submit">Submit</button>
</form>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By Ebrahim Beiati-Asl</h2>

@SallyMcGrathSallyMcGrathApr 6, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⭐ Good attention to detail.

</footer>
</body>

Expand Down
45 changes: 45 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
/* Set global styles */
body {
font-family: Arial, sans-serif;
}

header, footer {
background-color: #333;
color: #fff;
padding: 1rem;
}

main {
padding: 1rem;
}

form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 500px;
margin: 0 auto;
}

label {
font-weight: bold;
}

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

button[type="submit"] {
padding: 0.5rem 1rem;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button[type="submit"]:hover {

@SallyMcGrathSallyMcGrathApr 6, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would happen if the user was not using a mouse? Is there another focus state that you could add to this rule to make it work in other contexts?

background-color: #555;
}
56 changes: 37 additions & 19 deletions Two-Truths-One-Lie/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Our Grid Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Two Truths, One Lie</h1>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our Grid Project</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Two Truths, One Lie</h1>
</header>
<main>
<!-- how will you mark up your media objects -->

<main class="container">
<section class="card">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Skyline_Frankfurt_am_Main_2015.jpg/800px-Skyline_Frankfurt_am_Main_2015.jpg" alt="Image 1">
<h2>Player One</h2>
<ul>
<li>I've been to Paris</li>
<li>I've never broken a bone</li>
<li>I'm an Olympic medalist</li>
</ul>
</section>

<section class="card">
<img src="https://media.cnn.com/api/v1/images/stellar/prod/190418141741-01-what-to-see-frankfurt-germany-photos.jpg?q=w_4191,h_2357,x_0,y_0,c_fill/w_1280" alt="Image 2">
<h2>Player Two</h2>
<ul>
<li>I'm a black belt in karate</li>
<li>I'm allergic to peanuts</li>
<li>I've never been on a roller coaster</li>
</ul>
</section>
</main>

<footer>
<h3>By YOUR NAMES HERE</h3>
<h3>By Ebrahim Beiati-Asl</h3>
</footer>
</body>
</html>

</body>
</html>
78 changes: 77 additions & 1 deletion Two-Truths-One-Lie/styles.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,5 +29,81 @@
*/

body {
font: 100% "Poppins", sans-serif;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #222;
color: #fff;
padding: 20px;
text-align: center;
}

main {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}

.card {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 2fr;
grid-gap: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
max-width: 300px;
}

.card img {
width: 100%;
height: auto;
object-fit: cover;
}

.card h2 {
font-size: 1.5rem;
margin: 0;
padding: 10px;
grid-column: 1 / -1;
background-color: #333;
color: #fff;
}

.card p {
margin: 10px;
font-size: 1.1rem;
}

footer {
background-color: #222;
color: #fff;
padding: 20px;
text-align: center;
}

h1, h2, h3 {
font-weight: 700;
margin: 0;
}

@media screen and (max-width: 600px) {
.card {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
max-width: 90%;
}

.card img {
grid-row: 1 / 2;
}

.card h2 {
grid-row: 2 / 3;
}
}
Loading