Skip to content

enhanced the ui of the website #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

enhanced the ui of the website #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 0 additions & 138 deletions css/stylesheet.css
View file
Open in desktop

This file was deleted.

141 changes: 73 additions & 68 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<title> HTML and CSS practise for beginners </title>
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet">
<title>HTML and CSS Practise for Beginners</title>
<link rel="stylesheet" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Roboto:400,700" rel="stylesheet">
</head>

<body>
<div id = "wrapper">
<div id="wrapper">

<div class = "main_header">
<h1>HTML and CSS practise for beginners</h1>
</div>
<div class = "nav_bar">
<nav>
<ul>
<li><a href ="#">HOME</a></li>
<li><a href ="#">ABOUT</a></li>
<li><a href ="#">PROJECTS</a></li>
<li><a href ="#">CONTACT</a></li>
</ul>
</nav>
</div>
<header class="main_header">
<h1>HTML and CSS Practise for Beginners</h1>
</header>

<nav class="nav_bar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<div class="section_1">
<h2 class="second_header">How to use this page</h2>
<p>This page is completely open source, and the code and files are available for ALL to download.
I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style
in any which way they desire, with the hopes this can be a place for those who are beginning
with coding to come and have a go at some real live code.</br>
This page and its files can be found on GitHub, an AMAZING resource for programmers and coders
to come together and collaborate on projects together, receive tips and advice and swap code.
If you would like to view the original repository for this page then click
<a href="https://github.com/cthomas88" target="_blank">HERE</a>
</p>
</div>
<div class="section_2">
<h2 class="third_header">Rules</h2>
<p>When playing with this code and styling it, try to keep with the current theme, however I do
understand that this will change over time. Use fonts that have been used elsewhere on the page
and use inkeeping colors and themes. When it comes to using HTML elements and tags, use those
which are new to you, or you are trying to practise with, and the same goes with CSS.</br> This
may seem overly simple and pointless, but to those starting out can be valuable. You can view
previous changes and see how people did what they did by viewing older commits. Have fun and be daring
with your code! Learn something new every day!
</p>
</div>
<div>
<h2 class="section_3">What will you learn today?</h2>
<p class="star_wars">Why don't you try turning this </br>
text box into a star wars type text</br>
scroll, where it fades in the </br>
distance, using purely css? Don't think its possible? </br>
I have done it before and its easier than you think!</br>
Obviously if you feel the need to, create more text </br>
here to elongate the paragraph. This will affect the time</br>
it takes for the text to travel up the page and into the </br>
fade our area.
</p>
</div>
<div class="photo_gallery">
<h2>PHOTO GALLERY</h2>
<p>Let’s make a photo gallery that we can scroll through!</p>
</div>
<div>
<main class="content_grid">
<section class="section_1 card">
<h2>How to use this page</h2>
<p>This page is completely open source, and the code and files are available for ALL to download. I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style in any which way they desire, with the hopes this can be a place for those who are beginning with coding to come and have a go at some real live code.
This page and its files can be found on GitHub, an AMAZING resource for programmers and coders to come together and collaborate on projects together, receive tips and advice and swap code. If you would like to view the original repository for this page then click <a href="https://github.com/cthomas88" target="_blank" class="github-link">HERE</a></p>
</section>

</div>
<div class="footer">
<span>This footer will always be positioned at the bottom of the page.</span>
<span class="social_icons">
<a href="facebook.com"><img src="images/facebook.png" alt="Facebook icon" height="42" width="42"></a>
<a href="instagram.com"><img src="images/insta.jpg" alt="Instagram icon" height="42" width="42"></a>
<a href="twitter.com"><img src="images/twitter.jpg" alt="Twitter icon" height="42" width="42"></a>
</span>
</div>
<section class="section_2 card">
<h2>Rules</h2>
<p>When playing with this code and styling it, try to keep with the current theme, however I do understand that this will change over time. Use fonts that have been used elsewhere on the page and use inkeeping colors and themes. When it comes to using HTML elements and tags, use those which are new to you, or you are trying to practise with, and the same goes with CSS. This may seem overly simple and pointless, but to those starting out can be valuable. You can view previous changes and see how people did what they did by viewing older commits. Have fun and be daring with your code! Learn something new every day!</p>
</section>

<section class="challenge_section">
<h2 class="section_3">What will you learn today?</h2>
<div class="star_wars_box">
<p class="star_wars">Why don't you try turning this <br>
text box into a star wars type text<br>
scroll, where it fades in the <br>
distance, using purely css? Don't think its possible? <br>
I have done it before and its easier than you think!<br>
Obviously if you feel the need to, create more text <br>
here to elongate the paragraph. This will affect the time<br>
it takes for the text to travel up the page and into the <br>
fade our area.
</p>
</div>
</section>

<section class="photo_gallery card">
<h2>PHOTO GALLERY</h2>
<p>Let’s make a photo gallery that we can scroll through!</p>

<div class="gallery_grid">
<a href="https://www.pinterest.com/pin/nature-link-1/" target="_blank" class="gallery_link">
<img src="https://picsum.photos/id/1015/300/200" alt="Majestic Mountain View" class="gallery_item">
</a>

<a href="https://www.pinterest.com/pin/nature-link-2/" target="_blank" class="gallery_link">
<img src="https://picsum.photos/id/211/300/200" alt="Misty Forest Scene" class="gallery_item">
</a>

<a href="https://www.pinterest.com/pin/nature-link-3/" target="_blank" class="gallery_link">
<img src="https://picsum.photos/id/1043/300/200" alt="Crystal Clear Lake" class="gallery_item">
</a>

<a href="https://www.pinterest.com/pin/nature-link-4/" target="_blank" class="gallery_link">
<img src="https://picsum.photos/id/237/300/200" alt="Vibrant Sunset Landscape" class="gallery_item">
</a>
</div>
</section>
</main>

<footer class="footer">
<span>This footer will always be positioned at the bottom of the page.</span>
<span class="social_icons">
<a href="facebook.com"><img src="images/facebook.png" alt="Facebook icon" height="24" width="24"></a>
<a href="instagram.com"><img src="images/insta.jpg" alt="Instagram icon" height="24" width="24"></a>
<a href="twitter.com"><img src="images/twitter.jpg" alt="Twitter icon" height="24" width="24"></a>
</span>
</footer>

</div>
</body>
</html>
</html>
Loading