Skip to content
GitLab
Commit 09a9945a authored by Mihajlo-991's avatar Mihajlo-991
Browse files

added Challenge-02

parent 44800fb3
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 404 additions and 0 deletions
+404 -0
Challenge-02/Challenge 02 - CSS Intro - Specification.pdf 0 → 100644
+ 0
- 0
View file @ 09a9945a
File added
Challenge-02/challenge_02_colors.txt 0 → 100644
+ 6
- 0
View file @ 09a9945a
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)
Challenge-02/images/.DS_Store 0 → 100644
+ 0
- 0
View file @ 09a9945a
File added
Challenge-02/images/picture1.jpg 0 → 100644
+ 0
- 0
View file @ 09a9945a
Challenge-02/images/picture1.jpg

192 KB

Challenge-02/images/picture2.jpeg 0 → 100644
+ 0
- 0
View file @ 09a9945a
Challenge-02/images/picture2.jpeg

235 KB

Challenge-02/images/picture3.jpg 0 → 100644
+ 0
- 0
View file @ 09a9945a
Challenge-02/images/picture3.jpg

43.3 KB

Challenge-02/index.html 0 → 100644
+ 126
- 0
View file @ 09a9945a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/3a818acd01.js" crossorigin="anonymous"></script>
<title>Chalnge 02</title>
</head>
<body>
<header>
<div class="title">
<nav>
<ul>
<li><a href="#">Landed</a></li>
</ul>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Layouts</a></li>
<li><a href="#">Elements</a></li>
<li><a class="singup" href="#">Sing Up</a></li>
</ul>
</nav>
<div class="title-child">
<h1>The future has landed</h1>
<p>And there are no hoverboards or flying cars.</p>
<p>Just apps. Lots of mother flipping apps.</p>
</div>
<div class="fontAwsome">
<a href="#flexOne"><i class="fa-solid fa-chevron-down"></i></a>
</div>
</div>
</header>
<section id="flexOne">
<div class="flexOne">
<div class="item">
<h2 >Odio faucius ipsum integer consequat</h2>
<p>Nesetur vivit anica parvent nesetur vivint Lorem, ipsum dolor.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aperiam sint, molestias dicta alias nisi tempora aspernatur assumenda at delectus omnis voluptatibus aliquid expedita aut accusamus, mollitia pariatur nesciunt quaerat dignissimos laudantium porro fugit? Reiciendis eius nobis obcaecati, debitis nam error tempore.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aperiam sint, molestias dicta alias nisi tempora aspernatur assumenda at delectus omnis voluptatibus aliquid expedita aut accusamus, mollitia pariatur nesciunt quaerat dignissimos laudantium porro fugit? Reiciendis eius nobis obcaecati, debitis nam error tempore.</p>
</div>
</div>
</section>
<article>
<div class="articleOne">
<div class="textBox">
<h2>Interdum ament non magna agusanam</h2>
<p>Nun comodo ament visi comand magna ipsum dolor sit amet</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, maiores! Odit ipsa ab officiis rerum repellat a tempore distinctio? Repellat error fugit delectus, repudiandae aut laudantium? Obcaecati molestiae fugiat laboriosam qui sit, sint, cupiditate nostrum quidem minima minus ullam a.</p>
<a href="#articleTwo">Learn more</a>
</div>
</div>
<div id="articleTwo" class="articleTwo">
<div class="textBox">
<h2>Interdum ament non magna agusanam</h2>
<p>Nun comodo ament visi comand magna ipsum dolor sit amet</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, maiores! Odit ipsa ab officiis rerum repellat a tempore distinctio? Repellat error fugit delectus, repudiandae aut laudantium? Obcaecati molestiae fugiat laboriosam qui sit, sint, cupiditate nostrum quidem minima minus ullam a.</p>
<a href="#sectionTwo">Learn more</a>
</div>
</div>
</article>
<div id="sectionTwo" class="sectionTwo">
<div class="title-2">
<h2>Acusnam sed tempus adiscinitn blandit</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing cum voluptatum voluptas.</p>
</div>
<div class="flexTwo">
<div class="item">
<i class="fa-sharp fa-solid fa-chart-area"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="item">
<i class="fa-sharp fa-regular fa-comment"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="item">
<i class="fa-solid fa-flask"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="item">
<i class="fa-sharp fa-regular fa-paper-plane"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="item">
<i class="fa-regular fa-note-sticky"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="item">
<i class="fa-solid fa-lock"></i>
<h3>Ipsun sed comodo</h3>
<p>Nesetur vivit Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<a href="#form">Magna sad faugiat</a>
</div>
<form id="form" >
<h3>Magna faucibus lorem diam</h3>
<P>Ante metus faucibus sit amet consectetur adipisicing</P>
<input type="email" name="email" id="email" placeholder="Your Email Address">
<button type="submit">Get started</button>
</form>
<footer>
<a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://mk.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin-in"></i></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://www.github.com/" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.google.com/gmail/about/" target="_blank"><i class="fa-regular fa-envelope"></i></a>
<p><i class="fa-regular fa-copyright"></i>United. All Rights Reserved | Design:<span><a href="https://en.wikipedia.org/wiki/HTML5" target="_blank">HTML5UP</a></span></p>
</footer>
</body>
</html>
\ No newline at end of file
Challenge-02/screenshots _ video/.DS_Store 0 → 100644
+ 0
- 0
View file @ 09a9945a
File added
Challenge-02/screenshots _ video/screenshot.png 0 → 100644
+ 0
- 0
View file @ 09a9945a
Challenge-02/screenshots _ video/screenshot.png

2.79 MB

Challenge-02/screenshots _ video/video.mp4 0 → 100644
+ 0
- 0
View file @ 09a9945a
File added
Challenge-02/style.css 0 → 100644
+ 272
- 0
View file @ 09a9945a
* {
box-sizing: border-box;
}
body { font-family: sans-serif;
margin: 0;
}
img {
width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: white;
margin-top: 0;
}
nav {
display: flex;
background-color: rgba(39, 40, 51, 1);
justify-content: space-between;
}
nav ul {
margin-bottom: 0;
padding: 0 10px;
}
nav ul li {
padding: 10px;
display: inline-flex;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
}
.singup {
padding: 4px 12px;
border-radius: 3px;
background-color: #e44c65;
}
.title {
background-color: rgba(39, 40, 51, 1);
text-align: right;
height: 100vh;
position: relative;
}
.title-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title-child h1{
font-weight: lighter;
font-size: 50px
}
.title-child p{
font-size: 24px;
}
.fontAwsome {
position: absolute;
bottom: 5px;
left: 50%;
}
.fontAwsome a {
font-size: 30px;
text-decoration: none;
color: white;
}
section {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(./images/picture1.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.flexOne {
border-top: 3px solid #e44c65;
background-color: rgba(39, 40, 51, 0.85);
display: flex;
position: absolute;
bottom: -100vh;
justify-content: space-evenly;
}
.item {
padding: 150px 50px 50px 50px;
flex-basis: 33.33%;
}
.item h2 {
font-weight:normal;
line-height: 1.8;
font-size: 35px;
}
.item p {
line-height: 1.8;
font-size: 20px;
}
.articleOne {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(./images/picture2.jpeg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
/* display: flex;
justify-content: flex-end; */
}
.textBox {
padding: 170px 120px 150px 80px;
width: 35%;
/* flex-basis: 35%; */
border-left: 3px solid rgb(93, 93, 238);
background-color: rgba(39, 40, 51, 0.85);
position: absolute;
right: 0;
bottom: 0;
top:0;
}
.textBox h2 {
font-weight: lighter;
font-size: 35px;
line-height: 1.8;
text-align: justify;
}
.textBox p {
font-size: 20px;
line-height: 1.8;
text-align: justify;
padding-bottom: 30px;
}
.textBox a {
color: white;
text-decoration: none;
border: 1px solid white;
padding: 10px 12px;
border-radius: 2px;
}
.textBox a:hover{
border-color: lightseagreen;
}
.articleTwo {
height: 100vh;
background-image:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(./images/picture3.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
/* display: flex;
justify-content: flex-start; */
}
.articleTwo .textBox {
border-left: none;
border-right: 3px solid rgb(45, 212, 81);
position: absolute;
left: 0;
bottom: 0;
top: 0;
}
.title-2 {
padding: 80px;
background-color: rgba(39, 40, 51, 1);
text-align: center;
}
.title-2 h2{
font-size: 25px;
font-weight: lighter;
}
.title-2 p{
font-size: 20px;
}
.flexTwo {
background-color: rgba(39, 40, 51, 1);
padding: 0 80px 15px 80px;
display: flex;
flex-wrap: wrap;
}
.flexTwo .item {
padding: 80px;
text-align: center;
flex-basis: 33.33%;
}
.flexTwo .item:nth-child(2) {
border-top: 3px solid #e44c65;
}
.item i {
margin-bottom: 15px;
font-size: 30px;
padding: 20px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.flexTwo .item P {
font-size: 18px;
}
.sectionTwo {
position: relative;
text-align: center;
background-color: rgba(39, 40, 51, 1);
}
.sectionTwo a {
color: white;
text-decoration: none;
padding: 8px 12px;
border-radius: 3px;
border: 1px solid white;
background-color: rgba(39, 40, 51, 0.85);
position: absolute;
left: 50%;
bottom: 15px;
transform: translate(-50%, -50%);
}
form {
text-align: center;
padding: 50px;
background-color: #e44c65;
}
form input {
padding: 7px 100px 7px 5px;
color: white;
border: 1px solid rgba(255, 255, 255, 0.393);
border-radius: 3px;
outline: none;
background-color: transparent;
}
form input:focus{
border-color: rgba(119, 136, 153, 0.5) ;
}
form button {
border: none;
cursor: pointer;
padding: 8px 16px;
border-radius: 2px;
color: #e44c65;
background-color: white;
}
::placeholder {
color: white;
opacity: 0.393;
}
footer {
padding: 40px;
text-align: center;
background-color: rgba(39, 40, 51, 1);
}
footer a {
padding: 10px;
font-size: 28px;
color: white;
text-decoration: none;
}
footer p {
padding: 10px;
font-size: 14px;
}
footer p span a {
padding: 0;
font-size: 14px;
border-bottom: 1px dotted white;
}
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