投稿カードコンポーネントの作成

投稿カードのコンポーネントを作成する

イメージ

CSS

/* practice_post */

box-sizing: border-box;

position: relative;
width: 330px;
height: 399px;

background: #FFFFFF;
border: 1px solid #0BBBD7;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px 10px 0px 0px;

/* footer_area */

position: absolute;
width: 330px;
height: 35px;
left: 0px;
top: 365px;

/* footer_box */

box-sizing: border-box;

position: absolute;
width: 330px;
height: 35px;
left: 0px;
top: 365px;

border-top: 1px solid #C4C4C4;

/* like_icon */

position: absolute;
left: 3.94%;
right: 90.61%;
top: 93.73%;
bottom: 2.51%;

border: 1.66667px solid #808080;

/* comment_icon */

position: absolute;
left: 12.73%;
right: 81.82%;
top: 93.48%;
bottom: 2.51%;

background: #808080;

/* dm_icon */

position: absolute;
left: 21.52%;
right: 73.64%;
top: 93.48%;
bottom: 2.51%;

border: 1.25px solid #808080;

/* save_icon */

position: absolute;
left: 91.21%;
right: 4.55%;
top: 93.48%;
bottom: 2.26%;

background: #808080;

/* thoughts_area */

position: absolute;
width: 331px;
height: 125px;
left: 0px;
top: 240px;

/* thoughts_box */

position: absolute;
width: 331px;
height: 125px;
left: 0px;
top: 240px;

/* content */

position: absolute;
width: 300px;
height: 105px;
left: 15px;
top: 250px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 20px;
/* or 167% */

color: #000000;

/* strength_area */

position: absolute;
width: 330px;
height: 40px;
left: 0px;
top: 200px;

/* strength_box */

box-sizing: border-box;

position: absolute;
width: 330px;
height: 40px;
left: 0px;
top: 200px;

background: #FFFFFF;
border-width: 1px 0px;
border-style: solid;
border-color: #C4C4C4;

/* strength_icon */

position: absolute;
width: 165px;
height: 40px;
left: 0px;
top: 200px;

/* strength_vacant_unit */

position: absolute;
left: 34.55%;
right: 55.76%;
top: 30%;
bottom: 30%;

background: #0BBBD7;

/* strength_vacant_unit */

position: absolute;
left: 46.67%;
right: 43.64%;
top: 30%;
bottom: 30%;

background: #0BBBD7;

/* strength_unit */

position: absolute;
left: 58.79%;
right: 31.52%;
top: 30%;
bottom: 30%;

background: #0BBBD7;

/* strength_unit */

position: absolute;
left: 70.91%;
right: 19.39%;
top: 30%;
bottom: 30%;

background: #D9D9D9;

/* strength_unit */

position: absolute;
left: 83.03%;
right: 7.27%;
top: 30%;
bottom: 30%;

background: #D9D9D9;

/* strength_box */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

/* strength_label */

position: absolute;
left: 12.73%;
right: 69.09%;
top: 22.5%;
bottom: 22.5%;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
display: flex;
align-items: center;

color: #808080;

/* weather_place_area */

position: absolute;
width: 330px;
height: 40px;
left: 0px;
top: 160px;

/* weather_place_box */

box-sizing: border-box;

position: absolute;
width: 330px;
height: 40px;
left: 0px;
top: 160px;

background: #FFFFFF;
border-top: 1px solid #C4C4C4;

/* place_area */

position: absolute;
width: 165px;
height: 40px;
left: 165px;
top: 160px;

/* place_label */

position: absolute;
left: 12.73%;
right: 69.09%;
top: 22.5%;
bottom: 22.5%;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
display: flex;
align-items: center;

color: #808080;

/* place_box */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

/* place_icon */

position: absolute;
left: 33.94%;
right: 50.91%;
top: 20%;
bottom: 25%;

/* Vector */

position: absolute;
left: 0%;
right: 0%;
top: 25%;
bottom: 0%;

background: #0BBBD7;

/* wether_area */

position: absolute;
width: 165px;
height: 40px;
left: 0px;
top: 160px;

/* weather_box */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

/* weather_label */

position: absolute;
left: 12.73%;
right: 69.09%;
top: 22.5%;
bottom: 22.5%;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 17px;
display: flex;
align-items: center;

color: #808080;

/* weather_icon */

position: absolute;
left: 33.33%;
right: 52.12%;
top: 20%;
bottom: 20%;

/* Vector */

position: absolute;
left: 8.33%;
right: 8.33%;
top: 8.33%;
bottom: 8.33%;

background: #0BBBD7;

/* distance_time_area */

position: absolute;
width: 300px;
height: 80px;
left: 16px;
top: 64px;

/* distance_time_box */

position: absolute;
width: 300px;
height: 80px;
left: 16px;
top: 64px;

background: #0BBBD7;
border-radius: 10px;

/* distance_place_label */

position: absolute;
width: 78px;
height: 18px;
left: 27px;
top: 77px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 15px;
display: flex;
align-items: center;

color: #FFFFFF;

/* distance_area */

position: absolute;
width: 65px;
height: 21px;
left: 27px;
top: 113px;

/* distance */

position: absolute;
width: 46px;
height: 17px;
left: 27px;
top: 113px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;

color: #FFFFFF;

/* distance_unit */

position: absolute;
width: 19px;
height: 17px;
left: 73px;
top: 117px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 15px;
display: flex;
align-items: center;

color: #FFFFFF;

/* time_area */

position: absolute;
width: 59px;
height: 38px;
left: 162px;
top: 95px;

/* time */

position: absolute;
width: 56px;
height: 18px;
left: 165px;
top: 115px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
display: flex;
align-items: center;

color: #FFFFFF;

/* time_label */

position: absolute;
width: 30px;
height: 18px;
left: 162px;
top: 95px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 15px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

/* pace_area */

position: absolute;
width: 56px;
height: 38px;
left: 242px;
top: 95px;

/* pace_time */

position: absolute;
width: 56px;
height: 18px;
left: 242px;
top: 115px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
display: flex;
align-items: center;

color: #FFFFFF;

/* pace_label */

position: absolute;
width: 39px;
height: 18px;
left: 242px;
top: 95px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 15px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

/* header */

position: absolute;
width: 330px;
height: 50px;
left: 0px;
top: 0px;

/* header_box */

position: absolute;
width: 329px;
height: 50px;
left: 0px;
top: 0px;

background: #0BBBD7;

/* user_icon */

position: absolute;
width: 35.89px;
height: 36px;
left: 12.96px;
top: 7px;

/* Ellipse 3 */

position: absolute;
width: 35.89px;
height: 36px;
left: 12.96px;
top: 7px;

background: #FFFFFF;

/* Vector */

position: absolute;
left: 4.23%;
right: 85.5%;
top: 2.01%;
bottom: 89.47%;

background: #0BBBD7;

/* date */

position: absolute;
width: 181.45px;
height: 19px;
left: 75.77px;
top: 16px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

/* detail_button */

position: absolute;
width: 48.85px;
height: 18px;
left: 281.15px;
top: 8px;

font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

/ new_post /

position: relative; width: 500px; height: 604.55px;

background: #FFFFFF; border: 1.51515px solid #0BBBD7; box-shadow: 0px 6.06061px 6.06061px rgba(0, 0, 0, 0.25); border-radius: 15.1515px 15.1515px 0px 0px;

/ Group 44 /

position: absolute; width: 500px; height: 60.61px; left: 0px; top: 209.09px;

/ Rectangle 13 /

box-sizing: border-box;

position: absolute; left: 0%; right: 0%; top: 34.59%; bottom: 55.39%;

background: #FFFFFF; border-top: 1.51515px solid #C4C4C4;

/ strength_area /

position: absolute; left: 0%; right: 50%; top: 34.59%; bottom: 55.39%;

/ Rectangle 15 /

position: absolute; left: 34.55%; right: 55.76%; top: 30%; bottom: 30%;

background: #0BBBD7;

/ Rectangle 16 /

position: absolute; left: 46.67%; right: 43.64%; top: 30%; bottom: 30%;

background: #0BBBD7;

/ Rectangle 17 /

position: absolute; left: 58.79%; right: 31.52%; top: 30%; bottom: 30%;

background: #0BBBD7;

/ Rectangle 18 /

position: absolute; left: 70.91%; right: 19.39%; top: 30%; bottom: 30%;

background: #D9D9D9;

/ Rectangle 19 /

position: absolute; left: 83.03%; right: 7.27%; top: 30%; bottom: 30%;

background: #D9D9D9;

/ Rectangle 14 /

position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;

/ 強度 /

position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ Rectangle 14 /

box-sizing: border-box;

position: absolute; left: 0%; right: 0%; top: 14.54%; bottom: 75.44%;

background: #FFFFFF; border-bottom: 1.51515px solid #C4C4C4;

/ Group 43 /

position: absolute; width: 500px; height: 60.61px; left: 0px; top: 148.48px;

/ Rectangle 12 /

box-sizing: border-box;

position: absolute; left: 0%; right: 0%; top: 24.56%; bottom: 65.41%;

background: #FFFFFF;

/ place_area /

position: absolute; left: 50%; right: 0%; top: 24.56%; bottom: 65.41%;

/ 場所 /

position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ Rectangle 14 /

position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;

/ fa-solid:road /

position: absolute; left: 33.94%; right: 50.91%; top: 20%; bottom: 25%;

/ Vector /

position: absolute; left: 0%; right: 0%; top: 25%; bottom: 0%;

background: #0BBBD7;

/ wether_area /

position: absolute; left: 0%; right: 50%; top: 24.56%; bottom: 65.41%;

/ Rectangle 14 /

position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;

/ 天気 /

position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ fluent:weather-sunny-24-filled /

position: absolute; left: 33.33%; right: 52.12%; top: 20%; bottom: 20%;

/ Vector /

position: absolute; left: 8.33%; right: 8.33%; top: 8.33%; bottom: 8.33%;

background: #0BBBD7;

/ Group 38 /

position: absolute; left: 0%; right: -0.3%; top: 60.15%; bottom: 8.52%;

/ Rectangle 20 /

position: absolute; left: 0%; right: -0.3%; top: 60.15%; bottom: 8.52%;

/ Group 36 /

position: absolute; left: 0%; right: -0.3%; top: -0.5%; bottom: 87.97%;

/ Rectangle 10 /

position: absolute; left: 0%; right: 0%; top: -0.5%; bottom: 87.97%;

background: #0BBBD7; border-radius: 15.1515px 15.1515px 0px 0px;

/ Group 35 /

position: absolute; left: 3.94%; right: 85.15%; top: 1.25%; bottom: 89.72%;

/ Ellipse 3 /

position: absolute; left: 3.94%; right: 85.15%; top: 1.25%; bottom: 89.72%;

background: #FFFFFF;

/ Vector /

position: absolute; left: 4.24%; right: 85.45%; top: 1.5%; bottom: 89.97%;

background: #0BBBD7;

/ 2022 / 07 / 06 (水) 午前 /

position: absolute; left: 23.03%; right: 21.82%; top: 3.51%; bottom: 91.69%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 24.2424px; line-height: 29px; display: flex; align-items: center; text-align: center;

color: #FFFFFF;

/ ... /

position: absolute; left: 85.45%; right: -0.3%; top: 1.5%; bottom: 93.98%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 36.3636px; line-height: 44px; display: flex; align-items: center; text-align: center;

color: #FFFFFF;

/ Group 42 /

position: absolute; left: 3.94%; right: 5.15%; top: 47.12%; bottom: 42.11%;

/ Rectangle 11 /

position: absolute; left: 3.94%; right: 5.15%; top: 47.12%; bottom: 42.11%;

background: #0BBBD7; border-radius: 7.57576px;

/ Group 39 /

position: absolute; left: 33.94%; right: 59.39%; top: 52.88%; bottom: 44.36%;

/ km /

position: absolute; left: 33.94%; right: 59.39%; top: 52.88%; bottom: 44.36%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #FFFFFF;

/ kind_area /

position: absolute; left: 0%; right: 50%; top: 14.54%; bottom: 75.44%;

/ 強度 /

position: absolute; left: 32.73%; right: 36.97%; top: 22.5%; bottom: 22.5%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ 練習 /

position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ 強度 /

position: absolute; left: 6.36%; right: 84.55%; top: 60.15%; bottom: 34.34%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #808080;

/ Rectangle 24 /

box-sizing: border-box;

position: absolute; width: 454.55px; height: 133.33px; left: 19.7px; top: 407.58px;

background: #FFFFFF; border: 1.51515px solid #C4C4C4; border-radius: 7.57576px;

/ Rectangle 25 /

position: absolute; width: 125.76px; height: 37.88px; left: 39.39px; top: 298.48px;

background: #FFFFFF; border-radius: 7.57576px;

/ Group 45 /

position: absolute; width: 71.21px; height: 37.88px; left: 222.73px; top: 298.48px;

/ Group 40 /

position: absolute; left: 55.76%; right: 41.21%; top: 52.88%; bottom: 44.4%;

/ h /

position: absolute; left: 55.76%; right: 41.21%; top: 52.88%; bottom: 44.4%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #FFFFFF;

/ Rectangle 26 /

position: absolute; width: 50px; height: 37.88px; left: 222.73px; top: 298.48px;

background: #FFFFFF; border-radius: 7.57576px;

/ Group 47 /

position: absolute; width: 71.21px; height: 37.88px; left: 301.52px; top: 298.48px;

/ Group 40 /

position: absolute; left: 71.52%; right: 25.45%; top: 52.88%; bottom: 44.4%;

/ m /

position: absolute; left: 71.52%; right: 25.45%; top: 52.88%; bottom: 44.4%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #FFFFFF;

/ Rectangle 26 /

position: absolute; width: 50px; height: 37.88px; left: 301.52px; top: 298.48px;

background: #FFFFFF; border-radius: 7.57576px;

/ Group 46 /

position: absolute; width: 71.21px; height: 37.88px; left: 384.85px; top: 298.48px;

/ Group 45 /

position: absolute; width: 71.21px; height: 37.88px; left: 384.85px; top: 298.48px;

/ Group 40 /

position: absolute; left: 88.18%; right: 8.79%; top: 52.88%; bottom: 44.4%;

/ s /

position: absolute; left: 88.18%; right: 8.79%; top: 52.88%; bottom: 44.4%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;

color: #FFFFFF;

/ Rectangle 26 /

position: absolute; width: 50px; height: 37.88px; left: 384.85px; top: 298.48px;

background: #FFFFFF; border-radius: 7.57576px;

/ button /

position: absolute; width: 98.48px; height: 33.33px; left: 375.76px; top: 556.06px;

/ Rectangle 28 /

box-sizing: border-box;

position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;

background: #FFFFFF; border: 1.51515px solid #0BBBD7; border-radius: 4.54545px;

/ 保存 /

position: absolute; left: 29.23%; right: 30.77%; top: 22.73%; bottom: 18.18%;

font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 15.1515px; line-height: 18px; display: flex; align-items: center; text-align: center;

color: #0BBBD7;

Fumiya-Matsumoto / run_manage_spa

投稿カードコンポーネントの作成 #26

投稿カードのコンポーネントを作成する

イメージ

CSS