Skip to content

Commit

Permalink
Some fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@amendezm
amendezm committed Apr 13, 2022
1 parent 88ac88a commit f8e60e1
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 68 deletions.
52 changes: 32 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
</head>
<body>
<div class="container">
<div class=" profile">
<div class="profile">
<div class="div-over-profile">
<div class="div-user">
<img src="./images/image-jeremy.png" alt="">
</div>
<div class="information">
<p class="">Report for</p>
<h1> Jeremy Robson </h1>
</div>
<div class="div-user">
<img src="./images/image-jeremy.png" alt="" />
</div>
<div class="information">
<p class="">Report for</p>
<h1>Jeremy Robson</h1>
</div>
</div>
<div class="calendar">
<div class="items">Daily</div>
Expand All @@ -53,8 +53,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">32 hrs</div>
<div class="footer">Last Week - 36hrs</div>
<div class="box-content">
<div class="content">32 hrs</div>
<div class="footer">Last Week - 36hrs</div>
</div>
</div>
</div>
<div class="box">
Expand All @@ -70,8 +72,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">10 hrs</div>
<div class="footer">Last Week - 8hrs</div>
<div class="box-content">
<div class="content">10 hrs</div>
<div class="footer">Last Week - 8hrs</div>
</div>
</div>
</div>
<div class="box">
Expand All @@ -87,8 +91,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">4 hrs</div>
<div class="footer">Last Week - 7hrs</div>
<div class="box-content">
<div class="content">4 hrs</div>
<div class="footer">Last Week - 7hrs</div>
</div>
</div>
</div>
<div class="box">
Expand All @@ -104,8 +110,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">4 hrs</div>
<div class="footer">Last Week - 5hrs</div>
<div class="box-content">
<div class="content">4 hrs</div>
<div class="footer">Last Week - 5hrs</div>
</div>
</div>
</div>
<div class="box">
Expand All @@ -121,8 +129,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">5 hrs</div>
<div class="footer">Last Week - 10hrs</div>
<div class="box-content">
<div class="content">5 hrs</div>
<div class="footer">Last Week - 10hrs</div>
</div>
</div>
</div>
<div class="box">
Expand All @@ -138,8 +148,10 @@ <h1> Jeremy Robson </h1>
<img src="./images/icon-ellipsis.svg" alt="" srcset="" />
</div>
</div>
<div class="content">2 hrs</div>
<div class="footer">Last Week - 2hrs</div>
<div class="box-content">
<div class="content">2 hrs</div>
<div class="footer">Last Week - 2hrs</div>
</div>
</div>
</div>
</div>
Expand Down
108 changes: 60 additions & 48 deletions styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,68 +6,65 @@
}

body {
height: 100vh;
min-height: 100vh;
background-color: hsl(226, 43%, 10%);
display: flex;
align-items: center;
justify-content: center;
}


.container {
width: 75vw;
height: 65vh;
width: 978px;
height: 50vh;
min-height: 420px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}

@media screen and (max-width:600px) {
@media screen and (max-width: 600px) {
.container {
display:flex;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: auto;
margin-top: auto;
padding-top: 50px;
padding-bottom: 30px;
min-width: auto;
}
}


.profile {
grid-column: span 1;
grid-row: span 2;
background-color: hsl(235, 46%, 20%);
display: flex;
flex-direction: column;
border-radius: 20px ;
border-radius: 20px;
}

@media screen and (max-width:600px) {
@media screen and (max-width: 600px) {
.profile {
width: 320px;
width: 90vw;
}
}


.box {
border-radius: 20px;
position: relative;
overflow: hidden;
}

@media screen and (max-width:600px) {
@media screen and (max-width: 600px) {
.box {

height: 180px;
width: 320px;
width: 90vw;
height: 18vh;
}
}


.box-over {
width: 100%;
height: 85%;
Expand All @@ -81,7 +78,7 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
height: 30%;
height: 40%;
padding: 1rem 2rem;
}

Expand All @@ -107,6 +104,17 @@ body {
margin-top: 0.5rem;
}

@media screen and (max-width: 600px) {
.box-content {
display: flex;
margin-top: 1rem;
}

.box-content .content {
font-size: 1.5rem;
}
}

.icon-background {
width: 100%;
height: 50%;
Expand Down Expand Up @@ -148,7 +156,7 @@ body {
background-color: hsl(43, 84%, 65%);
}

.div-over-profile{
.div-over-profile {
width: 100%;
height: 70%;
border-radius: 20px;
Expand All @@ -157,17 +165,16 @@ body {
flex-direction: column;
}

@media screen and (max-width:600px) {
@media screen and (max-width: 600px) {
.div-over-profile {
display: flex;
flex-direction: row;
font-size: 12px;
height: 120px;
flex-direction: row;
font-size: 12px;
height: 120px;
}
}


.div-user{
.div-user {
width: 60px;
height: 60px;
border-radius: 50px;
Expand All @@ -178,53 +185,58 @@ body {
justify-content: center;
align-items: center;
}
.div-user>img{

.div-user > img {
width: 95%;
height: 95%;
}

.information{
margin-top: 40px;
.information {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin: 1rem 2rem 3rem 2rem;
color: hsl(236, 100%, 87%);
margin-left: 30px;
}
.information>h1{

@media screen and (max-width: 600px) {
.information {
margin: 1rem;
}
}

.information > h1 {
color: #fff;
margin-top: 5px;
}


.items{
margin-left: 30px;
margin-top: 12px;
.items {
color: hsl(235, 45%, 61%);
}


.calendar{
width: 40%;
.calendar {
height: 30%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 0 2rem;
}

@media screen and (max-width:600px) {
@media screen and (max-width: 600px) {
.calendar {
width: 90%;
background-color: hsl(235, 46%, 20%);
display: flex;
justify-content: space-between;
justify-content: center;
border-radius: 20px ;
margin-top: 10px;
margin-bottom: 20px;

margin-top: 1.5rem;
margin-bottom: 1.5rem;
flex-direction: row;
}
}

.items:hover{
.items:hover {
cursor: pointer;
color: #fff;
}

.box-over:hover{
.box-over:hover {
cursor: pointer;
background-color: hsl(235, 45%, 61%);
}

0 comments on commit f8e60e1

Please sign in to comment.