Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@pateskinasy
pateskinasy committed Jul 18, 2019
1 parent e3ce63d commit bcc292c
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 86 deletions.
97 changes: 46 additions & 51 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@

* {
margin: 0;
padding: 0;
}

body {
font-family: 'Special Elite', cursive;
font-weight: 400;
height: 100%;
width: 100%;
font-family: "Special Elite", cursive;
font-weight: 400;
height: 100%;
width: 100%;
}

li {
list-style: none;
list-style: none;
}

a {
Expand Down Expand Up @@ -70,7 +69,7 @@ button {
border-radius: 8px;
padding: 10px;
margin: 5px;
font-family: 'Lato', sans-serif;
font-family: "Lato", sans-serif;
letter-spacing: 1px;
font-weight: bold;
}
Expand All @@ -88,77 +87,73 @@ button {
}

.fab {
margin: 0 8px 0 0;
margin: 0 8px 0 0;
}

footer {
font-size: small;
font-size: small;
color: #fff;
background-color: #262626;
display: flex;
display: flex;
width: 100vw;
height: 3rem;
}

.footer-options {
width: 50vw;
display: flex;
justify-content: flex-start;
padding-inline-start: 20px;
align-items: center;

width: 50vw;
display: flex;
justify-content: flex-start;
padding-inline-start: 20px;
align-items: center;
}

.footer-link {
padding: 0 20px;
padding: 0 20px;
}

.footer-linktext {
color: #fff;
color: #fff;
}


footer span {
width: 50vw;
display: flex;
justify-content: flex-end;
padding: 0 20px;
align-items: center;

}
width: 50vw;
display: flex;
justify-content: flex-end;
padding: 0 20px;
align-items: center;
}

@media (max-width: 600px) {

@media (max-width: 600px) {
.quotable-square {
width: 80vw;
height: 80vw;
}

.content {
font-size: 4vw;
font-size: 4vw;
}

.author {
font-size: 3.2vw;
font-size: 3.2vw;
}

footer {
flex-wrap: wrap;
height: 4rem;
}

footer {
flex-wrap: wrap;
height: 4rem;
}

.footer-options {
width: 100vw;
flex-direction: row;
justify-content: center;

.footer-options {
width: 100vw;
flex-direction: row;
justify-content: center;
padding-inline-start: 0;
align-items: center;
}
footer span {
width: 100vw;
flex-direction: column;
text-align: center;
align-self: flex-start;
}
}
}

footer span {
width: 100vw;
flex-direction: column;
text-align: center;
align-self: flex-start;
}
}
76 changes: 41 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,53 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Greta Thunberg quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Greta Thunberg quotes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>

<body>
<div id="container" class="container">
<header>
</header>
<main>
<div id="quote-box">
<div class="quotable-square">
<div class="content">
<div id="text">
</div>
<div id="author" class="author">
</div>
</div>
</div>
<div class="actions">
<button id="new-quote" class="new-quote" >Get New Quote</button>
<button class="tweet-quote">
<a id="tweet-quote" href="twitter.com/intent/tweet" target="_blank" ><i class="fab fa-twitter"></i>Tweet Quote</a>
</button>
</div>
</div>
</main>
</div>
<footer>
<ul class="footer-options">
<li class="footer-link"><a href="https://www.morsewall.com/support/" class="footer-linktext">Support me</a></li>
<li class="footer-link"><a href="https://www.morsewall.com/legal/" class="footer-linktext">Legal</a></li>
<li class="footer-link"><a href="https://www.morsewall.com/contact/" class="footer-linktext">Contact</a></li>
</ul>
<span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
</footer>
<div id="container" class="container">
<header>
</header>
<main>
<div id="quote-box">
<div class="quotable-square">
<div class="content">
<div id="text">
</div>
<div id="author" class="author">
</div>
</div>
</div>
<div class="actions">
<button id="new-quote" class="new-quote">Get New Quote</button>
<button class="tweet-quote">
<a id="tweet-quote" href="twitter.com/intent/tweet" target="_blank"><i
class="fab fa-twitter"></i>Tweet Quote</a>
</button>
</div>
</div>
</main>
</div>
<footer>
<ul class="footer-options">
<li class="footer-link"><a href="https://www.morsewall.com/support/" class="footer-linktext">Support me</a>
</li>
<li class="footer-link"><a href="https://www.morsewall.com/legal/" class="footer-linktext">Legal</a></li>
<li class="footer-link"><a href="https://www.morsewall.com/contact/" class="footer-linktext">Contact</a>
</li>
</ul>
<span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
</footer>
<script src="js/script.js"></script>
<!-- The below JS is for the widget by makerwidget -->
<script src="js/makerwidget.js"></script>
</body>
</html>

</html>

0 comments on commit bcc292c

Please sign in to comment.