diff options
| -rw-r--r-- | src/DevHive.Angular/src/app/components/profile/profile.component.css | 69 | ||||
| -rw-r--r-- | src/DevHive.Angular/src/app/components/profile/profile.component.html | 36 |
2 files changed, 104 insertions, 1 deletions
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css index e69de29..4b6dde0 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.css +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css @@ -0,0 +1,69 @@ +* { + box-sizing: border-box; +} + +#content { + max-width: 22em; + justify-content: start; +} + +/* Top card */ + +#main-info { + display: flex; + width: 100%; + margin-bottom: .25em +} + +#main-info > img { + width: 5em; + height: 5em; +} + +#other-main-info { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +#other-main-info > * { + font-size: 1.4em; +} + +#other-main-info *:nth-child(1) { + margin-top: auto; +} + +#other-main-info *:nth-last-child(1) { + margin-bottom: auto; +} + +/* Languages and technologies */ + +.secondary-info { + margin-top: .25em; + margin-bottom: .25em; + width: 100%; + display: flex; + align-items: center; +} + +.user-language, .user-technology { + border-radius: .4em; + background-color: lightgrey; + padding: .2em; + margin: 0 .2em; +} + +/* Posts */ + +#posts { + width: 100%; +} + +#posts > hr { + width: calc(100% - 1em); + color: black; + border: 1px solid black; +} diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html index 9df0576..ddf4a21 100644 --- a/src/DevHive.Angular/src/app/components/profile/profile.component.html +++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html @@ -1 +1,35 @@ -<p>profile works!</p> +<div id="content"> + <div id="main-info" class="rounded-border"> + <img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> + <div id="other-main-info"> + <div id="name"> + Gosho Trapov + </div> + <div id="username"> + @gosho_trapov + </div> + </div> + </div> + <div class="secondary-info rounded-border"> + Languages: + <div class="user-language"> + C# + </div> + <div class="user-language"> + TypeScript + </div> + </div> + <div class="secondary-info rounded-border"> + Technologies: + <div class="user-technology"> + .NET 5 + </div> + <div class="user-technology"> + Angular + </div> + </div> + <div id="posts"> + <hr> + Posts go here + </div> +</div> |