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

London10-Onur-Atas-html/css-module1-challenges #261

Open
onurat wants to merge 4 commits into
base: main
Choose a base branch
from
Open

London10-Onur-Atas-html/css-module1-challenges #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
854edea
HTML-CSS-Challenges
onurat Apr 26, 2023
5df76a2
Update index.html
onurat Apr 26, 2023
f08e821
challenges
onurat Apr 26, 2023
a813ec9
xc
onurat Apr 26, 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
33 changes: 30 additions & 3 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,41 @@ <h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
<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">Color:</label>
<select id="color" name="color" required>
<option value="">-- Please select --</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<label for="size">Size:</label>
<select id="size" name="size" required>
<option value="">-- Please select --</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="delivery-date">Delivery Date:</label>
<input type="date" id="delivery-date" name="delivery-date" min="<?php echo date('Y-m-d'); ?>" max="<?php echo date('Y-m-d', strtotime('+4 weeks')); ?>" required>

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

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

Expand Down
11 changes: 11 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,11 @@
:focus {
outline: none;
border: 2px solid blue;
box-shadow: 0 0 5px blue;
}

form {
display: flex;
flex-direction: column;
}

18 changes: 16 additions & 2 deletions Two-Truths-One-Lie/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,24 @@
<h1>Two Truths, One Lie</h1>
</header>
<main>
<!-- how will you mark up your media objects -->
<section class="grid-section">
<h2>Two Truths and a Lie</h2>
<article class="grid-article">
<h3>Truth or Lie #1</h3>
<p>I am 4782 years old.</p>
</article>
<article class="grid-article">
<h3>Truth or Lie #2</h3>
<p>Red is a bigger number than white.</p>
</article>
<article class="grid-article">
<h3>Truth or Lie #3</h3>
<p>Apples can fall off trees.</p>
</article>
</section>
</main>
<footer>
<h3>By YOUR NAMES HERE</h3>
<h3>By Onur Atas</h3>
</footer>
</body>
</html>
56 changes: 56 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,60 @@

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

/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 1em;
}

h1 {
margin: 0;
}

/* Main styles */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1em;
}

.grid-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
margin-bottom: 2em;
}

.grid-article {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 1em;
}

.grid-article h3 {
margin-top: 0;
}

/* Footer styles */
footer {
background-color: #333;
color: #fff;
padding: 1em;
}

/* Media query styles */
@media screen and (max-width: 768px) {
main {
display: block;
}

.grid-section {
grid-template-columns: repeat(2, 1fr);
}
}
81 changes: 30 additions & 51 deletions zoo-css-challenge/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ section {
}

img {
border: 5px solid #8075ff;
border-radius: 5px;
}

h1,
Expand Down Expand Up @@ -76,6 +76,13 @@ footer {
}

.introduction {
background-color: white;
line-height: 1.5;
padding: 5%;
}

.introduction p {
margin-bottom: 1.5em;
}

#badge {
Expand Down Expand Up @@ -109,21 +116,37 @@ footer {
}

.image-container img:first-of-type {
vertical-align: bottom;
vertical-align: top;
border-color: #8075ff;
}

.tigers {
background-color: #0b3c49;
color: #f0e100;
}

.tigers h2 {
color: #ffffff;
}

.tigers ul {
list-style-type: disc;
padding-left: 1.5em;
margin-bottom: 1em;
}

.giraffe {
background-color: #465775;
color: #56e39f;
background-color: #483c46;
color: #beee62;
}

.giraffe h2,
.giraffe h3 {
color: #f4743b;
}

.giraffe h2 {
color: #ef6f6c;
.giraffe p {
color: #beee62;
}

.card {
Expand All @@ -148,48 +171,4 @@ footer {
.card time {
opacity: 0.5;
display: inline-block;
margin-bottom: 10px;
}

/*Education*/

.education {
height: 500px;
background-image: url("https://source.unsplash.com/1200x900/?tiger");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 100px 5%;
}

.education-container {
background-color: rgba(255, 255, 255, 0.75);
padding: 50px;
max-width: 400px;
}

.education-container h3,
.education-container p {
margin-bottom: 1em;
}

/*Membership*/

.membership {
text-align: center;
background-color: #fffffc;
}

.membership h2 {
color: #ff3f00;
}

.membership strong {
color: #ff7f11;
}

/*Programs*/

.programs .card {
display: block;
}
margin-bottom: 10