├── .gitignore
    └── .gitignore
├── resources
    ├── paper.png
    ├── teaser.png
    ├── method_diagram.png
    └── style.css
├── README.md
└── index.html


/.gitignore/.gitignore:
--------------------------------------------------------------------------------
1 |  
2 | 


--------------------------------------------------------------------------------
/resources/paper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasonyzhang/webpage-template/HEAD/resources/paper.png


--------------------------------------------------------------------------------
/resources/teaser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasonyzhang/webpage-template/HEAD/resources/teaser.png


--------------------------------------------------------------------------------
/resources/method_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jasonyzhang/webpage-template/HEAD/resources/method_diagram.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Responsive Webpage Template
 2 | 
 3 | This project webpage template is mobile responsive! Resizing the webpage will automatically
 4 | shift elements around to fit the screen. Try a live version
 5 | [here](https://jasonyzhang.com/webpage-template).
 6 | 
 7 | This webpage template is a fork of
 8 | [this widely used project webpage template](https://github.com/richzhang/webpage-template)
 9 | by [Richard Zhang](https://richzhang.github.io). This template was originally made for
10 | [this colorful paper](http://richzhang.github.io/colorization/). The responsive version
11 | was made for [this paper](https://jasonyzhang.com/phosa/).
12 | 
13 | To use this template, clone the repo:
14 | ```
15 | git clone https://github.com/jasonyzhang/webpage-template
16 | ```
17 | 
18 | Copy the contents into a `gh-pages` branch of a GitHub repo. That will automatically 
19 | make a webpage under address [GITHUB_USERNAME.github.io/REPO_NAME](GITHUB_USERNAME.github.io/REPO_NAME).
20 | 
21 | Don't forget to update the Google Analytics script!
22 | 


--------------------------------------------------------------------------------
/resources/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     margin: 0 auto;
  3 |     font-family: "Open Sans", sans-serif;
  4 |     font-size: 20px;
  5 | }
  6 | 
  7 | .container {
  8 |     margin: 0 auto;
  9 |     width: 100%;
 10 |     max-width: 1100px;
 11 |     text-align: center;
 12 |     display: block;
 13 | }
 14 | 
 15 | .title {
 16 |     font-size: 36px;
 17 |     margin-top: 20px;
 18 |     width: 90%;
 19 | }
 20 | 
 21 | .author {
 22 |     width: 95%;
 23 |     max-width: 300px;
 24 |     font-size: 24px;
 25 | }
 26 | 
 27 | .affiliation {
 28 |     font-size: 24px;
 29 |     width: 95%;
 30 |     max-width: 450px;
 31 | }
 32 | 
 33 | .links {
 34 |     font-size: 24px;
 35 |     width: 95%;
 36 |     max-width: 150px;
 37 | }
 38 | 
 39 | .teaser {
 40 |     width: 80%;
 41 |     max-width: 800px;
 42 | }
 43 | 
 44 | .teaser img {
 45 |     width: 100%;
 46 | }
 47 | 
 48 | .video-container {
 49 |     position: relative;
 50 |     overflow: hidden;
 51 |     width: 80%;
 52 |     padding-top: 45%; /* Formula for 16:9 Aspect Ratio: width * 9 / 16 */
 53 | }
 54 | 
 55 | .video-container iframe {
 56 |     position: absolute;
 57 |     top: 0;
 58 |     left: 0;
 59 |     bottom: 0;
 60 |     right: 0;
 61 |     width: 100%;
 62 |     height: 100%;
 63 | }
 64 | 
 65 | .paper-thumbnail {
 66 |     margin: 0 auto;
 67 |     width: 40%;
 68 |     max-width: 250px;
 69 |     display: inline-block;
 70 |     vertical-align: top;
 71 |     padding: 2% 10% 4% 0;
 72 | }
 73 | 
 74 | .paper-info {
 75 |     width: 45%;
 76 |     display: inline-block;
 77 |     vertical-align: top;
 78 | }
 79 | 
 80 | @media (max-width: 999px) {
 81 |     .paper-thumbnail {
 82 |         width: 60%;
 83 |     }
 84 | 
 85 |     .paper-info {
 86 |         width: 80%;
 87 |     }
 88 | }
 89 | 
 90 | 
 91 | p {
 92 |     width: 80%;
 93 |     text-align: center;
 94 |     margin: 0 auto;
 95 | }
 96 | 
 97 | h1 {
 98 |     font-weight: 300;
 99 |     text-align: center;
100 | }
101 | 
102 | h2 {
103 |     text-align: center;
104 | }
105 | 
106 | h4 {
107 |     text-align: left;
108 | }
109 | 
110 | h5 {
111 |     text-align: left;
112 | }
113 | 
114 | div {
115 |     display: inline-block;
116 | }
117 | 
118 | hr {
119 |     border-top: 2px solid #4D4D4D;
120 |     width: 90%;
121 | }
122 | 
123 | pre {
124 |     overflow-x: auto;
125 |     text-align: left;
126 |     border: 1px solid grey;
127 |     border-radius: 3px;
128 |     background: #eeeeee;
129 |     padding: 5px 5px 5px 10px;
130 |     line-height: 1.2;
131 |     white-space: pre-wrap;
132 | }
133 | 
134 | pre code {
135 |     text-align: left;
136 |     word-wrap: normal;
137 |     white-space: pre-wrap;
138 |     font-size: 16px;
139 | }
140 | 
141 | a:link, a:visited {
142 |     color: #8D0016;
143 |     text-decoration: none;
144 | }
145 | 
146 | a:hover {
147 |     color: #FF1447;
148 | }
149 | 
150 | .layered-paper-big {
151 |     /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
152 |     box-shadow:
153 |             0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */
154 |             5px 5px 0 0px #fff, /* The second layer */
155 |             5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */
156 |             10px 10px 0 0px #fff, /* The third layer */
157 |             10px 10px 1px 1px rgba(0,0,0,0.35), /* The third layer shadow */
158 |             15px 15px 0 0px #fff, /* The fourth layer */
159 |             15px 15px 1px 1px rgba(0,0,0,0.35), /* The fourth layer shadow */
160 |             20px 20px 0 0px #fff, /* The fifth layer */
161 |             20px 20px 1px 1px rgba(0,0,0,0.35), /* The fifth layer shadow */
162 |             25px 25px 0 0px #fff, /* The fifth layer */
163 |             25px 25px 1px 1px rgba(0,0,0,0.35); /* The fifth layer shadow */
164 |     margin-left: 10px;
165 |     margin-right: 45px;
166 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  2 | <script type="text/javascript">google.load("jquery", "1.3.2");</script>
  3 | <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
  4 |       rel="stylesheet">
  5 | <link rel="stylesheet" type="text/css" href="./resources/style.css" media="screen"/>
  6 | 
  7 | <html lang="en">
  8 | <head>
  9 | 	<title>This is my paper title</title>
 10 |     <!-- Facebook automatically scrapes this. Go to https://developers.facebook.com/tools/debug/
 11 |         if you update and want to force Facebook to re-scrape. -->
 12 | 	<meta property="og:image" content="Path to my teaser.png"/>
 13 | 	<meta property="og:title" content="Creative and Descriptive Paper Title." />
 14 | 	<meta property="og:description" content="Paper description." />
 15 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 16 | 
 17 |     <!-- Add your Google Analytics tag here -->
 18 |     <!--
 19 |     <script async
 20 |             src="https://www.googletagmanager.com/gtag/js?id=UA-97476543-1"></script>
 21 |     <script>
 22 |         window.dataLayer = window.dataLayer || [];
 23 |         function gtag() {
 24 |             dataLayer.push(arguments);
 25 |         }
 26 |         gtag('js', new Date());
 27 |         gtag('config', 'UA-97476543-1');
 28 |     </script>
 29 |     -->
 30 | 
 31 | </head>
 32 | 
 33 | <body>
 34 | <div class="container">
 35 |     <div class="title">
 36 |         Creative and Descriptive Paper Title
 37 |     </div>
 38 | 
 39 |     <br>
 40 |     <br>
 41 | 
 42 |     <div class="author">
 43 |         <a href="https://en.wikipedia.org/wiki/James_J._Gibson">First Author</a><sup>1</sup>
 44 |     </div>
 45 |     <div class="author">
 46 |         <a href="https://en.wikipedia.org/wiki/James_J._Gibson">Second Author</a><sup>2</sup>
 47 |     </div>
 48 |     <div class="author">
 49 |         <a href="https://en.wikipedia.org/wiki/James_J._Gibson">Third Author</a><sup>3</sup>
 50 |     </div>
 51 |     <div class="author">
 52 |         <a href="https://en.wikipedia.org/wiki/James_J._Gibson">Fourth Author</a><sup>4</sup>
 53 |     </div>
 54 |     <div class="author">
 55 |         <a href="https://en.wikipedia.org/wiki/James_J._Gibson">Fifth Author</a><sup>1</sup>
 56 |     </div>
 57 | 
 58 |     <br>
 59 |     <br>
 60 | 
 61 |     <div class="affiliation"><sup>1&nbsp;</sup>Affiliation Number One</div>
 62 |     <div class="affiliation"><sup>2&nbsp;</sup>Affiliation Number Two</div>
 63 |     <div class="affiliation"><sup>3&nbsp;</sup>Affiliation Number Three</div>
 64 |     <div class="affiliation"><sup>4&nbsp;</sup>Affiliation Number Four</div>
 65 | 
 66 |     <br>
 67 |     <br>
 68 | 
 69 |     <div class="links"><a href="">[Paper]</a></div>
 70 |     <div class="links"><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">[Video]</a></div>
 71 |     <div class="links"><a href="https://github.com/jasonyzhang/webpage-template">[Code]</a></div>
 72 | 
 73 |     <br>
 74 |     <br>
 75 |     <div class="teaser">
 76 |         <img src="./resources/teaser.png" alt="Teaser figure."/>
 77 |         <br>
 78 |         <i>
 79 |             This template was originally made for <a href="http://richzhang.github.io/colorization/">
 80 |             Colorful Image Colorization</a>. It was adapted to be mobile responsive for
 81 |             <a href="https://jasonyzhang.com/phosa/">PHOSA</a>. Try resizing this webpage
 82 |             or opening it on your mobile device. The code can be found in
 83 |             <a href="https://github.com/jasonyzhang/webpage-template"> this repo</a>.
 84 |         </i>
 85 |     </div>
 86 | 
 87 |     <br><br>
 88 |     <hr>
 89 | 
 90 |     <h1>Abstract</h1>
 91 |     <p>
 92 |         This is my abstract.
 93 |     </p>
 94 | 
 95 |     <br><br><hr>
 96 | 
 97 |     <h1>Paper</h1>
 98 | 
 99 |     <div class="paper-thumbnail">
100 |         <a href="https://arxiv.org">
101 |             <img class="layered-paper-big" width="100%" src="./resources/paper.png" alt="Paper thumbnail."/>
102 |         </a>
103 |     </div>
104 |     <div class="paper-info">
105 |         <h4>Creative and Descriptive Paper Title</h4>
106 |         <h5>
107 |             First Author, Second Author, Third Author, Fourth Author, and Fifth Author
108 |         </h5>
109 |         <pre><code>@InProceedings{author20XXtitle,
110 |     title = {Creative and Descriptive Paper Title},
111 |     author = {Author, First and Author, Second and Author, Third and Author, Fourth and Author, Fifth},
112 |     booktitle = {Conference},
113 |     year = {20XX},
114 | }</code></pre>
115 |     </div>
116 | 
117 |     <br><br><hr><br>
118 | 
119 |     <h1>Video</h1>
120 | 
121 |     <div class="video-container">
122 |         <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameBorder="0"
123 |                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
124 |                 allowfullscreen></iframe>
125 |     </div>
126 | 
127 |     <br><br><hr>
128 | 
129 |     <h1>Code</h1>
130 |     <a href="https://github.com/jasonyzhang/webpage-template">
131 |         <img style="width:80%;" src="./resources/method_diagram.png"
132 |              alt="Model overview figure"/>
133 |     </a>
134 |     <br>
135 |     <a class="links" href="https://github.com/jasonyzhang/webpage-template">[GitHub]</a>
136 | 
137 |     <br><br><hr>
138 |     <h1>Acknowledgements</h1>
139 |     <p>
140 |         This template was originally made by <a href="http://web.mit.edu/phillipi/">Phillip Isola</a>
141 |         and <a href="http://richzhang.github.io/">Richard Zhang</a> for a
142 |         <a href="http://richzhang.github.io/colorization/">colorful</a> ECCV project. It was
143 |         adapted to be mobile responsive by <a href="https://jasonyzhang.com/">Jason Zhang</a>
144 |         for <a href="https://jasonyzhang.com/phosa/">PHOSA</a>. The code can be found
145 |         <a href="https://github.com/jasonyzhang/webpage-template">here</a>.
146 |     </p>
147 | 
148 |     <br><br>
149 | </div>
150 | 
151 | </body>
152 | 
153 | </html>
154 | 


--------------------------------------------------------------------------------