28일째 포트폴리오 제작
6786 단어 초학자
아직 장작이지만, 학습회에 가서 해커슨과 보고 싶어요.
지금은 이런 느낌임을 설명하기 위해 총결산 페이지를 만들어 보고 싶습니다.
사전 작업 상태
Heroku로 HTML을 이동하기 위해 가상 index를 사용합니다.php를 읽으라고 했어요.
안에는
echo 'Hello PHP on Heroku!';
과phpinfo();
입니다.Heroku는 뭐든지 돼, index.php를 미리 넣으면)과 자바스크립트, PHP가 움직일 수 있기 때문에 이걸로 Prograte와 작은 물건을 만들 수 있습니다.
하지만 이렇게 되면 자기소개가 어려워 총결산 페이지로 삼고 싶다.
index.php에서 index.읽어달라고 하세요.
Prograte로 만든 index를 사용해 보세요.읽어 보았어요.
<? include('./index.html');
//echo 'Hello PHP on Heroku!';
//$dbinfo = parse_url(getenv('DATABASE_URL'));
//$dsn = 'pgsql:host=' . $dbinfo['host'] . ';dbname=' . substr($dbinfo['path'], 1);
//$pdo = new PDO($dsn, $dbinfo['user'], $dbinfo['pass']);
//var_dump($pdo->getAttribute(PDO::ATTR_SERVER_VERSION));
//phpinfo();
?>
움직였어.스마트폰의 스마트폰 버전이 움직이고 있다.스펀지 같아.
이미지 바꾸기
최상위 이미지를 변경해 봅니다.무료 그림을 찾아서 업로드하고 URL을 고칩니다.밝은 그림이기 때문에 문자는 흰색에서 검은색으로 바뀌었다.
stylesheet.css
.top-wrapper {
padding: 180px 0 100px 0;
/*background-image: url(https://prog-8.com/images/html/advanced/top.png);*/
background-image: url(4IS_aozoratoshiroisakura_TP_V.jpg);
background-size: cover;
/*color: white;*/
color: black;
text-align: center;
}
느낌 좋아!버튼을 변경합니다.
신규 로그인이 초록색이어서 그대로 Qita 버튼으로 바꿨다.
손전등과 트위터 버튼이 추가됐다.
index.html
<div class="btn-wrapper">
<a href="https://qiita.com/robamimim" class="btn signup">Qiita</a>
<p>or</p>
<!--<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebook</a> -->
<a href="https://robamimim.hatenablog.com/" class="btn facebook"><span class="fa hatena"></span>facebook</a>
<a href="https://twitter.com/robamimim" class="btn twitter"><span class="fa fa-twitter"></span>Twitter</a>
</div>
stylesheet.css.qiita {
background-color: #239b76;
margin-right: 10px;
}
.hatena {
background-color: black;
margin-right: 10px;
}
백일제의 교과 과정을 세우다
.lesson-wrapper를 복사합니다.왼쪽으로 정렬된 Days-wrapper 클래스가 작성되었습니다.
.lesson을 복사합니다.데이 레벨을 만들어 4레벨을 1레벨로 바꿨다.
stylesheet.css
.Days-wrapper {
padding-bottom: 80px;
padding-left: 5%;
padding-right: 5%;
background-color: #f7f7f7;
text-align: left;
}
.Day {
float: left;
width: 100%;
}
아이콘 만들기
아이콘은 Prograte에서 당나귀로 이동합니다.
자유로운 이미지도 좋지만 로고를 잘 만들고 싶어요.
index.html
<!-- <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> -->
<img src="roba.jpg">
완성!
드디어 해냈어!
첫 페이지를 방문했을 때
phpinfo()
보기 싫었어요.아이콘과 디자인.어떻게 하면 멋있어 보일까, 여보세요.
나는 이걸로 지금 이렇게 많은 일을 할 수 있다는 것을 설명하고 싶다.
robamim의 조합
https://appdays.herokuapp.com/
(소요 시간 3시간)
Reference
이 문제에 관하여(28일째 포트폴리오 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/robamimim/items/7a6e46d7326911f6470a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)