NAV+MIXIN+ PARAGRAPH
<!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 rel="stylesheet" href="myStyle05.css">
<title>Laboratory 05 - SCSS</title>
</head>
<body>
<main>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article class= "art1">
<h1>Main content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesettin
g industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an u
nknown 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.
It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, an
d more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsu
m.</p>
</article>
<article class= "art2">
<h1>Second content</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random te
xt. It has roots in a piece of classical
Latin literature from 45 BC, making it over 2000 years old. Ri
chard McClintock, a Latin professor at
HampdenSydney College in Virginia, looked up one of the more obscure Latin words, con
sectetur, from a
Lorem Ipsum passage, and going through the cites of the word i
n classical literature, discovered the
undoubtable source. Lorem Ipsum comes from sections 1.10.32 an
d 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in
45 BC. This book is a treatise on the
theory of ethics, very popular during the Renaissance. The fir
st line of Lorem Ipsum, "Lorem ipsum dolor
sit amet..", comes from a line in section 1.10.32.</p>
</article>
</main>
<footer>
<p>© Technical University of Cluj-Napoca 2019</p>
</footer>
</body>
</html>
----SCSS----------------------------------------------
/* Task 02 */
/* Theme colors */
$primary-color: #0074d9;
$secondary-color: #7fdbff;
$footer-color: #001f3f;
/* Font import */
@import url("
https://fonts.googleapis.com/css?family=Nunito&display=swap");
/*declarare mixin*/
$large-screen: 1000px;
@mixin large-screen {
@media (min-width: #{$large-screen}) {
@content;
}
}
/*-----------------------------------------*/
body {
font-family: "Nunito", "Arial", sans-serif;
color: rgb(255, 255, 255);
background-color: $primary-color;
.art1{
background-color: rgb(59, 59, 5)
}
.art2{
background-color: rgb(12, 90, 42)
}
/*dimensiuni mai mari de 1000px au loc schimbari in main */
main {
@include large-screen() {
display: grid; /*nav si acticle */
grid-template-columns: 2fr 2fr 1fr;
article {
padding: 0px 10px;
}
}
}
nav {
/* position:fixed;
bottom: 0;
width: 100%;*/
order:3;
background-color: $secondary-color;
padding: 5px 0;
text-align: center;
}
h1 {
text-align: center;
}
li {
display: inline; /*dimensiuni mai mici de 1000px */
list-style-type: none;
/*dimensiuni mai mari de 1000px */
@include large-screen() {
display: block;
padding: 10px 0px;
position: relative;
left: -20px;
}
/*-------------------------------------- */
a {
color: white;
font-size: 2em;
text-decoration: none;
padding: 0px 10px;
&:hover {
background-color: $primary-color;
border-radius: 5px;
}
}
}
footer {
background-color: $footer-color;
text-align: center;
padding: 5px 0;
}
}
