diff options
| author | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-01-16 13:18:41 +0200 |
|---|---|---|
| committer | Syndamia <kamen.d.mladenov@protonmail.com> | 2021-01-16 13:18:41 +0200 |
| commit | 9ea2a850cfabaee5f6f56ff57e4729e2615729da (patch) | |
| tree | 03e02155c1b98e4dd7bb430f749c835935a98266 /src/DevHive.Angular | |
| parent | 548a12b25a4dfe15f322d25763a66684df218231 (diff) | |
| download | DevHive-9ea2a850cfabaee5f6f56ff57e4729e2615729da.tar DevHive-9ea2a850cfabaee5f6f56ff57e4729e2615729da.tar.gz DevHive-9ea2a850cfabaee5f6f56ff57e4729e2615729da.zip | |
Added a static design for the profile page
Diffstat (limited to 'src/DevHive.Angular')
| -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> |