Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Voislav Stojkoski
BrainsterChallenges_VoislavStojkoski_FE-15
Commits
7ceba204
Commit
7ceba204
authored
1 year ago
by
Voislav Stojkoski
Browse files
Options
Download
Email Patches
Plain Diff
chalenge_02 folder added
parent
3669424b
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
cha- 2 cars/Cars/index.html
+248
-0
cha- 2 cars/Cars/index.html
cha- 2 cars/Cars/resources/css/img/picture1.jpg
+0
-0
cha- 2 cars/Cars/resources/css/img/picture1.jpg
cha- 2 cars/Cars/resources/css/img/picture2.jpg
+0
-0
cha- 2 cars/Cars/resources/css/img/picture2.jpg
cha- 2 cars/Cars/resources/css/img/picture3.jpg
+0
-0
cha- 2 cars/Cars/resources/css/img/picture3.jpg
cha- 2 cars/Cars/resources/css/style.css
+449
-0
cha- 2 cars/Cars/resources/css/style.css
with
697 additions
and
0 deletions
+697
-0
cha- 2 cars/Cars/index.html
0 → 100644
+
248
-
0
View file @
7ceba204
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<link
rel=
"stylesheet"
href=
"resources/css/style.css"
type=
"text/css"
/>
<link
href=
"https://fonts.googleapis.com/css?family=Lato:300,300i,400,700&display=swap"
rel=
"stylesheet"
/>
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity=
"sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin=
"anonymous"
referrerpolicy=
"no-referrer"
/>
<title>
Cars
</title>
</head>
<body>
<!-- Header -->
<header>
<nav>
<div
class=
"row"
>
<div
class=
"logo__box"
>
<a
href=
"#"
class=
"logo__text"
>
Landed
</a>
</div>
<ul
class=
"main__nav"
>
<li><a
href=
"#"
>
Home
</a></li>
<li><a
href=
"#"
>
Layouts
</a></li>
<li><a
href=
"#"
>
Elements
</a></li>
<li><a
href=
"#"
>
Sign Up
</a></li>
</ul>
</div>
</nav>
<div
class=
"primary__text-box"
>
<h1
class=
"primary__heading"
>
<span
class=
"primary__heading--main"
>
The future has landed
</span>
<span
class=
"primary__heading--sub"
>
And there are no hoverboards or flying cars.
</span>
<span
class=
"primary__heading--sub"
>
Just apps.Lots of mother flipping apps.
</span>
</h1>
</div>
<div
class=
"header__icon-box"
>
<i
class=
"fas fa-chevron-down header-down"
></i>
</div>
</header>
<main>
<!-- CARS -section -->
<section
class=
"blue__car"
>
<div
class=
"overlay"
>
<div
class=
"blue__car-wrapper"
>
<div
class=
"blue__car-content"
>
<div
class=
"col-1-of-blue"
>
<h2>
Lorem ipsum dolor sit amet amet amet uhuhu.
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At,
necessitatibus.
</p>
</div>
<div
class=
"col-2-of-blue"
>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quos, fugiat totam quam omnis aperiam tenetur, labore autem
doloremque dolore, praesentium maiores dolores. Laborum
dolorem itaque quibusdam, sapiente maiores ad dolorsapiente
maiores ad dolor.sapiente maiores ad dolor
</p>
</div>
<div
class=
"col-3-of-blue"
>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
quaerat veritatis beatae blanditiis est ut neque fuga
repellat, reprehenderit ad officiis maiores, ex voluptatibus
cumque quibusdam ab voluptatem odio quae sapiente maiores ad
dolor sapiente maiores ad dolor!
</p>
</div>
</div>
</div>
</div>
</section>
<section
class=
"red__car"
>
<div
class=
"overlay"
>
<div
class=
"red__car-wrapper"
>
<div
class=
"red__car-content"
>
<h2>
Lorem ipsum dolor sit amet amet amet uhuhu.
</h2>
<h3>
Lorem ipsum dolor,
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
quaerat veritatis beatae blanditiis est ut neque fuga repellat,
reprehenderit ad officiis maiores, ex voluptatibus cumque
quibusdam ab voluptatem odio quae sapiente maiores ad dolor
sapiente maiores ad dolor!
</p>
<buton
class=
"btn__outline"
>
Learn More
</buton>
</div>
</div>
</div>
</section>
<section
class=
"pink__car"
>
<div
class=
"overlay"
>
<div
class=
"pink__car-wrapper"
>
<div
class=
"pink__car-content"
>
<h2>
Lorem ipsum dolor sit amet amet amet uhuhu.
</h2>
<h3>
Lorem ipsum dolor,
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi
quaerat veritatis beatae blanditiis est ut neque fuga repellat,
reprehenderit ad officiis maiores, ex voluptatibus cumque
quibusdam ab voluptatem odio quae sapiente maiores ad dolor
sapiente maiores ad dolor!
</p>
<buton
class=
"btn__outline"
>
Learn More
</buton>
</div>
</div>
</div>
</section>
<!-- Icon section -->
<section
class=
"section__icons"
>
<div
class=
"secondary__heading"
>
<h2
class=
"text_center"
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</h2>
<h3
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error
laudantium temporibus commodi!
</h3>
</div>
<div
class=
"row"
>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborue.
</p>
</div>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborum.
</p>
</div>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborum
</p>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborue.
</p>
</div>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborum.
</p>
</div>
<div
class=
"col col-1-of-3"
>
<div
class=
"round-wrap"
>
<i
class=
"fas fa-chalkboard-teacher round__icon"
></i>
</div>
<h3
class=
"text_center"
>
Lorem ipsum dolor,
</h3>
<p
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo
earum laborum
</p>
</div>
</div>
<div
class=
"text_center"
>
<buton
class=
"btn__outline"
>
Learn More
</buton>
</div>
</section>
<section
class=
"section__started"
>
<div
class=
"tertiary__heading"
>
<h2
class=
"text_center"
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</h2>
<h3
class=
"text_center"
>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error
laudantium temporibus commodi!
</h3>
</div>
<form
class=
"text_center"
>
<input
type=
"email"
name=
"email"
id=
"email"
placeholder=
"Your Email Address"
required
/>
<input
type=
"submit"
id=
"submit"
value=
"Get Started"
/>
</form>
</section>
</main>
<footer>
<div
class=
"text_center"
>
<ul
class=
"social__icons--all"
>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
<li>
<a
href=
"facebook.com"
><i
class=
"fab fa-facebook"
></i></a>
</li>
</ul>
</div>
<p
class=
"text_center"
>
©
Untitled. All rights reserved
&
nbsp
&
nbsp|
&
nbsp
&
nbsp Design:
&
nbsp
<abbr
title=
"Hypertext Markup Language"
>
&
nbspHTML5 UP
</abbr>
</p>
</footer>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
cha- 2 cars/Cars/resources/css/img/picture1.jpg
0 → 100644
+
0
-
0
View file @
7ceba204
192 KB
This diff is collapsed.
Click to expand it.
cha- 2 cars/Cars/resources/css/img/picture2.jpg
0 → 100644
+
0
-
0
View file @
7ceba204
235 KB
This diff is collapsed.
Click to expand it.
cha- 2 cars/Cars/resources/css/img/picture3.jpg
0 → 100644
+
0
-
0
View file @
7ceba204
43.3 KB
This diff is collapsed.
Click to expand it.
cha- 2 cars/Cars/resources/css/style.css
0 → 100644
+
449
-
0
View file @
7ceba204
/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */
:root
{
--color-grey-light
:
rgba
(
255
,
255
,
255
,
0.5
);
--color-grey-dark
:
rgba
(
0
,
0
,
0
,
0.9
);
--color-white
:
#ffffff
;
--color-secondary
:
#e44c65
;
}
/*
darkblue - rgba(39, 40, 51, 1)
darkblue opacity (за дивовите со контент) - rgba(39, 40, 51, .85)
red - #e44c65
blue - rgb(93, 93, 238)
green - rgb(45, 212, 81)
lightwhite (позадинска боја за кружните иконки) - rgba(255, 255, 255, .1) */
*
{
box-sizing
:
border-box
;
}
body
{
margin
:
0
;
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
ul
,
ol
{
margin-top
:
0
;
}
html
{
font-size
:
62.5%
;
}
body
{
font-family
:
"Lato"
,
sans-serif
;
font-weight
:
300
;
color
:
var
(
--color-white
);
line-height
:
1.7
;
text-rendering
:
optimizeLegibility
;
background-color
:
rgba
(
39
,
40
,
51
,
1
);
}
/* ----------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ----------------------------------------------- */
.row
{
width
:
100%
;
margin
:
0
auto
;
zoom
:
1
;
overflow
:
hidden
;
}
.row
::after
,
.row
::before
{
content
:
""
;
display
:
table
;
}
.row
::after
{
clear
:
both
;
}
.col
{
display
:
block
;
float
:
left
;
margin
:
0px
auto
;
text-align
:
center
;
}
.text_center
{
text-align
:
center
;
}
.overlay
{
background-color
:
rgba
(
0
,
0
,
0
,
0.2
);
height
:
100%
;
}
/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */
header
{
position
:
relative
;
height
:
100vh
;
}
.logo__box
{
position
:
absolute
;
top
:
1.5rem
;
left
:
2rem
;
}
.logo__text
{
font-size
:
1.8rem
;
font-weight
:
500
;
text-decoration
:
none
;
color
:
var
(
--color-white
);
}
.main__nav
{
list-style
:
none
;
float
:
right
;
margin-top
:
1rem
;
}
.main__nav
li
{
display
:
inline-block
;
margin-right
:
2rem
;
font-size
:
1.8rem
;
font-weight
:
500
;
}
.main__nav
li
a
:link
,
.main__nav
li
a
:visited
{
padding
:
1rem
0
;
color
:
var
(
--color-white
);
text-decoration
:
none
;
border-bottom
:
2px
solid
transparent
;
}
.main__nav
li
a
:hover
,
.main__nav
li
a
:active
{
color
:
#dbdbdb
;
}
.main__nav
li
:last-child
{
padding
:
0.5rem
2.5rem
;
background-color
:
var
(
--color-secondary
);
border-radius
:
3px
;
}
.primary__text-box
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
}
/* ----------------------------------------------- */
/* HEADINGS */
/* ----------------------------------------------- */
.primary__heading
{
margin-bottom
:
2rem
;
word-spacing
:
4px
;
letter-spacing
:
1px
;
text-align
:
center
;
}
.primary__heading--main
{
font-size
:
3.5rem
;
font-weight
:
500
;
display
:
block
;
}
.primary__heading--sub
{
font-size
:
2rem
;
font-weight
:
300
;
display
:
block
;
}
.header__icon-box
{
position
:
absolute
;
bottom
:
1%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
}
.header-down
{
font-size
:
3rem
;
}
h2
{
margin-bottom
:
2rem
;
margin-top
:
2rem
;
word-spacing
:
4px
;
letter-spacing
:
1px
;
font-weight
:
300
;
font-size
:
3rem
;
display
:
block
;
}
h3
{
margin-bottom
:
2rem
;
word-spacing
:
3px
;
letter-spacing
:
1px
;
font-weight
:
300
;
font-size
:
2rem
;
display
:
block
;
}
/* ----------------------------------------------- */
/* PARAGRAPHS */
/* ----------------------------------------------- */
p
{
font-size
:
1.7rem
;
}
/* ----------------------------------------------- */
/* SECTION BLUE CAR*/
/* ----------------------------------------------- */
.blue__car
{
background-image
:
url(img/picture1.jpg)
;
}
.blue__car
,
.red__car
,
.pink__car
{
height
:
100vh
;
background-attachment
:
fixed
;
background-position
:
center
;
background-size
:
cover
;
position
:
relative
;
}
.blue__car-wrapper
{
background-color
:
var
(
--color-grey-dark
);
border-top
:
5px
solid
var
(
--color-secondary
);
position
:
absolute
;
bottom
:
0
;
left
:
0
;
right
:
0
;
}
.blue__car-content
{
width
:
124rem
;
margin
:
0
auto
;
padding
:
6rem
0
;
position
:
relative
;
}
.blue__car-content
div
:not
(
:last-child
)
{
margin-right
:
3%
;
}
.col-1-of-blue
{
width
:
31.33%
;
display
:
block
;
}
.col-2-of-blue
{
position
:
absolute
;
width
:
31.33%
;
display
:
block
;
top
:
55%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
}
.col-3-of-blue
{
position
:
absolute
;
width
:
31.33%
;
display
:
block
;
right
:
0
;
top
:
28%
;
}
/* ----------------------------------------------- */
/* SECTION RED CAR*/
/* ----------------------------------------------- */
.red__car
{
background-image
:
url(img/picture2.jpg)
;
}
.red__car-wrapper
{
background-color
:
var
(
--color-grey-dark
);
position
:
absolute
;
bottom
:
0
;
right
:
0
;
top
:
0
;
border-left
:
5px
solid
#5480f1
;
}
.red__car-content
,
.pink__car-content
{
width
:
33.33vw
;
padding
:
10rem
5rem
;
}
.btn__outline
{
border
:
1px
solid
var
(
--color-white
);
padding
:
0.8rem
2rem
;
margin-top
:
2rem
;
display
:
inline-block
;
font-size
:
1.8rem
;
cursor
:
pointer
;
}
.btn__outline
:hover
{
border
:
1px
solid
rgb
(
45
,
212
,
81
);
}
/* ----------------------------------------------- */
/* SECTION PINK CAR*/
/* ----------------------------------------------- */
.pink__car
{
background-image
:
url(img/picture3.jpg)
;
}
.pink__car-wrapper
{
background-color
:
var
(
--color-grey-dark
);
position
:
absolute
;
bottom
:
0
;
left
:
0
;
top
:
0
;
border-right
:
5px
solid
rgb
(
45
,
212
,
81
);
}
/* ----------------------------------------------- */
/* SECTION ICONS*/
/* ----------------------------------------------- */
.section__icons
{
padding
:
10rem
;
}
.secondary__heading
h3
::after
{
content
:
""
;
height
:
5px
;
background-color
:
var
(
--color-secondary
);
display
:
block
;
width
:
35rem
;
margin
:
5rem
auto
7rem
auto
;
}
.col-1-of-3
{
width
:
30%
;
}
.col-1-of-3
:not
(
:last-child
)
{
margin-right
:
5%
;
}
.round__icon
{
font-size
:
3.7rem
;
padding-bottom
:
3rem
;
transform
:
translateY
(
1.4rem
);
}
.section__icons
.row
{
margin-bottom
:
8rem
;
}
.round-wrap
{
border
:
1px
solid
transparent
;
border-radius
:
50%
;
width
:
10rem
;
height
:
10rem
;
padding
:
1.4rem
;
margin
:
3rem
auto
;
background-color
:
rgba
(
255
,
255
,
255
,
0.1
);
}
/* ----------------------------------------------- */
/* SECTION STARTED*/
/* ----------------------------------------------- */
.section__started
{
background-color
:
var
(
--color-secondary
);
padding
:
10rem
;
}
.tertiary__heading
h3
{
margin-bottom
:
5rem
;
}
input
[
type
=
"email"
]
{
padding
:
1.6rem
;
width
:
45%
;
background-color
:
var
(
--color-secondary
);
border
:
1px
solid
var
(
--color-grey-light
);
border-radius
:
5px
;
margin-right
:
1.5rem
;
font-family
:
"Lato"
;
font-weight
:
300
;
font-size
:
1.8rem
;
color
:
var
(
--color-grey-light
);
}
input
[
type
=
"submit"
]
{
padding
:
1.5rem
6rem
;
font-size
:
1.8rem
;
font-family
:
"Lato"
;
font-weight
:
400
;
color
:
var
(
--color-secondary
);
background-color
:
white
;
border
:
1px
solid
transparent
;
border-radius
:
5px
;
cursor
:
pointer
;
}
input
[
type
=
"submit"
]
:hover
{
color
:
#d47e8d
;
}
::placeholder
{
font-size
:
1.8rem
;
color
:
var
(
--color-grey-light
);
font-weight
:
300
;
font-family
:
"Lato"
;
}
/* ----------------------------------------------- */
/* SECTION FOOTER*/
/* ----------------------------------------------- */
footer
{
background-color
:
#272833
;
padding
:
10rem
;
}
.social__icons--all
{
margin-bottom
:
3rem
;
list-style
:
none
;
}
.social__icons--all
li
{
display
:
inline-block
;
}
.social__icons--all
li
:not
(
:last-child
)
{
margin-right
:
2rem
;
}
.social__icons--all
li
a
:link
,
.social__icons--all
li
a
:visited
{
padding
:
1rem
0
;
font-size
:
3.5rem
;
color
:
var
(
--color-white
);
text-decoration
:
none
;
}
.social__icons--all
li
a
:hover
,
.social__icons--all
li
a
:active
{
color
:
#3b5998
;
}
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment