Skip to content

Branch3 working with exercise2 hw #13

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
thomashaile wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Branch3 working with exercise2 hw #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f5ca43b
Update styles.css
thomashaile Jan 18, 2020
7532504
Merge pull request #1 from thomashaile/branch1-for-home-work
thomashaile Jan 18, 2020
0f8ba0a
Update styles.css
thomashaile Jan 18, 2020
04791ad
Merge pull request #2 from thomashaile/branch1-for-home-work
thomashaile Jan 18, 2020
3699a58
Update styles.css
thomashaile Jan 18, 2020
9b08e5e
Update styles.css
thomashaile Jan 18, 2020
78cfcf4
Update styles.css
thomashaile Jan 18, 2020
11c196e
Merge pull request #4 from thomashaile/branch2-updating-the-css
thomashaile Jan 18, 2020
2bb8459
Update index.html
thomashaile Jan 18, 2020
c66fa25
Update index.html
thomashaile Jan 18, 2020
2b253d7
Update styles.css
thomashaile Jan 18, 2020
0958fe4
Update index.html
thomashaile Jan 18, 2020
60f2b1c
Add files via upload
thomashaile Jan 18, 2020
b5f78cd
Update index.html
thomashaile Jan 18, 2020
c8ad22f
Update index.html
thomashaile Jan 18, 2020
641ff76
Update styles.css
thomashaile Jan 18, 2020
98d62af
Update index.html
thomashaile Jan 18, 2020
e54e389
Update styles.css
thomashaile Jan 18, 2020
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
54 changes: 54 additions & 0 deletions exercise-1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,57 @@ body {
margin-right: auto;
max-width: 56em;
}



/* i will add media queries only below for the devices with differnt screen
600px, and 900px */

@media all and (max-width: 899px) and (min-width: 600px){

.grid__text {
grid-area: text;
padding-left: 150px;
}

.wrapper {
margin: 10px;
}

.box {
margin: var(--grid);
min-height: calc(4 * var(--grid));
padding: var(--grid);
width: 80%;
}


.grid {
grid-template-areas:
"red text"
"black text"; /* for the column arrengments */
}

}

@media screen and (min-width: 900px){

.grid {
display: grid;
grid-template-areas:
"black text red";

}
.box {
margin: var(--grid);
min-height: calc(4 * var(--grid));
padding: var(--grid);
width: auto;
}
.grid__text {
grid-area: text;
padding-left: 30px;
}

}

15 changes: 15 additions & 0 deletions exercise-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,21 @@
</head>

<body>

<h1>Identity Card</h1>

<div class="card">
<img src="./profileimage.jpg" alt="avater" />
<h1>Mr. Tom Cleverly</h1>
<div class="designation">Blogger & Content Writter</div>
<p>Contact: +32-xxxxx</p>
<div class="button"><button class="nope">NOPE</button><button class="ok">OK</button></button></div>
</div>





</body>

</html>
Binary file added exercise-2/profileimage.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 52 additions & 4 deletions exercise-2/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,57 @@
/* The only reset you’ll ever need */

body {
margin: 0;

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
.card {
box-shadow: 0 8px 8px 10px rgba(87, 84, 84, 0.4);
max-width: 250px;
padding: 10px;
margin: auto;
text-align: center;
box-sizing: border-box;
}

img {
width: 70%;
border: 1px solid black;
border-radius: 50%;
}

.designation {
font-size: 18px;
}

.button {
margin: 20px 0;
}

.nope {
border-radius: 36px;
font-size: 18px;
width: 20%;
background-color:#eee;
color: gray;
display: inline;
position: relative;
top:100px;
left:190px;

}

* {
box-sizing: border-box;
.ok {
border-radius: 36px;
font-size: 18px;
width: 20%;
background-color: #4f50ff;;
color: white;
position: relative;
top:73px;
left:330px;
}