From d1feaedefd784163899c9189e36fee6573ef190e Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sat, 11 Sep 2021 14:01:52 +0100 Subject: [PATCH] Main bulk finished, needs corner circles --- .../profile-card-component/css/style.css | 126 ++++++++++++++++++ .../newbie/profile-card-component/index.html | 59 +++++--- 2 files changed, 168 insertions(+), 17 deletions(-) create mode 100644 FrontendMentor/newbie/profile-card-component/css/style.css diff --git a/FrontendMentor/newbie/profile-card-component/css/style.css b/FrontendMentor/newbie/profile-card-component/css/style.css new file mode 100644 index 0000000..e82373a --- /dev/null +++ b/FrontendMentor/newbie/profile-card-component/css/style.css @@ -0,0 +1,126 @@ +@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap'); + +/* sizes: 1440x720 , 375 × 667 */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +:root { + --site-color: hsl(185, 75%, 39%); + --dark-cyan: hsl(185, 75%, 39%); + --dark-grayish-blue: hsl(227, 10%, 46%); + --very-dark-desaturated-blue: hsl(229, 23%, 23%); + --dark-gray: hsl(0, 0%, 59%); + --border-gray: hsla(228, 9%, 92%, 1); + + + /* default font stuff */ + --page-base-font-size: 16px; /* for rem calculations*/ + --default-font-size: 18px; + --location-font-size: 14px; + --label-font-size: 10px; + +} + +html { + font-size: var(--page-base-font-size); + height: 100%; +} + +body { + background-color: var(--site-color); + font-size: var(--default-font-size); + font-weight: 700; + font-family: 'Kumbh Sans', sans-serif; + color: var(--very-dark-desaturated-blue); + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin: 0 auto; + height: 100%; +} + +.card { + background-color: white; + + box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835); + border-radius: 15px; + text-align: center; + + width: min(87vw, 350px); +} + +.cardHeader { + background: url(../images/bg-pattern-card.svg); + width: 100%; + height: 140px; + border-radius: 15px 15px 0 0; +} + +.photo { + position: relative; + margin: 0 auto; + background: url(../images/image-victor.jpg); + width: 96px; + height: 96px; + + border: 5px solid #FFFFFF; + border-radius: 50%; + /* left: calc(50% - 96px/2); */ + top: calc(100% - 96px/2); +} + +.nameAndAge { + margin-top: 4.5rem; + display: inline-flex; +} + +.stats { + display: flex; + justify-content: space-around; + margin-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.age { + font-weight: 400; + color: var(--dark-grayish-blue); + margin-left: 0.53125rem; +} + +.location { + font-weight: 400; + font-size: var(--location-font-size); + + margin-top: 0.5rem; +} + +.border { + border: 1px solid var(--border-gray); + margin-top: 1.5rem; +} + +.label { + font-weight: 400; + font-size: var(--label-font-size); + color: var(--dark-grayish-blue); + + margin-top: 0.5625rem; +} + +.attribution { + position: absolute; + font-size: 11px; + text-align: center; + bottom: 1rem; +} +.attribution a { color: hsl(228, 45%, 44%); } + +@media screen and (min-width: 1100px) { + +} diff --git a/FrontendMentor/newbie/profile-card-component/index.html b/FrontendMentor/newbie/profile-card-component/index.html index bde117f..be8016c 100644 --- a/FrontendMentor/newbie/profile-card-component/index.html +++ b/FrontendMentor/newbie/profile-card-component/index.html @@ -5,31 +5,56 @@ - + + + Frontend Mentor | Profile card component - + --> - Victor Crest - 26 - London - - 80K - Followers - - 803K - Likes - - 1.4K - Photos +
+
+
+
+
+
+
+
+ Victor Crest +
+
+ 26 +
+
+
+ London +
+
+
+
+
+
80K
+
Followers
+
+ +
+
1.4K
+
Photos
+
+
+
+
Challenge by Frontend Mentor. - Coded by Your Name Here. + Coded by Robert McGovern.
- + \ No newline at end of file