Skip to content

Orange links #3

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

Orange links #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e31ff64
Completed 1-parent-child exercise
rimamohamedassaad Nov 8, 2021
4130671
Completed 2-html-attributes exercise
rimamohamedassaad Nov 8, 2021
118c555
Completed 3-sementic-html exercise
rimamohamedassaad Nov 9, 2021
3f8da53
Completed 04-links-scripts exercise
rimamohamedassaad Nov 9, 2021
f896843
Completed 5-css-selectors exercise
rimamohamedassaad Nov 9, 2021
5bc4983
Completed 6-css-properties exercise
rimamohamedassaad Nov 9, 2021
beaa87d
Completed 7-css-box exercise
rimamohamedassaad Nov 9, 2021
8edaa22
Completed 8-advenced-selectors exercise
rimamohamedassaad Nov 9, 2021
e5ef708
Completed 10--media-querie exerciss
rimamohamedassaad Nov 9, 2021
5f10506
Completed 11-flexbox exerciss
rimamohamedassaad Nov 9, 2021
24c6d87
Completed 12-justify-content exerciss
rimamohamedassaad Nov 9, 2021
f45ccd9
Completed 13-align-items exerciss
rimamohamedassaad Nov 9, 2021
a4d0669
Completed 14-order exerciss
rimamohamedassaad Nov 9, 2021
2303e74
Completed 15-align-self exerciss
rimamohamedassaad Nov 9, 2021
ecb6150
Completed 16-more-flexbox exerciss
rimamohamedassaad Nov 9, 2021
0c4cb1d
Completed 17-nav-menu exerciss
rimamohamedassaad Nov 9, 2021
0293cc9
Completed 18-orange-link exerciss
rimamohamedassaad Nov 10, 2021
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
3,431 changes: 3,416 additions & 15 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions part-1/1-parent-child/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<p class="message__content">
I can meet on Tuesday and Wednesday after 4.
</p>
<span class="message__time">7:15pm</span>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions part-1/2-html-attributes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@
<div class="message">
<div class="message__author">Luke</div>
<p class="message__content">
Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
Let's meet at the <a href="https://goo.gl/maps/aza4h9nUBhn"> iCafe</a> in Merchant City.
</p>
<span class="message__time">7:35pm</span>
</div>
<div class="message">
<div class="message__author">Won</div>
<p class="message__content">
Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
Ok! <img src="//media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" />
</p>
<span class="message__time">7:38pm</span>
</div>
Expand Down
29 changes: 16 additions & 13 deletions part-1/3-semantic-html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,30 +12,33 @@

<body>
<div class="site-wrapper">
<div class="site-header">
<header role="banner" class="site-header">
<div class="site-header__title">Messages</div>
</div>
<div class="messages">
<div class="message">
</header>
<main role="main" class="messages">
<article class="message">
<div class="message__author">Won</div>
<p class="message__content">Where should we meet later?</p>
<span class="message__time">Mar 25, 2018 7:25pm</span>
</div>
<div class="message">
<time datetime="2018-03-25T19:25:00" class="message__time">Mar 25, 2018 7:25pm</time>
</article>

<article class="message">
<div class="message__author">Luke</div>

<p class="message__content">
Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
</p>
<span class="message__time">Mar 25, 2018 7:35pm</span>
</div>
<div class="message">
<time class="message__time" datetime="2018-03-25T19:35:00">Mar 25, 2018 7:35pm</time>
</article>

<article class="message">
<div class="message__author">Won</div>
<p class="message__content">
Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
</p>
<span class="message__time">Mar 25, 2018 7:38pm</span>
</div>
</div>
<time datetime="2018-03-25T19:38:00" class="message__time">Mar 25, 2018 7:38pm</time>
</article>
</main>
<div id="result" class="result"></div>
</div>
<script defer src="/js/3-result.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions part-1/4-links-scripts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/missing-styles.css" />
<meta charset="utf-8" />
<title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down Expand Up @@ -33,5 +34,6 @@
</div>
</div>
</div>
<script src="js/convertUrls.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions part-1/5-css-selectors/message-backgrounds.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
/* Add your CSS code below */

article {
background-color: cadetblue;
}
#first-message {
background-color: red;
}
.message--latest {
background-color: yellow;
}
17 changes: 17 additions & 0 deletions part-1/6-css-properties/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
/* Add your CSS code below */
a {
text-decoration: none;
color: red;
font-weight: bold;
}
.message__time {
font-size: 0.9rem;
}
.message--unread {
border-left: blue solid 1px;
}
.site-wrapper .message:first-child {
opacity: 0.3;
}
.message {
line-height: 2.5em;
}
17 changes: 14 additions & 3 deletions part-1/7-css-box/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
/* Try different box model properties below */
* {
border: 1px solid red;
}
.pages__page {
border: 1px solid #4491db;
border-radius: 4px;
background: #fff;
border: 2px dotted black;
border-radius: 10px;
background: rgb(155, 202, 148);
}
.country {
margin: auto;
margin-bottom: 8px;
width: 430px;
height: 30px;
padding-left: 13px;
padding-top: 13px;
}
12 changes: 12 additions & 0 deletions part-1/8-advanced-selectors/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,13 @@
/* Try different box model properties below */
div + p {
color: white;
margin-bottom: 0;
}

.site-footer p {
font-size: 12px;
text-align: center;
}
.message:last-child {
box-shadow: 4px 4px 0 #dba944;
}
10 changes: 10 additions & 0 deletions part-2/10-media-queries/columns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
/* Add your own CSS code below */
@media only screen and (min-width: 768px) {
.countries {
columns: 2;
}
}
@media only screen and (min-width: 1200px) {
.countries {
columns: 3;
}
}
28 changes: 28 additions & 0 deletions part-2/11-flexbox/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,29 @@
/* Add your own CSS code below */
.countries {
display: flex;
}
.countries--first {
flex-direction: row-reverse;
justify-content: right;
}
/*.country:nth-child(1){
order: 5;
}
.country:nth-child(2){
order: 4;
}
.country:nth-child(3){
order: 3;
}
.country:nth-child(4){
order: 2;
}
.country:nth-child(5){
order: 1;
}*/
.countries--second {
flex-direction: column;
}
.countries--third {
flex-direction: column-reverse;
}
15 changes: 15 additions & 0 deletions part-2/12-justify-content/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,18 @@
}

/* Add your own CSS code below */
.countries--first {
justify-content: right;
}
.countries--second {
justify-content: space-between;
}
.countries--third {
flex-direction: column;
justify-content: flex-end;
}
.countries--fourth {
flex-direction: column-reverse;

justify-content: space-between;
}
17 changes: 17 additions & 0 deletions part-2/13-align-items/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,20 @@
display: flex;
}
/* Add your own CSS code below */
.countries--first {
flex-direction: row;
align-items: center;
}
.countries--second {
flex-direction: row-reverse;
align-items: flex-end;
justify-content: right;
}
.countries--third {
flex-direction: column;
align-items: flex-end;
}
.countries--fourth {
flex-direction: column-reverse;
align-items: center;
}
34 changes: 34 additions & 0 deletions part-2/14-order/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,37 @@
}

/* Add your own CSS code below */
.countries--first > .country:nth-child(1) {
order: 5;
}

.countries--second .country--croatia {
order: 1;
}
.countries--second .country--ethiopia {
order: 2;
}
.countries--second .country--laos {
order: 3;
}
.countries--second .country--brazil {
order: 4;
}
.countries--second .country--uganda {
order: 5;
}
.countries--third > .country:nth-child(1) {
order: 5;
}
.countries--third > .country:nth-child(2) {
order: 4;
}
.countries--third > .country:nth-child(3) {
order: 3;
}
.countries--third > .country:nth-child(4) {
order: 2;
}
.countries--third > .country:nth-child(5) {
order: 1;
}
63 changes: 63 additions & 0 deletions part-2/15-align-self/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,66 @@
}

/* Add your own CSS code below */
.countries--first .country--ethiopia {
align-self: flex-end;
}
.countries--second {
display: flex;
flex-direction: row;
justify-content: center;
}
.countries--second .country--ethiopia {
align-self: flex-end;
}
.countries--second .country--brazil {
align-self: center;
}
.countries--second .country--croatia {
align-self: center;
}
.countries--second .country--laos {
align-self: center;
}
.countries--second .country--uganda {
align-self: center;
}
.countries--third {
display: flex;
flex-direction: row;
justify-content: center;
}
.countries--third .country--brazil {
align-self: flex-start;
}
.countries--third .country--ethiopia {
align-self: flex-end;
}
.countries--third .country--croatia {
align-self: flex-end;
}
.countries--third .country--laos {
align-self: flex-end;
}
.countries--third .country--uganda {
align-self: flex-start;
}
.countries--fourth {
flex-direction: column;
justify-content: left;
align-content: flex-start;
}
.countries--fourth .country--uganda {
align-self: center;
}
.countries--fourth .country--brazil {
align-self: flex-start;
}
.countries--fourth .country--croatia {
align-self: flex-start;
}
.countries--fourth .country--ethiopia {
align-self: flex-start;
}
.countries--fourth .country--laos {
align-self: flex-start;
}
Loading