Skip to content
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

adding style.css and index2.html files #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+172 −0
Open

adding style.css and index2.html files #10

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
53 changes: 53 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*

*/

body {
background-color: lightblue;
padding: 10px;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: justify;
}

.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 0px 10px 20px 20px;
}

.heading-primary--main {
color: #7575a3;
font-size: 50px;
}

#h2 {
font-size: 30px;
color: #009973;
}

.btn {
background-color: #4CAF50; /* Green */
border-radius: 4px;
color: #fff;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}

/* .btn--white { */
/* background-color: #fff; */
/* color: #7575a3; */
/* } */

.btn:hover {
background-color: #fff;
color: #4CAF50;
}
119 changes: 119 additions & 0 deletions index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0>
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/spl.jpg">
<link rel="shortcut icon" type="image/png" href="img/CSX-trains-9566938-2560-1977.jpg">
<title>Whimsical Whirlwind</title>
</head>


<body class="body">
<header class="header">
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Whimsical Whirlwind</span><br>
<span class="heading-primary--sub" id="h2">Tiny spurts of abstruse chaotic energy</span>
</h1>
<a href="#" class="btn btn--white">Explore</a>
</div>
</header>
<div class="container">
<main>
<h2 class="visuallyhidden">Articles</h2>

<article>
<header>
<h3>Action replay</h3>
<time datetime="2016-05-12T08:00">May 12</time>
</header>



<p>A day on a local train, watching people making life overflow from its brim</p>

<a class="btn" href="#">Read more</a>
</article>

<article>
<header>
<h3></h3>
<time datetime=""></time>
</header>

<img src="" alt="">

<p></p>

<a class="btn" href="#">Read more</a>

</article>

<article>
<header>
<h3></h3>
<time datetime=""></time>
</header>

<img src="" alt="">

<p></p>

<a class="btn" href="#">Read more</a>

</article>

<article>
<header>
<h3></h3>
<time datetime=""></time>
<header>

<img src="" alt="">

<p></p>

<a class="btn" href="#">Read More</a>

</article>

<aside>
<img src="img/profilepic.jpg" alt="My profile picture">

<div class="sidebar-text">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis urna libero, blandit sit amet ante quis, varius volutpat magna. Donec porta metus nulla, non aliquam tellus congue sed. Aliquam sapien sapien, tincidunt aliquam sapien sed, faucibus ultricies diam. Integer mollis ullamcorper bibendum. Phasellus ornare, nunc at auctor venenatis, erat magna posuere magna, eu fringilla lacus massa quis neque. Sed risus risus, elementum vel congue vel, lobortis quis mi. Fusce sit amet sollicitudin dolor. Mauris vestibulum rhoncus finibus. In hac habitasse platea dictumst. Proin sit amet tempor mauris, imperdiet euismod libero. Etiam consequat porta molestie. Etiam sollicitudin orci in sem eleifend, commodo convallis sem vehicula. Phasellus porttitor dictum leo, nec accumsan augue bibendum sed. Aliquam dictum, orci ac finibus fringilla, leo massa accumsan dui, ut ornare dui mi a ligula. Integer mattis porta arcu in varius.
</p>
<p>
Donec quis est laoreet erat pharetra posuere. Nulla lobortis suscipit magna eu tincidunt. Proin venenatis leo id vehicula elementum. Curabitur eu vestibulum leo, vitae pharetra felis. In eleifend suscipit nisl mattis ornare. Donec odio enim, consectetur eu cursus at, fermentum nec erat. Nullam nec lectus ipsum. Duis a placerat ex. Sed felis lacus, porttitor eget pretium at, tincidunt luctus tortor. Ut malesuada massa non ante condimentum lacinia. Morbi aliquet nibh non elit interdum, non hendrerit libero efficitur. Phasellus mattis lobortis accumsan.
</p>

<section>
<h3 class="visuallyhidden">Social Links</h3>
<a class="social-link" href="https://twitter.com/udacity">
<img src="img/social-twitter.png" alt="Twitter">
</a>
<a class="social-link" href="https://www.instagram.com/udacity/">
<img src="img/social-instagram.png" alt="Instagram">
</a>
<a class="social-link" href="https://plus.google.com/+Udacity">
<img src="img/social-google.png" alt="Google Plus">
</a>
</section>
</div>
</aside>
</div>

<footer>
Made with &hearts; by Richard @ Udacity
</footer>

<script src="js/app.js"></script>
</body>
</html>