├── .gitignore └── .gitignore ├── README.md ├── index.html └── resources ├── method_diagram.png ├── paper.png ├── style.css └── teaser.png /.gitignore/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | This is my paper title 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | Creative and Descriptive Paper Title 37 |
38 | 39 |
40 |
41 | 42 |
43 | First Author1 44 |
45 |
46 | Second Author2 47 |
48 |
49 | Third Author3 50 |
51 |
52 | Fourth Author4 53 |
54 |
55 | Fifth Author1 56 |
57 | 58 |
59 |
60 | 61 |
Affiliation Number One
62 |
Affiliation Number Two
63 |
Affiliation Number Three
64 |
Affiliation Number Four
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 |
74 |
75 |
76 | Teaser figure. 77 |
78 | 79 | This template was originally made for 80 | Colorful Image Colorization. It was adapted to be mobile responsive for 81 | PHOSA. Try resizing this webpage 82 | or opening it on your mobile device. The code can be found in 83 | this repo. 84 | 85 |
86 | 87 |

88 |
89 | 90 |

Abstract

91 |

92 | This is my abstract. 93 |

94 | 95 |


96 | 97 |

Paper

98 | 99 |
100 | 101 | Paper thumbnail. 102 | 103 |
104 |
105 |

Creative and Descriptive Paper Title

106 |
107 | First Author, Second Author, Third Author, Fourth Author, and Fifth Author 108 |
109 |
@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 | }
115 |
116 | 117 |



118 | 119 |

Video

120 | 121 |
122 | 125 |
126 | 127 |


128 | 129 |

Code

130 | 131 | Model overview figure 133 | 134 |
135 | [GitHub] 136 | 137 |


138 |

Acknowledgements

139 |

140 | This template was originally made by Phillip Isola 141 | and Richard Zhang for a 142 | colorful ECCV project. It was 143 | adapted to be mobile responsive by Jason Zhang 144 | for PHOSA. The code can be found 145 | here. 146 |

147 | 148 |

149 |
150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /resources/method_diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonyzhang/webpage-template/9a8d2eeaf79796dc337d46c8cb94fe0e6c4cde4f/resources/method_diagram.png -------------------------------------------------------------------------------- /resources/paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonyzhang/webpage-template/9a8d2eeaf79796dc337d46c8cb94fe0e6c4cde4f/resources/paper.png -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /resources/teaser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonyzhang/webpage-template/9a8d2eeaf79796dc337d46c8cb94fe0e6c4cde4f/resources/teaser.png --------------------------------------------------------------------------------