Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

South Africa_1 - Douglas Van Der Merwe - HTML/CSS Coursework - Week_1 #26

Closed
DouglasVDM wants to merge 13 commits into from
Closed

South Africa_1 - Douglas Van Der Merwe - HTML/CSS Coursework - Week_1 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b4e66b5
the start
DouglasVDM Nov 26, 2020
c09ee8b
Basic Layout
DouglasVDM Dec 1, 2020
a0e1889
header style
DouglasVDM Dec 2, 2020
ccba78c
add Footer with link to Youtube
DouglasVDM Dec 2, 2020
a764e66
Tab for writing Clean Code
DouglasVDM Dec 2, 2020
8718d53
style footer
DouglasVDM Dec 2, 2020
9506ce8
use first child
DouglasVDM Dec 2, 2020
c4fec19
live server
DouglasVDM Dec 12, 2020
8ae47ce
add bootstrap card
DouglasVDM Dec 12, 2020
38e9559
form exercise
DouglasVDM Dec 12, 2020
7d2d7c3
add legend to form
DouglasVDM Dec 13, 2020
ddeb5fc
add radio buttons yes no
DouglasVDM Dec 13, 2020
5807a22
add email address
DouglasVDM Dec 13, 2020
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
21 changes: 21 additions & 0 deletions Practical-Form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<head>
<body>

<form>
<fieldset1>
<label for="fname">Student Name:</label><br>
<input type="text" id="fname" name="fname" value="John" required> <br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<input type="submit" value="Submit">
</form>

<form>
<input type="radio" id="rAssistance" name="rAssistance" value="yes">
<label for="rAssistance">yes</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>
</fieldset1>

</body>
57 changes: 49 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,49 @@
/**
* 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.
*
*/
* {
font-family: Arial, Helvetica, sans-serif;
}

main {
margin-left: 5%;
}

.article:first-child {
text-transform: uppercase;
font-weight: bolder;
color: rgb(36, 241, 18);
background-color: blue;
}

header {
background-color: #211a1d;
color: #ffffff;
width: 100%;
padding: 20px;
}

nav {
display: inline-block;
width: 100%;
}

header ul {
margin: 20px 0 0 0;
padding: 0;
}

header ul li {
display: inline-block;
margin-right: 10px;
}




footer {
background-color: #211a1d;
color: #ffffff;
width: 100%;
padding: 20px;
display: flex;
justify-content: space-between;
}

95 changes: 94 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,110 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>

<title>Tennis Serve</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<img src="https://lh3.googleusercontent.com/a-/AOh14GgGXzXPH2l6VlovTa1r7-u4_diH1VRegNZyrx1yMQ=s88-c-k-c0x00ffffff-no-rj-mo" alt="tennisserve" id="tennisserve"
>
<nav>
<ul>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<!--
<li><a class="nav-link" href="#About">About</a></li>
<li><a class="nav-link" href="#Courses">Courses</a></li>
<li><a class="nav-link" href="#Contact">Contact</a></li> -->
</ul>
</nav>
</header>
<main>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="https://lh3.googleusercontent.com/a-/AOh14GgGXzXPH2l6VlovTa1r7-u4_diH1VRegNZyrx1yMQ=s88-c-k-c0x00ffffff-no-rj-mo" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Beginner</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quidem error repudiandae sapiente ipsa iure facilis doloremque magni, fugit nemo veritatis perferendis obcaecati? Numquam, aut iure aliquid in maiores repellendus.</p>
<a href="https://www.youtube.com/watch?v=rFne-kEjnfI&t=95s" class="btn btn-primary">More Information</a>
</div>
</div>
<!--
<section class="article">
<article class="article1">
<h2>Beginner</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quidem error repudiandae sapiente ipsa iure facilis doloremque magni, fugit nemo veritatis perferendis obcaecati? Numquam, aut iure aliquid in maiores repellendus.</p>
<a href="https://www.youtube.com/watch?v=rFne-kEjnfI&t=95s" target="blank">More Information</a>
</article>
</section>
-->
<section class="article">
<article class="article2">
<h2>Intermediate</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quidem error repudiandae sapiente ipsa iure facilis doloremque magni, fugit nemo veritatis perferendis obcaecati? Numquam, aut iure aliquid in maiores repellendus.</p>
<a href="https://www.youtube.com/watch?v=IfE_66iSzq0&t=13s">More Information</a>
</article>
</section>

<section class="article">
<article class="article3">
<h2>Advanced</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quidem error repudiandae sapiente ipsa iure facilis doloremque magni, fugit nemo veritatis perferendis obcaecati? Numquam, aut iure aliquid in maiores repellendus.</p>
<a href="https://www.youtube.com/watch?v=IfE_66iSzq0&t=13s">More Information</a>
</article>
</section>

</main>


<form>
<fieldset1>
<legend>Student Details</legend>
<label for="fname">Student Name:</label>
<input type="text" id="fname" name="fname" value="" required>

<legend>Require assistance:</legend>
<input type="radio" id="Yes" name="Yes" value="Yes">
<label for="Yes">Yes</label>
<input type="radio" id="No" name="No" value="No">
<label for="No">No</label><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" ><br>

<input type="submit" value="Submit">
</form>

<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>


<!-- <form>
<label for="fname">Require Asiistance:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Require Assistance</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Yes</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">No</label>
</form>
</fieldset1> -->


<footer>
<p>If you want to know more. Please join me for a <a href="https://www.youtube.com/channel/UCvL2Hq9-jWIbUDevRYXhk1A?view_as=subscriber" target="blank">session</a></p>
</footer>
</body>
</html>