Skip to content

Instantly share code, notes, and snippets.

@zhaohany

zhaohany/final-project-3-3.markdown

Created December 14, 2019 15:51
Show Gist options
  • Save zhaohany/94c152409790ca108d65a7c8028ae246 to your computer and use it in GitHub Desktop.
Save zhaohany/94c152409790ca108d65a7c8028ae246 to your computer and use it in GitHub Desktop.
Download ZIP
Final Project (3/3)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div class="g">
<h2>Zhaohan's Photo Gallery</h2>
<h4>带着发现美的眼睛上路</h4>
<h4>Live with no excuses and travel with no regrets</h4>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://lh3.googleusercontent.com/Z949sbFkh8YRnDOlhXTXxzL0nKREffMGdgG5W9Wpk0C2sIab9M_LnP8tnE4QARPwrb3dyZv76BReGT-E_hsWc9ptMzsXg3Q4p_Dcrc0L9tjeqo_yrq_nIMFzSpOvidiu5MKoxw5jWY-Jm9iJ9p2-hwTkvtaAE2btFB6EJbn3nvCrkdBRPol9y8_-fTOnqMzyMUuq2HlmNnCf6LUkKJ8fUPh9LW6_hYp2uPxP-UgO_BYGWzL3Jhlm0SlGWZJM0uT1P1Ex6HeNVDe_0D7uVChSE4ioZxQD-dE3JMDJ9BCFco_2P4CW0YRGCwV2_qcO0CBKiuWS7FBWdwNYxKf6mIFkNM83AqwHbVUlV3qWeYUR2W5GlNqx2Xgaag-nH6gv5zMf6YZpOmfEg_QK9QA2E81BcwusUpbqeCQP9lHRH1ho39lQgNJLMB2tG8L1gU6us7gbD9TZPOVGDLo-v9BQEspyi75KC5-UOba9_2np06ro_0escTvD20ZOj1My35EpClmkyW2XCFJ9wWFbzT5tk-Q0FgWeFIJCAk9QQIMVTu_KPCWF1d_9qy3JyTXrn_h7lfXQ-DHUFRl6JYsxJAL229FT52jDxfVzJ7W_iApk44XOjDes8yEzu50SwAyEWDwM4HbVkpBydgiBz69oa1S-HMI4_NAjzhpztXWmXbTCvhBbWBsg3w64W88ssaE=w831-h555-no">
<img src="https://lh3.googleusercontent.com/Z949sbFkh8YRnDOlhXTXxzL0nKREffMGdgG5W9Wpk0C2sIab9M_LnP8tnE4QARPwrb3dyZv76BReGT-E_hsWc9ptMzsXg3Q4p_Dcrc0L9tjeqo_yrq_nIMFzSpOvidiu5MKoxw5jWY-Jm9iJ9p2-hwTkvtaAE2btFB6EJbn3nvCrkdBRPol9y8_-fTOnqMzyMUuq2HlmNnCf6LUkKJ8fUPh9LW6_hYp2uPxP-UgO_BYGWzL3Jhlm0SlGWZJM0uT1P1Ex6HeNVDe_0D7uVChSE4ioZxQD-dE3JMDJ9BCFco_2P4CW0YRGCwV2_qcO0CBKiuWS7FBWdwNYxKf6mIFkNM83AqwHbVUlV3qWeYUR2W5GlNqx2Xgaag-nH6gv5zMf6YZpOmfEg_QK9QA2E81BcwusUpbqeCQP9lHRH1ho39lQgNJLMB2tG8L1gU6us7gbD9TZPOVGDLo-v9BQEspyi75KC5-UOba9_2np06ro_0escTvD20ZOj1My35EpClmkyW2XCFJ9wWFbzT5tk-Q0FgWeFIJCAk9QQIMVTu_KPCWF1d_9qy3JyTXrn_h7lfXQ-DHUFRl6JYsxJAL229FT52jDxfVzJ7W_iApk44XOjDes8yEzu50SwAyEWDwM4HbVkpBydgiBz69oa1S-HMI4_NAjzhpztXWmXbTCvhBbWBsg3w64W88ssaE=w831-h555-no" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Portland</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://lh3.googleusercontent.com/jb5Q83_qwUEZsVlP1tYqnvQI1u8kEHuA2ip66gXF3p0odW9NddTsOJHTCzJqiZQTXyIsSbrspQzsbQ3ir561wTaWETvJeNAPEPE6KvYHfXBV1SYYeU4hdRDebomXePEEvH0JOozv0DT9FPdhDfwPHmoKZXMB_JMZyX7hEIDNmub72kdtpm0NRRKu_ne7fNoykmFzxODEOvdvBa-CjONN9SEOCv1MC2kQEjp4UmC9qw8Gpv9cYM3QHUwKNEEJ5PEjHa8ep6sK1eQNSUW-hvyaepjXppAvJTMk-TlPnJX5p4u99qxzmnBeZw7lE4pcOJsmyJxl7bd4b3LKMXrsSJgqRXvF0Pd11voKk3ob7wxAK2gjUjRVClamJNbBtjtZotUxeSo0rt1dVP6z94XP5ko9Z9E1amBxxaNu1t6u1MRVSX9o3MhPTHa55SNIMJASN22RfoB3jXP7IuJQcUKZNX9J7B1H6u6QAD4VmhKz24vkoayqIreGCUvTPCOT1JveOhuDQ5N4LI8i7G7cRaVHPRC7LQhz-JB0WLJj9tBiNr6wAM8PBa38tLk0X-naAMBMha8GBqfGZoRjBUUfQtOXtRaSXtV8PlE5dFzTxr-5lMoZCAOEraw7hPK5y6yJZGWUfdqqVcrTyi6QVMoO0n3yLp3vzgp2NSj01VEHfHreIDbm1J_zIWsZXyLOGYY=w831-h555-no">
<img src="https://lh3.googleusercontent.com/jb5Q83_qwUEZsVlP1tYqnvQI1u8kEHuA2ip66gXF3p0odW9NddTsOJHTCzJqiZQTXyIsSbrspQzsbQ3ir561wTaWETvJeNAPEPE6KvYHfXBV1SYYeU4hdRDebomXePEEvH0JOozv0DT9FPdhDfwPHmoKZXMB_JMZyX7hEIDNmub72kdtpm0NRRKu_ne7fNoykmFzxODEOvdvBa-CjONN9SEOCv1MC2kQEjp4UmC9qw8Gpv9cYM3QHUwKNEEJ5PEjHa8ep6sK1eQNSUW-hvyaepjXppAvJTMk-TlPnJX5p4u99qxzmnBeZw7lE4pcOJsmyJxl7bd4b3LKMXrsSJgqRXvF0Pd11voKk3ob7wxAK2gjUjRVClamJNbBtjtZotUxeSo0rt1dVP6z94XP5ko9Z9E1amBxxaNu1t6u1MRVSX9o3MhPTHa55SNIMJASN22RfoB3jXP7IuJQcUKZNX9J7B1H6u6QAD4VmhKz24vkoayqIreGCUvTPCOT1JveOhuDQ5N4LI8i7G7cRaVHPRC7LQhz-JB0WLJj9tBiNr6wAM8PBa38tLk0X-naAMBMha8GBqfGZoRjBUUfQtOXtRaSXtV8PlE5dFzTxr-5lMoZCAOEraw7hPK5y6yJZGWUfdqqVcrTyi6QVMoO0n3yLp3vzgp2NSj01VEHfHreIDbm1J_zIWsZXyLOGYY=w831-h555-no" alt="Forest" width="600" height="400">
</a>
<div class="desc">Acadia National Park</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://lh3.googleusercontent.com/Nr4KVwJF2Ubh48q4HreM7HJdboNlVYuLChrw4rn4pXoQRiBwHKvXdi6lbq8bkLM5c1gY0uMzs1BSxVMmY5OH9E-YuvyP3R-mMihE4gLv-DKI3ODaxw3KT_UNjyqNf941o42bdx7uUMSL-VeOZoBuNAXg8c8wioHwEHPkDV5jPJVhWDO-Fg91c91QW3C_RfYT3bCOpTZ2KBxN38Y8eCqcevuJQjrNuNbLMobwtRaYjaoS0XxVS3s5KigBJcA8KinOEXrjtxmyS_XYOcYlwJ2cHiKJeNZbh3H9SmXljtDHK0Jbb3W80NTIjOQfQTG2VXL4gP_BTgl7OJApb9oCXJ0PuCq1shNIpUuLIngM0slPsLiPPLvPmd3FXoz7htWtmzMruMtXCVStzm51zudHpkuXIZmBnCwkyqqtYVdm_OT8X0vPWaZ7qfFg6QUaXdFdzf5Dbh0lrTpbbeDBX-LLzwc6AarXuYxf8RodA08NKpWqBfznOI2_fzYAKcGdyQfCYcgHpmwBRcrsG9CAqo9eAdRK9lqXh5jVUdg3ajgoDjVpmD41tJKg_IjzcjcLESZ_EFZTBtDl2lKbnURn3wFAaRrYtpMfHwgUd_U6ajGdnJ_rGEAPP9U-ecFMfCK0RArvcgsmZS7zNdxXLuGCue1P-oTSBBdMBfrw8v4ph1mCkozgt6bYuc9sYnYdHcM=w371-h555-no">
<img src="https://lh3.googleusercontent.com/Nr4KVwJF2Ubh48q4HreM7HJdboNlVYuLChrw4rn4pXoQRiBwHKvXdi6lbq8bkLM5c1gY0uMzs1BSxVMmY5OH9E-YuvyP3R-mMihE4gLv-DKI3ODaxw3KT_UNjyqNf941o42bdx7uUMSL-VeOZoBuNAXg8c8wioHwEHPkDV5jPJVhWDO-Fg91c91QW3C_RfYT3bCOpTZ2KBxN38Y8eCqcevuJQjrNuNbLMobwtRaYjaoS0XxVS3s5KigBJcA8KinOEXrjtxmyS_XYOcYlwJ2cHiKJeNZbh3H9SmXljtDHK0Jbb3W80NTIjOQfQTG2VXL4gP_BTgl7OJApb9oCXJ0PuCq1shNIpUuLIngM0slPsLiPPLvPmd3FXoz7htWtmzMruMtXCVStzm51zudHpkuXIZmBnCwkyqqtYVdm_OT8X0vPWaZ7qfFg6QUaXdFdzf5Dbh0lrTpbbeDBX-LLzwc6AarXuYxf8RodA08NKpWqBfznOI2_fzYAKcGdyQfCYcgHpmwBRcrsG9CAqo9eAdRK9lqXh5jVUdg3ajgoDjVpmD41tJKg_IjzcjcLESZ_EFZTBtDl2lKbnURn3wFAaRrYtpMfHwgUd_U6ajGdnJ_rGEAPP9U-ecFMfCK0RArvcgsmZS7zNdxXLuGCue1P-oTSBBdMBfrw8v4ph1mCkozgt6bYuc9sYnYdHcM=w371-h555-no" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">White Mountain</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://lh3.googleusercontent.com/VwYRxIiuH15vKRUf5tEBygquQ2OzgE0UVixnoTFgHWTapx3WiSf7NWySSklTWXuSuS3_1ShRFz9xejYGiPmEkHQ7B0No7mZfoINk_LF04XHumLBVVjCJuM2hw7fpXfOSXuq-sfaxmMlY25lnHDqcgw3FWhI67Zj0i5C_tesR2t6_RTkQpkVSBsaSXM0LeRxWnJPpni_gyYM4jUUWolF7JpRkFtEIQIKogm6LOQF1D5vk2S8mZZH66zMeNSSCgfeUm9eKt--yQvWJZH0Ak-YLdHCUAXOAQEEGOw8Wxrac7en6DXlFcbbNccHRaYr8r21MjkwakRZirciEugrs6q4ig8dNwYp1kYSWB9tRWJ6OWrL844fVsBAwzRXsMqjrKATwpQrRI6cofK7S_gq17lKMqHhrjMsFPrBqWPQcrdINsdzGpGZqD5YV_anoH0Vl7Mtnabv--dbKbTP1f6Gw4h4-gX6jOB5B-_TPSia3ZZqb2zRGKSYCJK1s7W6IORnj18cjaRu74jmnWYxBbivuEl51o3I3wFm9hKpDpa260ToXAlF-Hj881g3R63ZeikEYXlsZK8iuiKxeufBf587Yy1yWeoQIl9IQEwrsPKbJew4pSUEAaGu-bGaEscBLS4IyxZI6lymzzg3m06YlbWy4ZN-iqqU78VcKXhH-hiM9qpL9L214Xb_BJw154Ws=w675-h506-no">
<img src="https://lh3.googleusercontent.com/VwYRxIiuH15vKRUf5tEBygquQ2OzgE0UVixnoTFgHWTapx3WiSf7NWySSklTWXuSuS3_1ShRFz9xejYGiPmEkHQ7B0No7mZfoINk_LF04XHumLBVVjCJuM2hw7fpXfOSXuq-sfaxmMlY25lnHDqcgw3FWhI67Zj0i5C_tesR2t6_RTkQpkVSBsaSXM0LeRxWnJPpni_gyYM4jUUWolF7JpRkFtEIQIKogm6LOQF1D5vk2S8mZZH66zMeNSSCgfeUm9eKt--yQvWJZH0Ak-YLdHCUAXOAQEEGOw8Wxrac7en6DXlFcbbNccHRaYr8r21MjkwakRZirciEugrs6q4ig8dNwYp1kYSWB9tRWJ6OWrL844fVsBAwzRXsMqjrKATwpQrRI6cofK7S_gq17lKMqHhrjMsFPrBqWPQcrdINsdzGpGZqD5YV_anoH0Vl7Mtnabv--dbKbTP1f6Gw4h4-gX6jOB5B-_TPSia3ZZqb2zRGKSYCJK1s7W6IORnj18cjaRu74jmnWYxBbivuEl51o3I3wFm9hKpDpa260ToXAlF-Hj881g3R63ZeikEYXlsZK8iuiKxeufBf587Yy1yWeoQIl9IQEwrsPKbJew4pSUEAaGu-bGaEscBLS4IyxZI6lymzzg3m06YlbWy4ZN-iqqU78VcKXhH-hiM9qpL9L214Xb_BJw154Ws=w675-h506-no" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Winterthur Garden</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>I like Photograph, those photo are tooken by me while I am Traveling around</p>
<p>My equipment are:</p>
<p>Camera: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Lens:<br><br>Sony A7 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Canon 50mm F1.4 <br>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Canon 135mm F2.5</p>
<p>Follow me on Instgram for more photos</p>
<a href="https://www.instagram.com/zhaohan_yan/" class="button">Follow </a>
<!--<p>--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>*/-->
</div>
<div class="navbar">
<a href="https://codepen.io/zhaohany/debug/povEvXM" >Home</a>
<a href="https://codepen.io/zhaohany/debug/LYEREwy" >Travel</a>
<a href="https://codepen.io/zhaohany/debug/RwNGNXQ" >Photography</a>
</div>
</div>
</body>
</html>
Raw
style.css
body{
background: black;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
color: white;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
left: 20%;
right: 20%;
width: 60%;
}
/* Style the links inside the navigation bar */
.navbar a {
display:inline-block;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
width: 29%;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.button {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment