0
Build The UI BY FOLLOWING THE BELOW INSTRUCTION
Your app needs some UI elements. Follow the steps below then click the play button Step 1 Just after the opening BODY tag, add a HEADING level-2 element and set its text to a sample user's name, E.g your name! after it, add a DIV. Give it a class of user-photo and mdc-elevation--z3, then add an IMG element that displays a placeholder image from https://placeholder.com Step 2 Create a DIV with a CSS class of details and mdc-elevation--z3. Create another DIV with a CSS class of messages. Step 3 Create a FOOTER element and add 3 buttons within it. Each button should : have an id of btn-address, or btn-phone, or btn-birthdate have a CSS class of mdc-icon-button and material-icons contain an icon within it. So, for a like button, you'd go to https://material.io/tools/icons/, note the name of an appripriate icon, and put its name as text inside the button. E.g <button class="...">favorite</button> marilyn monroe
6 Antworten
+ 4
Is this your homework or assignment?
+ 3
Step 1
Remove all margins from the BODY and prevent it from scrolling (hint: see the overflow CSS property)
Make the text of the HEADING centered, give it reasonable bottom margin, and make its text capitalized (i.e the first character of each word is uppercase)
Step 2
Style the .details DIV to have a minimum height of 6em and a background of #6200ee
Style every BUTTON in the FOOTER to have a white color
Step 3
Make the user-photo DIV display as a circle instead of a square. The IMG within it should occupy the entire available space and not overflow outside the wrapper DIV. Your goal is to make the IMG look like a circular photo. HINT - the IMG should be displayed as a block element, and take on the dimensions of its immediate parent.
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Mini App</title>
<style>
body {
background: lavender;
}
div.user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
}
div.details {
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 1.1em;
}
footer {
width: calc(100% - 2em);
z-index: 500;
position: absolute;
bottom: 0;
overflow: hidden;
display: flex;
justify-content: space-between;
margin: 0 1em;
}
footer button.mdc-icon-button {
margin: 0.5em;
}
</style>
</head>
<body>
<header>
<h2> AYUBA MONDAY TITUS </h2>
</header>
<div class="user-photo mdc-elevation--z3">
<img src="https://placeholder.com">
</div>
<div class="details mdc-elevation--z3"></div>
<div class="message"></div>
<footer>
<button id="btn-address"
class="mdc-icon-button and material-icons">home</button>
<button id="btn-phone"
class="mdc-icon-button and material-icons">phone</button>
<button id="btn-birthday"
class="mdc-icon-button and material-icons">date_range</button>
</footer>
<script>
const notify = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const clearNotice = () => {
const toastr = document.querySelector('.messages');
if
- 1
<footer>
<button id = "btn-address"
class="mdc-icon-button small material-icons" style="color: white;"><i> home</i></button>
<button id = "btn-phone"
class="mdc-icon-button small material-icons" style="color: white;"><i>phone</i></button>
<button id = "btn-birthdate"
class="mdc-icon-button small material-icons" style="color: white;"><i>date_range</i></button>
</footer>
<script>
const notify = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const clearNotice = () => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = '';
toastr.classList.remove('on');
};
const displayUserPhotoAndName = (data) => {
if(!data) return;
// add your code here
clearNotice();
};
const getAUserProfile = () => {
const api = 'https://randomuser.me/api/';
// make API call here
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
};
startApp();
</script>
</body>
</html>
- 1
Its an assignment though... here is my coding and it seems am not getting it right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Mini App</title>
<style>
body{
background: lavender;
margin: 0px;
overflow: hidden
}
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin-bottom: 2.79em;
text-transform: Capitalize;
}
div.user-photo{
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
overflow: hidden;
border-radius: 100%;
-webkit-border-radius: 60%;
-moz-border-radius: 60%;
}
div.details{
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 0.2em;
display: flex;
min-height: 6em;
background: #6200ee;
}
footer{
width: calc(100% - 2em);
z-index: 500;
position: absolute;
bottom: 0;
overflow: hidden;
display: flex;
justify-content: space-between;
margin: 0 1em;
}
footer button.mdc-icon-button{
margin: 0.5em;
background-color: #573594;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
}
</style>
</head>
<body>
<header>
<h2>Ibu Omenka Eric</h2>
</header>
<div class="user-photo mdc-elevation--z3" >
<img src="https://via.placeholder.com/150" alt =""/>
</div>
<div class ="details mdc-elevation--z3"></div>
<div class ="messages"></div>
- 2
Ohwo, were you able to sort the issue out?
Häufig solche Fragen?
Effizienter lernen, kostenlos:
Heute heiß
Someone can help me
1 Votes
What's wrong with this?
2 Votes
HTML community, HELP!!
1 Votes
I am a super beginner
0 Votes
X velocity
0 Votes
What's doctype htMl
2 Votes
How this program executes?
0 Votes
Pls give me an idea
1 Votes