Skip to content

Orange links #76

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

Orange links #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0089a7
1 to 8 and 10 to 17 and 19 to 27
fawazshohiebar Dec 2, 2022
843d04b
orange_links
fawazshohiebar Dec 2, 2022
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
1 change: 1 addition & 0 deletions week-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 week-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="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" alt="" />
</p>
<span class="message__time">7:38pm</span>
</div>
Expand Down
30 changes: 17 additions & 13 deletions week-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,34 @@

<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-25 19:25" 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 datetime="2018-03-25 19:35" class="message__time"> 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-25 19:38" 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
3 changes: 3 additions & 0 deletions week-1/4-links-scripts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<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" />
<link rel="stylesheet" href="./css/missing-styles.css" />
</head>

<body>
Expand Down Expand Up @@ -33,5 +34,7 @@
</div>
</div>
</div>

<script src="./js/convertUrls.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions week-1/5-css-selectors/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
<p class="message__content">Where should we meet later?</p>
<time class="message__time">7:25pm</time>
</div>
<article>
<article id="second-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>
<time class="message__time">7:35pm</time>
</article>
<div class="message--latest">
<div id="third-message" class="message--latest">
<div class="message__author">Won</div>
<p class="message__content">
Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
Expand Down
9 changes: 9 additions & 0 deletions week-1/5-css-selectors/message-backgrounds.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
/* Add your CSS code below */
#first-message {
background-color: red;
}
#second-message {
background-color: cadetblue;
}
#third-message {
background-color: yellow;
}
18 changes: 18 additions & 0 deletions week-1/6-css-properties/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
/* Add your CSS code below */
.link {
font-weight: bold;
color: red;
text-decoration: none;
}
.message__time {
font-size: 0.9rem;
}

.message--unread {
border-left: 2px solid blue;
}
.message:first-of-type {
opacity: 0.4;
}
.message {
line-height: 4em;
}
4 changes: 4 additions & 0 deletions week-1/7-css-box/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,7 @@
border-radius: 4px;
background: #fff;
}
.country {
padding: 10px;
border: 1px solid #4491db;
}
15 changes: 15 additions & 0 deletions week-1/8-advanced-selectors/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,16 @@
/* Try different box model properties below */
.site-header > p {
color: white;
margin-bottom: 5px;
}

.site-footer > p {
font-size: 12px;
}
.site-footer {
text-align: center;
}

.message:last-of-type {
box-shadow: 4px 4px 0 #dba944;
}
12 changes: 12 additions & 0 deletions week-2/10-media-queries/columns.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,13 @@
/* Add your own CSS code below */

@media screen and (min-width: 768px) {
.countries {
columns: 2;
}
}

@media screen and (min-width: 1200px) {
.countries {
columns: 3;
}
}
10 changes: 10 additions & 0 deletions week-2/11-flexbox/flexbox.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 */

.countries--first {
display: flex;
flex-direction: row-reverse;
}

.countries--third {
display: flex;
flex-direction: column-reverse;
}
22 changes: 22 additions & 0 deletions week-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,25 @@
}

/* Add your own CSS code below */
.countries--first {
width: 60%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.countries--second {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 60%;
}

.countries--third {
flex-direction: column;
width: 60%;
justify-content: flex-end;
}
.countries--fourth {
flex-direction: column-reverse;
justify-content: space-around;
}
19 changes: 19 additions & 0 deletions week-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,22 @@
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: flex-start;
}
.countries--third {
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
.countries--fourth {
flex-direction: column-reverse;
align-items: center;
justify-content: flex-start;
}
16 changes: 16 additions & 0 deletions week-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,19 @@
}

/* Add your own CSS code below */

.countries--first > .country--brazil {
order: 4;
}

.countries--second > .country--brazil {
order: 3;
}
.countries--second > .country--uganda {
order: 4;
}

.countries--third {
flex-direction: row-reverse;
justify-content: flex-end;
}
32 changes: 32 additions & 0 deletions week-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,35 @@
}

/* Add your own CSS code below */

.countries--first > .country--ethiopia {
align-self: flex-end;
}

.countries--second {
align-items: center;
}
.countries--second > .country--ethiopia {
align-self: flex-end;
}

.countries--third {
align-items: flex-end;
}
.countries--third > .country--brazil {
align-self: flex-start;
}

.countries--third > .country--uganda {
align-self: flex-start;
}

.countries--fourth {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}

.countries--fourth > .country--uganda {
align-self: center;
}
40 changes: 40 additions & 0 deletions week-2/16-more-flexbox/flexbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,43 @@
}

/* Add your own CSS code below */

.countries--first {
align-items: flex-end;
justify-content: flex-end;
}
.countries--second {
align-items: flex-end;
justify-content: center;
flex-direction: row-reverse;
}
.countries--third {
align-items: flex-start;
justify-content: center;
}
.countries--third > .country--brazil {
align-self: flex-end;
}

.countries--fourth {
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.countries--fourth > .country--ethiopia {
align-self: center;
}
.countries--fourth > .country--laos {
align-self: center;
}
.countries--fifth {
flex-direction: column-reverse;
align-items: flex-end;
justify-content: space-between;
}
.countries--fifth > .country--uganda {
align-self: center;
}
.countries--fifth > .country--laos {
order: 4;
}
20 changes: 20 additions & 0 deletions week-2/17-nav-menu/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,21 @@
/* Write your media queries and flexbox CSS below */

@media screen and (min-width: 480px) {
nav {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 700px) {
.site-header {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 992px) {
.site-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
2 changes: 1 addition & 1 deletion week-2/18-git-merge/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Add your own CSS code below */
.link {
color: #4491db;
color: orangered;
font-weight: 700;
text-decoration: none;
}
4 changes: 3 additions & 1 deletion week-3/19-search/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
<body>
<div class="site-wrapper">
<main>
<p>Delete this line and add your form.</p>
<form action="https://www.google.com/search">
<input type="text" name="q" />
</form>
</main>
</div>
</body>
Expand Down
4 changes: 3 additions & 1 deletion week-3/20-labels/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
<main>
<form method="GET" action="https://www.google.com/search">
<!-- Add a label here -->
<input type="text" name="q" />

<label for="search-input">Search on Google</label>
<input type="text" name="q" id="search-input" />
</form>
</main>
</div>
Expand Down
2 changes: 2 additions & 0 deletions week-3/21-buttons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
<label for="search-input">Search on Google</label>
<input type="text" name="q" id="search-input" />
<!-- Add a submit button here -->

<button type="submit">Search</button>
</form>
</main>
</div>
Expand Down
Loading