diff --git a/css/style.css b/css/style.css index 75e9841e..c698cb4d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,152 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +body { + font-family: Arial, Helvetica, sans-serif +} + +.header { + display: flex; + flex-direction: row; + flex: auto; + gap: 30px; + align-items: center; + justify-content: space-between; + height: 120px; + border: 2px solid rgb(2, 0, 10); +} + +.header-image { + width: 140px; + max-width: 140px; + margin: 5px; +} + +h1 { + font-size: 28px; + line-height: 24px; + font-weight: bold; + font-style: italic; + font-family: 0.8rem 'Fira Sans', sans-serif; + text-align: center; +} + +#main-nav { + display: flex; + flex-direction: row; + flex: auto; + align-items: center; + justify-content: space-around; + background-color: rgb(232, 248, 11); + border-radius: 20px; + cursor: pointer; + font-size: 14px; + line-height: 20px; + font-weight: bold; + font-style: italic; + text-align: center; + font-family: 'Fira Sans', sans-serif; + margin-right: 5px; + padding: 10px; +} + +article:first-child { + color: rgb(0, 0, 0); + background-color: rgb(245, 9, 9); + padding: 5px; + margin-top: 40px; + border-radius: 30px; + font-size: 16px; + line-height: 20px; + font-style: italic; + font-family: 'Fira Sans', sans-serif; +} + +article { + background-color: #c2f7f7; + padding: 5px; + margin-top: 40px; + border-radius: 30px; + font-size: 16px; + line-height: 20px; + font-style: italic; + font-family: 'Fira Sans', sans-serif; +} + +.links { + color: rgb(19, 2, 43); + font-weight: bold; + font-style: italic; + text-align: center; + font-family: 'Fira Sans', sans-serif; +} + +.summary { + background-color: rgb(255, 255, 255); + display: inline-block; + color: rgb(0, 0, 0); + border-radius: 3px; + font-size: 16px; + line-height: 20px; + font-style: italic; + font-family: 'Fira Sans', sans-serif; +} + +.footer-box { + margin-bottom: 40px; + display: flex; + flex-direction: row; + flex: auto; + gap: 2px; + align-items: stretch; + justify-content: space-between; + height: auto; + padding: 30px; +} + +.subscribe-form, +.copyright-text { + color: rgb(19, 2, 43); + font-weight: bold; + font-style: italic; + text-align: center; + font-family: 'Fira Sans', sans-serif; +} + +#input-email { + text-size-adjust: 100%; + box-sizing: inherit; + font-family: sans-serif, 'Fira Sans'; + background-color: transparent; + font-size: 1rem; + border: 1px solid rgb(226, 11, 40); + border-radius: 10px; + display: inline; + padding: 3px; + color: blue; +} + +.subscribe-button { + align-items: center; + border: 0px; + border-radius: 10rem; + background-color: rgb(237, 44, 157); + color: rgb(255, 255, 255); + cursor: pointer; + font-family: sans-serif, 'Fira Sans'; + font-size: 1rem; + font-style: italic; + font-weight: 300; + justify-content: center; + padding: 4px; + text-align: center; +} + +.copyright-bars, +.info-bar, +.subscribe-bar { + display: flex; + flex-direction: row; + flex: auto; + gap: 2px; + align-items: center; + justify-content: space-between; + height: auto; +} \ No newline at end of file diff --git a/images-chess board.jpg b/images-chess board.jpg new file mode 100644 index 00000000..66e14d1f Binary files /dev/null and b/images-chess board.jpg differ diff --git a/index.html b/index.html index 67dfc7f5..32662f26 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,153 @@ - + + + - + My Blog - + + + + + + - - - - - - + + + + + + + + +
+ + chess-board + +

Glasgow Southside
Chess Club

+ + + + +
+ + + + + + + +
+ + + +
+ +
+

About this blog

+
+ Why this blog? + 1. ............ 2. ......... ...... 3. ............ ........ ......... +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a est ut libero tincidunt porta ac ut ipsum. Quisque eget cursus nulla. Fusce ac hendrerit metus, nec efficitur purus. Sed finibus ex sed orci bibendum volutpat. Donec quis + blandit mi. Sed lacinia varius turpis, ac vulputate elit aliquam vel. Maecenas gravida nunc lectus, quis posuere augue cursus eu. Vestibulum feugiat risus vitae massa porttitor, venenatis ornare tortor consequat. Nunc vehicula felis + erat, et tincidunt orci molestie sit amet. Sed eu dui ornare tellus ullamcorper aliquet ut eu mauris. Praesent at vestibulum enim, porta mollis urna. Sed quam enim, suscipit sed eros a, feugiat scelerisque dui. In ac nunc gravida, + facilisis erat non, sagittis dolor. Curabitur a auctor mi. Donec ac gravida risus. Duis quis rutrum velit. + Read more +

+ +
+ +
+

The History of Chess

+
+ Turning Points + 1. Before 1900 2. After 1900 +
+ +

Vestibulum blandit lacus a velit feugiat, sed fringilla quam tristique. Etiam vitae dolor non massa faucibus hendrerit sed non magna. Nulla facilisi. Vivamus ac lacus porttitor, sagittis metus quis, hendrerit enim. Sed nisl justo, consequat + tristique purus vel, auctor pulvinar nisl. Curabitur velit lectus, pellentesque sed erat nec, hendrerit elementum orci. Pellentesque efficitur nisl in velit posuere pellentesque. Vivamus ac vulputate felis. Vestibulum id nulla dolor. + Curabitur euismod enim quis ipsum pretium scelerisque. Maecenas laoreet tristique elit. Nunc dolor felis, tincidunt ut enim at, accumsan ullamcorper est. Integer pretium ex rutrum, semper tellus maximus, dictum orci. Curabitur eget + ullamcorper mi. Donec id volutpat nulla, ut ultricies justo. Quisque quis eros id ante rhoncus convallis. + + Read more +

+
+ +
+

Our Club Background

+

Etiam vel mi sed nunc dignissim aliquet vel ut odio. Integer finibus lectus sed lorem ullamcorper, non varius ligula pellentesque. Ut sed libero dapibus, aliquam diam sit amet, pulvinar est. Integer mattis orci vel lacus facilisis, sit + amet auctor neque suscipit. Suspendisse vitae pretium justo. Donec vitae imperdiet nibh. Nullam convallis ipsum non ligula placerat, at ultrices sem laoreet. Sed eu tellus ante. Fusce venenatis ligula lacus, et pellentesque magna molestie + in. Quisque pretium tincidunt congue. Nullam a ultricies metus, tincidunt pharetra magna. Phasellus eget nisi non dui fermentum venenatis. Maecenas interdum libero nisl, nec vulputate massa feugiat vitae. Sed nibh nisl, vulputate a + libero eu, faucibus porta augue. Etiam sem ante, finibus at efficitur a, hendrerit nec magna. + Read more +

+
+ +
+ + + +
+ + + + + + + + + + + + + + + \ No newline at end of file