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시간)

좋은 웹페이지 즐겨찾기