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

South Africa - Aitken Fortuin HTML-CSS-Week1 #30

Closed
SerialCarKey wants to merge 8 commits into from
Closed

South Africa - Aitken Fortuin HTML-CSS-Week1 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
76919e6
First Commit of Website Skeleton (In Progress)
SerialCarKey Dec 4, 2020
347d87e
Update Css
SerialCarKey Dec 4, 2020
bce3b38
Added more imqges to site and CSS color change
SerialCarKey Dec 4, 2020
da4f350
Linked CSS File to HTML
SerialCarKey Dec 4, 2020
6805924
Fixed CSS Images and added First Child in CSS
SerialCarKey Dec 4, 2020
5261575
Cleaning Code
SerialCarKey Dec 4, 2020
0677013
Cleanup Code
SerialCarKey Dec 4, 2020
4cd1a17
Added Links to All Articles And cleaned code
SerialCarKey Dec 4, 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
15 changes: 15 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
82 changes: 82 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,85 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

body {
font-family: Arial;
padding: 30px;
background:#062063;
align-content:center;
}

/* Header/Blog Title */
.header {
padding: 20px;
width: 100%;
font-size: 40px;
text-align: center;
background: #1fb59c;
}
/* First Image of Batman */
div.First-img{
width: 100%;
height: 300px;
background-color:#06161f;
overflow:hidden;
};

/* First child to stand out */
.p:first-child {
font-family:Helvetica;
font-size: 1.5em;
color: blue;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #aaa;
width: 80%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
100 changes: 81 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</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" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>

<link
href="D:\Git Test\HTML-CSS-Coursework-Week1\css\style.css"
rel="stylesheet"
type="text/css"
/>

<!--Header of Page-->

<head>
<div class="header">
<h2>THE BATCAVE</h2>
</div>
</head>

<body>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>A Safe Space for people to speak about Comics</h2>
<h5>Created by Comic Kids For Comic Kids on Dec 3, 2020</h5>

<!--Main Articles-->
<main>
<div class="First-img">
<img id="First-img"src="https://eskipaper.com/images/batman-wallpaper-11.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit ex auctor leo sagittis eleifend at in mi. Sed tristique mattis velit. Nulla et ullamcorper lorem, iaculis posuere nunc. Duis enim nibh, tempus nec iaculis vel, egestas bibendum nulla. Sed posuere lacus non ultrices viverra. Pellentesque nec mi sem. Cras hendrerit nec neque at semper</p>
<p>Nullam neque dolor, tempor vitae scelerisque in, commodo at quam. Phasellus quis nunc tempor, elementum justo non, mollis nulla. Pellentesque pulvinar felis eu arcu tristique pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis lorem a diam vulputate, quis semper sapien dapibus. Ut vehicula pellentesque justo in volutpat. Suspendisse potenti. To Learn more <a href="https://en.wikipedia.org/wiki/Batman">Click On Me</a> </p>
</div>

<div class="card">
<h2>What Our Current Mission Is</h2>
<h5>To allow people of all kinds to come together in a safe place and find unity</h5>
<div class="Second-img">
<img style="width:100%;height:80%" id="Second-img"src="https://c.wallhere.com/photos/88/32/1920x1080_px_Batman_DC_Comics_Justice_League_superman_Wonder_Woman-656962.jpg!d">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis Latest Content at <a href="https://www.theverge.com/2020/8/22/21377631/the-batman-teaser-trailer-robert-pattinson-matt-reeves-dc-fandome">This Website Link</a></p>
</div>

<div class="card">
<h2>What Can I Do Here?</h2>
<h5>Be Yourself with Like Minded Individuals</h5>
<div class="Second-img">
<img style="width:100%;height:80%" id="Second-img"src="https://static0.srcdn.com/wordpress/wp-content/uploads/2018/05/Batman-Leads-Justice-League-Movie-Comic.jpg?q=50&fit=crop&w=960&h=500">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis For Comics Navigate to<a href="https://dc.fandom.com/wiki/Bruce_Wayne_(Doom_Link)">This Website Of Bruce Wayne</a></p>
</div>

</div>
</main>

<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="About-me-img">
<img style="width:100%;height:200px;" id="Second-img"src=https://c4.wallpaperflare.com/wallpaper/386/410/329/batman-sign-symbol-bat-fire-hd-wallpaper-preview.jpg>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..</p>
</div>
<!-- Below are card Placeholders which can be links/images -->
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper.</p>
</div>
</div>
</div>
</body>

<div class="footer">
<h2>Site Created By Aitken Fortuin For Purpose of CodeYourFuture</h2>
</div>

</html>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->