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

London9-MohammadSefidgar-HTML-CSS-Week1 #338

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

London9-MohammadSefidgar-HTML-CSS-Week1 #338

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
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": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
55 changes: 47 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,47 @@
/**
* 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.
*
*/
* {
margin: auto;
padding: 5px;
text-align: center;
background-color: darkgray;
font-style: italic;
}

.wrapper {
width: 100%;
}

.img-banner {
width: 30%;
}

.img-info {
width: 100%;
}

h1 {
text-align: center;
color: darkred;
}

p {
text-align: center;
font-size: 20px;
}

h2 {
text-align: center;
}

.img-info p {
text-align: center;
padding: 0px 30px 20px;
font-family: arial;
font-size: 20px;
color: #111;
line-height: 24px;
}

.footer {
color: darkred;
text-align: left;
}
52 changes: 35 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>

<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"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>My new web</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>
</html>
</head>

<body>
<h1>My new web</h1>
<p>
<p>This is my new project that I am working on</p>
</p>
<img class="img-banner" src="blog-sketch-week-1.png" alt="mmtuts banner">
<div class="wrapper">
<article class="img-info">
<h2>Hey!</h2>
<p>Integer ut gravida tortor. Cras lacinia eu erat sed varius. Morbi cursus viverra nibh id bibendum. Sed ligula lorem, eleifend sed risus a, sagittis dignissim velit. Nunc enim turpis, aliquet vitae orci at, tincidunt tristique lorem.</p>
<p> Aenean a quam nec enim dignissim dignissim quis sed augue. Nunc convallis venenatis nisi eget mattis. Suspendisse et enim eu metus mattis elementum non ac sapien. Ut faucibus quis nulla vel vulputate. Nullam ultrices pellentesque ultricies.
</p>
</article>
</div>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="peymansefidgar79@gmail.com">Email</a></li>
</ul>
</nav>
</div>
</footer>
</body>

</html>