Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 0 additions & 7 deletions index.css

This file was deleted.

31 changes: 0 additions & 31 deletions index.html

This file was deleted.

155 changes: 155 additions & 0 deletions tiara.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
*{
margin: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.container0 {
background-color: #9c03a1;
width: 90%;
height: 100%;
margin: auto;
padding-top: 3%;
padding-bottom: 3%;

}
.container2{
height: 0px;
width: 100%;
}
.container1{
width: 95%;
height: 100%;
margin: auto;
}
.containerheadline{
background-color: #ff9c07;
width: 100%;
height: 70px;
display: flex;
flex-direction: row;
}

.container3{
width: 100%;
height: 300px;
background-color: #ffffff;
display: flex;
flex-direction: row;
}

.container4{
height: 100%;
width: 70%;
background-color: #ff9c07;
}
.container5{
height: 100%;
width: 35%;
align-items:flex-end;
background-color: #a5a58d;
}
.logo{
margin-top: 10px;
margin-left: 10px;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #ff9c07;

}
.teksheading{
margin-top: 25px;
margin-left: 10px;
font-weight: bold;
font-size:larger;
}
.teksheading1{
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
font-weight: bold;
font-size:small;
text-align: justify;
}
.part{
width: 5%;
height: 100%;
background-color: #970778

}
.part1{
width: 5%;
height: 100%;
background-color: #da0101

}
.part2{
width: 5%;
height: 100%;
background-color: #087a17

}
.part3{
width: 5%;
height: 100%;
background-color: #0149e4

}

.img-icl img {
width: 100%;
height: 100%;
border-radius: 80px

}

.img-icl {
width: 100%;
height: 100%;
margin: 0px;

}

.image-header {
width: 100%;
height: auto;
margin-right: auto;
}

.img-asis img {
width: 100%;
height: 100%;

}

.img-asis {
width: 100%;
height: 100%;
margin: 0px;

}

.img-joy1 img {
width: 70%;
height: 100%;

}

.img-joy1 {
width: 150%;
height: 75%;
margin: 0px;

}

.img-joy2 img {
width: 100%;
height: 100%;

}

.img-joy2 {
width:100%;
height: 100%;
margin: 0px;

}
60 changes: 60 additions & 0 deletions tiara.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./tiara.css">
</head>
<body>
<div class="container0">
<div class="container1">
<div class="img-asis">
<img
src="https://berkeluarga.id/media/2020/05/Inside-Out-1200x675.jpg"
alt=""
/>
</div>
<div class="container2">
</div>
<div class="containerheadline">
<div class="logo">
<div class="img-icl">
<img
src="https://www.pngitem.com/pimgs/m/570-5705233_joy-inside-out-face-png-download-joy-inside.png"
alt=""
/>
</div>
</div>
<p class="teksheading">This is JOY</p>
</div>
<div class="container3">
<div class="container4">
<div class="img-joy1">
<img
src="https://www.telegraph.co.uk/content/dam/film/InsideOut/insideout-xlarge.jpg"
alt=""
/>
</div>
<p class="teksheading1">Joy is the protagonist of Inside Out. She is the yellow Emotion and the main Emotion out of the five inside out. She appears to be happy all the time and full of energy. Amy Poehler describes her as follows: "Joy is the engine.</p>
</div>
<div class="part"></div>
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="container5">

<div class="img-joy2">
<img
src="https://cdn.wallpapersafari.com/15/72/dBJwCg.png"
alt=""
/>
</div>
</div>
</div>
</div>

</div>
</body>
</html>