Skip to content

Commit

Permalink
Merge pull request #7 from joaocarvoli/work_03
Browse files Browse the repository at this point in the history 
Adjusting responsivity and elements style
  • Loading branch information
@joaocarvoli
joaocarvoli authored Sep 19, 2022
2 parents 9ce0b8c + 46eeb49 commit d2234a8
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 33 deletions.
24 changes: 17 additions & 7 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ a:hover {
.navigation_publications_actions {
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 1px 1px 2px 1px rgba(83, 100, 113, 0.439);
padding-top: 15px;
}


Expand All @@ -44,6 +47,13 @@ a:hover {
font-weight: bold;
}

/* Main */

.main {
border-left: 1px solid rgba(83, 100, 113, 0.282);
border-right: 1px solid rgb(83, 100, 113, 0.282);
}


/* User profile */

Expand All @@ -55,14 +65,12 @@ a:hover {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 10px;
}

.profile_bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 100px;
}

.user_info {
Expand All @@ -82,7 +90,8 @@ h5.profile {
}

.navigation_publications_links:hover {
background-color: rgba(83, 100, 113, 0.279);
background-color: rgba(83, 100, 113, 0.097);
font-weight: bold;
}

/* Post */
Expand Down Expand Up @@ -123,13 +132,13 @@ span.tzeet_info {

.actions_links_reply_share {
/*background-color: rgba(29, 155, 240, 0.1);*/
color: rgba(29, 155, 240, 1);
color: rgba(29, 156, 240, 1);
}

.actions_links_reply_share:hover {
font-weight: bold;
background-color: rgba(29, 156, 240, 0.085);
color: rgba(29, 156, 240, 0.307);
color: rgba(29, 155, 240, 1);
}

.actions_links_retzeet {
Expand All @@ -139,7 +148,7 @@ span.tzeet_info {

.actions_links_retzeet:hover {
background-color: rgba(0, 186, 124, 0.085);
color: rgba(0, 186, 124, 0.307);
color: rgba(0, 186, 124, 1);
font-weight: bold;
}

Expand All @@ -150,7 +159,7 @@ span.tzeet_info {

.actions_links_like:hover {
background-color: rgba(249, 24, 128, 0.085);
color: rgba(249, 24, 128, 0.307);
color: rgba(249, 24, 128, 1);
font-weight: bold;
}

Expand Down Expand Up @@ -179,6 +188,7 @@ span.tzeet_info {
justify-content: space-between;
text-align: center;
align-items: flex-end;

}

.recommendation:hover {
Expand Down
49 changes: 23 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<body>
<div class="container">
<div class="row">
<div class="col-3 p-1">
<div class="col-2 p-3">
<div class="navigation_publications">
<img class="tiziu" src="assets/images/icons/tiziu.png" alt="Tiziu" width="30">
<ul class="navbar_actions">
Expand Down Expand Up @@ -60,15 +60,15 @@
</div>
</div>
</div>
<div class="col-6">
<div class="col-7 main">
<div class="profile_section">
<div class="profile">
<div class="profile_bar">
<img id="image_profile" class="profile profile_bar_item rounded-circle" src="assets/images/profile.jpeg" alt="Profile user photo" width="120">
<a id="edit_profile" href="#edit_profile">
<button type="button" class="shadow btn btn-primary rounded-pill profile_bar_item" >Edit Profile</button>
</a>
</div>
<div class="profile_bar">
<img id="image_profile" class="profile profile_bar_item rounded-circle" src="assets/images/profile.jpeg" alt="Profile user photo" width="120">
<a id="edit_profile" href="#edit_profile">
<button type="button" class="shadow btn btn-primary rounded-pill profile_bar_item" >Edit Profile</button>
</a>
</div>
<div class="profile_info">
<h4 id="user_complete_name">João Victor Carvalho</h4>
<h5 id="username">@joaocarvoli</h5>
<h6 id="user_bio">Computer Engineering Student and Back-End Developer @Federal University of Ceara</h6>
Expand All @@ -93,18 +93,16 @@ <h6 id="user_bio">Computer Engineering Student and Back-End Developer @Federal U
</li>
</ul>

<div class="navigation_publications_actions">
<div class="navigation_publications_actions rounded shadow-sm">
<p>
<a class="navigation_publications_links p-2" href="#tzeets">Tzeets</a>
<a class="navigation_publications_links p-2" href="#replies">Tzeets & replies</a>
<a class="navigation_publications_links p-2" href="#media">Media</a>
<a class="navigation_publications_links p-2" href="#links">Links</a>
<a class="navigation_publications_links p-3 rounded" href="#tzeets">Tzeets</a>
<a class="navigation_publications_links p-3 rounded" href="#replies">Tzeets & replies</a>
<a class="navigation_publications_links p-3 rounded" href="#media">Media</a>
<a class="navigation_publications_links p-3 rounded" href="#links">Links</a>
</p>
</div>
</div>
<hr>
<div>
<h4>Posts</h4>
<hr>
<div class="tzeet">
<p class="tzeet_info">
Expand All @@ -114,19 +112,19 @@ <h4>Posts</h4>
"I have a dream!"
</p>
<p class="actions">
<a class="actions_links_reply_share p-sm-2" href="">
<a class="actions_links_reply_share p-sm-2 rounded" href="">
<i class="bi bi-reply"></i>
<span>Reply</span>
</a>
<a class="actions_links_retzeet p-sm-2" href="">
<a class="actions_links_retzeet p-sm-2 rounded" href="">
<i class="bi bi-arrow-clockwise"></i>
<span>Retzeet</span>
</a>
<a class="actions_links_like p-sm-2" href="">
<a class="actions_links_like p-sm-2 rounded" href="">
<i class="bi bi-heart"></i>
<span>Like</span>
</a>
<a class="actions_links_share p-sm-2" href="">
<a class="actions_links_share p-sm-2 rounded" href="">
<i class="bi bi-share"></i>
</a>
</p>
Expand All @@ -140,32 +138,31 @@ <h4>Posts</h4>
"When wealth is lost, nothing is lost; when health is lost, something is lost; when character is lost, all is lost."
</p>
<p class="actions">
<a class="actions_links_reply_share p-sm-2" href="">
<a class="actions_links_reply_share p-sm-2 rounded" href="">
<i class="bi bi-reply"></i>
<span>Reply</span>
</a>
<a class="actions_links_retzeet p-sm-2" href="">
<a class="actions_links_retzeet p-sm-2 rounded" href="">
<i class="bi bi-arrow-clockwise"></i>
<span>Retzeet</span>
</a>
<a class="actions_links_like p-sm-2" href="">
<a class="actions_links_like p-sm-2 rounded" href="">
<i class="bi bi-heart"></i>
<span>Like</span>
</a>
<a class="actions_links_share p-sm-2" href="">
<a class="actions_links_share p-sm-2 rounded" href="">
<i class="bi bi-share"></i>
</a>
</p>
</div>
<hr>
</div>
</div>
<div class="col-3">
<div class="col-3 p-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text rounded" id="btnGroupAddon"><i class="bi bi-search"></i></div>
</div>

<input type="text" class="form-control bg-light search-button" placeholder="@username">
</div>
<div class="suggestion">
Expand Down

0 comments on commit d2234a8

Please sign in to comment.