Skip to content
Snippets Groups Projects
Commit ba4328da authored by AB0410's avatar AB0410
Browse files

wv9 done

parent 88a16ad2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
WV9/colors.css 0 → 100644
+ 1
− 0
View file @ ba4328da
/*# sourceMappingURL=colors.css.map */
\ No newline at end of file
WV9/colors.css.map 0 → 100644
+ 1
− 0
View file @ ba4328da
{"version":3,"sources":[],"names":[],"mappings":"","file":"colors.css"}
\ No newline at end of file
WV9/colors.scss 0 → 100644
+ 5
− 0
View file @ ba4328da
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
$link_1: #FFFF;
\ No newline at end of file
WV9/index.html 0 → 100644
+ 58
− 0
View file @ ba4328da
<!DOCTYPE html>
<html>
<head>
<title>SASS exercise</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Roboto:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<!-- add some styling -->
<h1>This is a Heading</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</article>
<article>
<h2>Article</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
</article>
<article>
<img src="https://freesvg.org/img/icecream-2221064.png" alt="Ice_cream">
</article>
<article>
<h2>Article</h2>
<p>Tt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</article>
</main>
<footer>
<p>Contact us!</p>
<ul>
<li><a href="#">Footer1</a></li>
<li><a href="#">Footer2</a></li>
<li><a href="#">Footer3</a></li>
</ul>
</footer>
</body>
</html>
WV9/main.css 0 → 100644
+ 77
− 0
View file @ ba4328da
.footer, footer {
display: grid;
justify-content: center;
text-decoration: none;
background-color: #a2b9bc;
padding: 20px 0px;
}
.footer p, footer p {
text-align: center;
}
.footer ul, footer ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
list-style: none;
padding: 0;
-moz-column-gap: 20px;
column-gap: 20px;
}
.footer li, footer li {
color: white;
text-decoration: none;
}
.footer a, footer a {
text-decoration: none;
color: white;
}
body {
font-family: "Open Sans", "Roboto", sans-serif;
background-color: #b2ad7f;
margin: 0;
padding: 0;
}
header h1 {
text-align: center;
font-size: 50px;
}
header ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
list-style: none;
padding: 0;
}
header li {
color: #878f99;
}
header a {
text-decoration: none;
color: white;
font-size: 40px;
}
main {
display: grid;
justify-content: center;
margin: 40px 0px;
}
main article {
font-size: 30px;
padding: 20px;
max-width: 900px;
text-align: center;
margin: 20px 0px;
}
main article h2 {
font-size: 40px;
}
main article p {
font-size: 20px;
}
main img {
scale: 90%;
margin: 0;
}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
WV9/main.css.map 0 → 100644
+ 1
− 0
View file @ ba4328da
{"version":3,"sources":["typography.scss","colors.scss","main.css","main.scss"],"names":[],"mappings":"AAwBA;EACI,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBC5BQ;ED6BR,iBAAA;AEvBJ;AFwBI;EACI,kBAAA;AEtBR;AFwBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,qBAAA;OAAA,gBAAA;AEtBR;AFwBI;EACI,YCtCC;EDuCD,qBAAA;AEtBR;AFwBI;EACI,qBAAA;EACA,YC3CC;ACqBT;;ACtBA;EACI,8CHFK;EGGL,yBFJQ;EEKR,SAAA;EACA,UAAA;ADyBJ;;ACrBI;EACI,kBAAA;EACA,eHVG;AEkCX;ACtBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;ADwBR;ACtBI;EACI,cFrBI;AC6CZ;ACtBI;EACI,qBAAA;EACA,YFvBC;EEwBD,eHxBI;AEgDZ;;ACpBA;EACI,aAAA;EACA,uBAAA;EACA,gBAAA;ADuBJ;ACtBI;EHzBA,eANO;EAOP,aAAA;EACA,gBAAA;EACA,kBAAA;EACA,gBAAA;AEkDJ;AFjDI;EACI,eAbI;AEgEZ;AFjDI;EACI,eAdA;AEiER;AChCI;EACI,UAAA;EACA,SAAA;ADkCR","file":"main.css"}
\ No newline at end of file
WV9/main.scss 0 → 100644
+ 48
− 0
View file @ ba4328da
@import "colors.scss";
@import "typography.scss";
body{
font-family: $myFont;
background-color: $primary_2;
margin: 0;
padding: 0;
}
header{
h1{
text-align: center;
font-size: $fontSize;
}
ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
list-style: none;
padding: 0;
}
li{
color: $primary_3;
}
a{
text-decoration: none;
color: $link_1;
font-size: $hFontSize;
}
}
main{
display: grid;
justify-content: center;
margin: 40px 0px;
article{
@include articleContent;
}
img{
scale: 90%;
margin: 0
}
}
footer{
@extend .footer;
}
\ No newline at end of file
WV9/typography.css 0 → 100644
+ 27
− 0
View file @ ba4328da
.footer {
display: grid;
justify-content: center;
text-decoration: none;
background-color: #a2b9bc;
padding: 20px 0px;
}
.footer p {
text-align: center;
}
.footer ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
list-style: none;
padding: 0;
-moz-column-gap: 20px;
column-gap: 20px;
}
.footer li {
color: white;
text-decoration: none;
}
.footer a {
text-decoration: none;
color: white;
}/*# sourceMappingURL=typography.css.map */
\ No newline at end of file
WV9/typography.css.map 0 → 100644
+ 1
− 0
View file @ ba4328da
{"version":3,"sources":["typography.scss","colors.scss","typography.css"],"names":[],"mappings":"AAwBA;EACI,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,yBC5BQ;ED6BR,iBAAA;AEvBJ;AFwBI;EACI,kBAAA;AEtBR;AFwBI;EACI,aAAA;EACA,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,qBAAA;OAAA,gBAAA;AEtBR;AFwBI;EACI,YCtCC;EDuCD,qBAAA;AEtBR;AFwBI;EACI,qBAAA;EACA,YC3CC;ACqBT","file":"typography.css"}
\ No newline at end of file
WV9/typography.scss 0 → 100644
+ 50
− 0
View file @ ba4328da
@import "colors.scss";
$myFont: 'Open Sans', 'Roboto',sans-serif;
$fontSize: 50px;
$hFontSize: 40px;
$articleH: 30px;
$pSize: 20px;
// article properties
@mixin articleContent {
font-size: $articleH;
padding: 20px;
max-width: 900px;
text-align: center;
margin: 20px 0px;
h2{
font-size: $hFontSize;
}
p{
font-size: $pSize;
}
}
.footer{
display: grid;
justify-content: center;
text-decoration: none;
background-color: $primary_1;
padding: 20px 0px;
p{
text-align: center;
}
ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
list-style: none;
padding: 0;
column-gap: 20px;
}
li{
color: $link_1;
text-decoration: none;
}
a{
text-decoration: none;
color: $link_1;
}
}
\ No newline at end of file
index.html
+ 5
− 0
View file @ ba4328da
...@@ -37,6 +37,11 @@ ...@@ -37,6 +37,11 @@
<section style="margin-top: 2rem;"> <section style="margin-top: 2rem;">
<a style="text-decoration: none;" href="WV8/index.html">WV8</a> <a style="text-decoration: none;" href="WV8/index.html">WV8</a>
</section> </section>
<section style="margin-top: 2rem;">
<a style="text-decoration: none;" href="WV9/index.html">WV9</a>
</section>
</article> </article>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment