├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | Photography project 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 |
18 |

My Photography Website

19 |
20 |

Beautiful Images

21 | 22 |
23 |
24 |
25 |
26 |
27 | 30 | 31 | nature image 33 |
34 |

PICTURE 1

35 |
36 | nature image 38 |
39 |

PICTURE 2

40 |
41 | nature image 43 |
44 |

PICTURE 3

45 |
46 | nature image 48 |
49 |

PICTURE 4

50 |
51 | nature image 53 |
54 |

PICTURE 5

55 |
56 |
57 |
58 | 59 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | scroll-behavior: smooth; 4 | } 5 | 6 | body { 7 | font-family: 'Roboto Condensed', sans-serif; 8 | margin: 0; 9 | background: #eee; 10 | height: auto; 11 | } 12 | 13 | h1 { 14 | font-weight: 400; 15 | font-size: 2.5rem; 16 | text-transform: uppercase; 17 | margin: 0; 18 | } 19 | 20 | h2 { 21 | font-weight: 400; 22 | font-size: 1.2rem; 23 | text-transform: capitalize; 24 | margin: 0; 25 | } 26 | 27 | img { 28 | display: block; 29 | width: 100%; 30 | } 31 | 32 | main { 33 | max-width: 900px; 34 | margin: auto; 35 | box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1) 36 | } 37 | 38 | #landing { 39 | background: #fff; 40 | } 41 | 42 | #landing-text { 43 | display: flex; 44 | flex: 0 1 40vw; 45 | height: 50vh; 46 | justify-content: center; 47 | align-items: center; 48 | text-align: center; 49 | padding-right: 1rem; 50 | padding-left: 1rem; 51 | } 52 | 53 | #landing-text h2 { 54 | color: #888; 55 | } 56 | 57 | #landing-image { 58 | background: url(https://source.unsplash.com/De8wMYoSSBc); 59 | background-position: center; 60 | background-size: cover; 61 | background-repeat: no-repeat; 62 | height: 50vh; 63 | flex: 0 1 60vw; 64 | margin: 0; 65 | } 66 | 67 | .btn { 68 | padding: 0.5rem 2rem; 69 | border: 1px solid #ccc; 70 | display: inline-block; 71 | margin: 2rem 0 0; 72 | border-radius: 50px; 73 | text-decoration: none; 74 | color: #333; 75 | transition: background 500ms ease; 76 | } 77 | 78 | .btn:hover { 79 | background: #f4f4f4; 80 | } 81 | 82 | #header { 83 | padding: 1.5rem; 84 | text-align: center; 85 | background: #333; 86 | color: #fff; 87 | } 88 | 89 | #header h2 { 90 | border-left: 1px dotted #fff; 91 | border-right: 1px dotted #fff; 92 | display: inline-block; 93 | padding-right: 1rem; 94 | padding-left: 1rem; 95 | } 96 | 97 | .caption { 98 | padding: 0.8rem; 99 | text-align: center; 100 | } 101 | 102 | footer { 103 | text-align: center; 104 | padding: 2rem 1rem; 105 | margin: auto; 106 | color: #333; 107 | } 108 | 109 | footer h3 { 110 | font-size: 3rem; 111 | margin-bottom: 0; 112 | } 113 | 114 | footer p a { 115 | text-decoration: none; 116 | color: blue; 117 | } 118 | 119 | /*Screen Sizes 500px +*/ 120 | 121 | @media(min-width: 31.25rem) { 122 | #landing { 123 | display: flex; 124 | height: 100%; 125 | } 126 | 127 | #landing-text { 128 | height: 100vh; 129 | } 130 | 131 | #landing-image { 132 | height: 100vh; 133 | } 134 | } 135 | 136 | /*Screen Sizes 700px +*/ 137 | 138 | @media(min-width: 43.75rem) { 139 | .btn { 140 | padding: 1rem 3rem; 141 | } 142 | } --------------------------------------------------------------------------------