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

London 10-HTML-CSS-Coursework-Week1-Shahid Amin #318

Open
Schboostie wants to merge 3 commits into
base: master
Choose a base branch
from
Open

London 10-HTML-CSS-Coursework-Week1-Shahid Amin #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2924441
blogWebsiteShahid
Schboostie Jan 28, 2023
0c6b27a
stylesBlogShahid
Schboostie Jan 28, 2023
db866b7
changes made to the article
Schboostie Apr 9, 2023
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
159 changes: 158 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,174 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>Why I love JavaScript...</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

<div class="header">
<h1>Why I love JavaScript...</h1>
<br />
<p>This article contains a few reasons why I like Javasript</p>
</div>

<h2>How I became interested in Coding</h2>
<article>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse,
quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo
voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio
dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti
atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati
cupiditate non provident, similique sunt in culpa, qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
est eligendi optio, cumque nihil impedit, quo minus id, quod maxime
placeat, facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut
rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et
molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat.»
</p>
</article>

<div class="row">
<div class="column">
<div class="card">
<h3>Essential Framworks</h3>
<p>React</p>
<p>Angular</p>
</div>
</div>

<div class="column">
<div class="card">
<h3>Inspiring developers</h3>
<p>Brandon Eich</p>
<p>Jordan Walke</p>
</div>
</div>

<div class="column">
<div class="card">
<h3>Use Cases</h3>
<p>Web Development</p>
<p>Game Development</p>
</div>
</div>

<div class="column">
<div class="card">
<h3>Companies that use JavaScript</h3>
<p>FaceBook</p>
<p>PayPal</p>
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="container">
<article class="first-article">
<div class="row">
<div class="column-66">
<h2 class="xlarge-font">
<b>Making websites fun, flexible and interactive!</b>
</h2>
<h2 class="large-font" style="color: MediumSeaGreen">
<b>Why use it?</b>
</h2>
<article>
<p>
<span style="font-size: 36px"
>In the early days of web development</span
>
lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</article>
<button class="button">Download IDE from JetBrains!</button>
</div>

<div class="column-33">
<img
src="https://tse1.mm.bing.net/th?id=OIP.U16Sxl3a_xpV8R3xDGgMdQHaEK&amp;pid=Api&amp;rs=1&amp;c=1&amp;qlt=95&amp;w=191&amp;h=107"
width="335"
height="471"
/>
</div>
</div>
</article>
</div>

<article>
<div class="container" style="background-color: #f1f1f1">
<div class="row">
<div class="column-33">
<img
src="https://tse1.mm.bing.net/th?id=OIP.q6WjZsBp51C9cdRZBWMKSgHaHW&amp;pid=Api&amp;rs=1&amp;c=1&amp;qlt=95&amp;w=106&amp;h=105"
alt="App"
width="335"
height="471"
/>
</div>
<div class="column-66">
<h2 class="xlarge-font"><b>Clarity</b></<h2></h2>>
<h2 class="large-font" style="color: red"><b>Web uses...</b></h2>
<p>
<span style="font-size: 24px"
>How to create a reactive site is</span
>
, incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquipex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
</p>
<button class="button" style="background-color: red">
Like This Article
</button>
</div>
</div>
</div>
</article>

<br />
<div class="container-fav">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
</div>
</body>
</html>
174 changes: 174 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@

/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_blog_layout */

.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}



/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_column_cards*/

* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

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

/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}

.card {
background-image:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}

}
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zig_zag_layout&stacked=h*/

.container {
padding: 64px;
}



.row:after {
content: "";
display: table;
clear: both
}

.column-66 {
float: left;
width: 66.66666%;
padding: 20px;
}

.column-33 {
float: left;
width: 33.33333%;
padding: 20px;
}

.large-font {
font-size: 48px;
}

.xlarge-font {
font-size: 64px
}

.button {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
background-color: #04AA6D;
}

img {
display: block;
height: auto;
max-width: 100%;
}

@media screen and (max-width: 1000px) {
.column-66,
.column-33 {
width: 100%;
text-align: center;
}
img {
margin: auto;
}
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_social_media_buttons2*/


.container-fav{
display:flex;
flex-wrap: wrap;
align-content: flex-end;
justify-content: space-between;

}
.fa {
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-end;
padding: 20px;
font-size: 70px;
width: 100px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-google {
background: #dd4b39;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.fa-youtube {
background: #bb0000;
color: white;
}

article:first-child {
color: rgb(255, 242, 0);
-webkit-text-stroke: 0.75px black;
}