Commit 7ceba204 authored by Voislav Stojkoski's avatar Voislav Stojkoski
Browse files

chalenge_02 folder added

parent 3669424b
Showing with 697 additions and 0 deletions
+697 -0
<!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">
&copy; 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
cha- 2  cars/Cars/resources/css/img/picture1.jpg

192 KB

cha- 2  cars/Cars/resources/css/img/picture2.jpg

235 KB

cha- 2  cars/Cars/resources/css/img/picture3.jpg

43.3 KB

/* ----------------------------------------------- */
/* 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;
}
Supports Markdown
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