Skip to content

Commit ac0ffad

Browse files
evans646evans646
authored
Add files via upload
0 parents  commit ac0ffad

File tree

5 files changed

+323
-0
lines changed

5 files changed

+323
-0
lines changed

‎Css/main.scss

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
$colors: ( primary: #005DFF, primary-light: lighten(#005DFF, 40%), primary-dark: darken(#005DFF, 40%), accent: #FFF6BB);
2+
$padding: 15px;
3+
$borders: 15px;
4+
@function color($color-name) {
5+
@return map-get($colors, $color-name)
6+
}
7+
8+
$desktop: 840px;
9+
@mixin desktop {
10+
@media (min-width: #{$desktop}) {
11+
@content;
12+
}
13+
}
14+
15+
body,
16+
html {
17+
height: 100%;
18+
}
19+
20+
body {
21+
font-family: 'Montserrat';
22+
margin: 0;
23+
#bg {
24+
clip-path: polygon(100% 0, 100% 82%, 45% 100%, 0 100%, 0 0);
25+
background-color: color(primary);
26+
width: 100%;
27+
height: 100%;
28+
position: absolute;
29+
z-index: -1;
30+
@include desktop {
31+
clip-path: polygon(0 0, 75% 0, 55% 100%, 0% 100%);
32+
}
33+
}
34+
header a {
35+
color: #fff;
36+
text-decoration: none;
37+
padding: $padding;
38+
display: block;
39+
text-transform: uppercase;
40+
}
41+
}
42+
43+
main {
44+
@include desktop {
45+
display: grid;
46+
grid-template-columns: 50% auto;
47+
grid-template-areas: "primary card";
48+
}
49+
section#card {
50+
background: #fff;
51+
padding: 20px;
52+
margin: 1em auto;
53+
border-radius: $borders;
54+
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
55+
width: 80%;
56+
@include desktop {
57+
grid-area: card;
58+
height: fit-content;
59+
align-self: center;
60+
margin: 1em;
61+
}
62+
ul {
63+
list-style-type: none;
64+
margin: 0;
65+
padding: 0;
66+
li {
67+
margin-bottom: 10px;
68+
span {
69+
position: absolute;
70+
width: 30px;
71+
height: 30px;
72+
background-color: color(primary-light);
73+
border-radius: 50%;
74+
margin-right: 10px;
75+
}
76+
strong {
77+
display: inline-block;
78+
margin-left: max(40px);
79+
margin-top: 10px;
80+
}
81+
}
82+
}
83+
}
84+
section#primary {
85+
color: #fff;
86+
padding: $padding;
87+
text-align: center;
88+
@include desktop {
89+
grid-area: primary;
90+
text-align: left;
91+
margin: 4em 0 0 4em;
92+
}
93+
h1 {
94+
font-size: 3em;
95+
margin-top: 10px;
96+
text-transform: uppercase;
97+
@include desktop {
98+
width: 30%;
99+
font-size: 4em;
100+
line-height: .9em;
101+
}
102+
}
103+
p {
104+
font-size: 1.4em;
105+
}
106+
a {
107+
color: color(primary-dark);
108+
border-radius: $borders;
109+
text-decoration: none;
110+
text-transform: uppercase;
111+
font-weight: bold;
112+
background-color: color(accent);
113+
display: block;
114+
text-align: center;
115+
margin: 50px auto 0 auto;
116+
padding: $padding;
117+
@include desktop {
118+
display: inline-block;
119+
padding: $padding $padding * 4;
120+
}
121+
}
122+
}
123+
}

‎Css/style.css

+145
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Css/style.css.map

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Sass-superpower-css-project

‎index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" type="text/css" href="Css/style.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
9+
<title>New</title>
10+
</head>
11+
12+
<body>
13+
<div id="bg"></div>
14+
15+
<header>
16+
<a href="#">ZoomZoom</a>
17+
</header>
18+
19+
<main>
20+
<section id="card">
21+
<ul>
22+
<li>
23+
<span></span>
24+
<strong>How may I help you, bro?</strong>
25+
</li>
26+
<li>
27+
<span></span>
28+
<strong>I don't know if I can be helped</strong>
29+
</li>
30+
<li>
31+
<span></span>
32+
<strong>That's deep. Let me help.</strong>
33+
</li>
34+
</ul>
35+
</section>
36+
<section id="primary">
37+
<h1>Your Personal Assistant</h1>
38+
<p>Get help with your daily life stuff.</p>
39+
40+
<a href="#">Get help already</a>
41+
</section>
42+
</main>
43+
</body>
44+
45+
</html>

0 commit comments

Comments
 (0)