gotov proekt

c9cfe937 · Teo Ackovski · 7246206e · c9cfe937 · c9cfe937 · c9cfe937
Commit c9cfe937 authored 1 year ago by Teo Ackovski
Hide whitespace changes
Inline Side-by-side

Showing

with 847 additions and 0 deletions
+847 -0
--- a/challange 05/_button.scss
+++ b/challange 05/_button.scss
+$blue: rgb(32, 174, 240);
+button {
+    background-color: $blue;
+    padding: 16px;
+    padding-left: 36px;
+    padding-right: 36px;
+    border: none;
+    border-radius: 3px;
+    color: white;
+    margin: 10px;
+    font-weight: bold;
+    cursor: pointer;
+        @include mobile-m-styles {
+                width: 40%;
+              
+            }
+}
\ No newline at end of file
--- a/challange 05/_mixins.scss
+++ b/challange 05/_mixins.scss
+
+
+// RESPONSIVE LAPTOP FIRST DESIGN MIXINS
+@mixin four-k-styles {
+  @media (max-width: 2560px) {
+    @content;
+  }
+}
+
+@mixin laptop-l-styles {
+  @media (max-width: 1440px) {
+    @content;
+  }
+}
+
+@mixin laptop-m-styles {
+  @media (max-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin tablet-styles {
+  @media (max-width: 768px) {
+    @content;
+  }
+}
+
+@mixin mobile-l-styles {
+  @media (max-width: 425px) {
+    @content;
+  }
+}
+
+@mixin mobile-m-styles {
+  @media (max-width: 375px) {
+    @content;
+  }
+}
+
+@mixin mobile-s-styles {
+  @media (max-width: 320px) {
+    @content;
+  }
+}
+
--- a/challange 05/_text.scss
+++ b/challange 05/_text.scss
+@import 'mixins';
+$blue: rgb(32, 174, 240);
+.some {
+    h2 {
+        font-size: 30px;
+    }
+
+    p {
+        font-size: 15px;   
+        width: 50%;  
+        margin-left: 25%;
+        @include mobile-m-styles {
+                width: 50%;
+                margin-left: 25%;
+                text-align: center;
+            }
+        @include tablet-styles {
+        text-align: center;
+        margin-left: 25%;
+        }
+    }
+
+    text-align: center;
+    padding-top: 120px;
+    padding-bottom: 30px;
+
+    hr {
+        margin-top: 80px;
+        width: 10%;
+        border: none;
+        color: $blue;
+        background-color: $blue;
+        height: 3px;
+        @include mobile-m-styles {
+                width: 40%;
+            }
+        @include tablet-styles {
+            width: 30%;
+        }
+    }
+
+                               
+}
\ No newline at end of file
--- a/challange 05/images/Icon_
+++ b/challange 05/images/Icon_
--- a/challange 05/images/balloon.jpg
+++ b/challange 05/images/balloon.jpg
--- a/challange 05/images/coast.jpg
+++ b/challange 05/images/coast.jpg
--- a/challange 05/images/hero.jpg
+++ b/challange 05/images/hero.jpg
--- a/challange 05/images/island.jpg
+++ b/challange 05/images/island.jpg
--- a/challange 05/images/mountain.jpg
+++ b/challange 05/images/mountain.jpg
--- a/challange 05/index.html
+++ b/challange 05/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/64087b922b.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div class="main">
+        <div class="tint">
+            <header><strong>Logo</strong></header>
+
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#news">Products</a></li>
+                <li><a href="#contact">About</a></li>
+                <li><a href="#about">Contacts</a></li>
+            </ul>
+
+            <div class="h1">
+                <h1>Responsive Template</h1>
+                <p>Learn flexbox easy.</p>
+                <button><b>I AM A BUTTON</b></button>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="some">
+        <h2>Some of our work</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum fugiat consectetur repellat
+            exercitationem recusandae, iure consequatur!Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, laudantium ea?</p>
+
+        <hr>
+    </div>
+
+    <div class="photos">
+        <div class="row">
+            <div class="long">
+                <img src="images/coast.jpg">
+            </div>
+            <div class="short">
+                <img src="images/island.jpg">
+            </div>
+        </div>
+        <div class="row">
+            <div class="short">
+                <img src="images/balloon.jpg">
+            </div>
+            <div class="long">
+                <img src="images/mountain.jpg">
+            </div>
+        </div>
+    </div>
+
+    <div class="grey">
+        <div class="some">
+            <h2>Features And Services</h2>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus sapiente impedit quam nemo vero amet
+                dolores.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos, doloremque?</p>
+
+            <hr>
+        </div>
+
+        <div class="icons">
+            <div class="icon">
+                <i class="fa-solid fa-camera-retro"></i>
+                <h4>Photography</h4>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum delectus eaque officia obcaecati
+                    veritatis facilis in.</p>
+            </div>
+            <div class="icon">
+                <i class="fa-solid fa-cubes"></i>
+                <h4>Photography</h4>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis error totam incidunt quasi
+                    laboriosam ipsa distinctio.</p>
+            </div>
+            <div class="icon">
+                <i class="fa-regular fa-newspaper"></i>
+                <h4>Photography</h4>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam incidunt inventore reprehenderit animi
+                    aliquid. Reiciendis, sequi.</p>
+            </div>
+        </div>
+
+        <div class="some">
+            <h2>Join Our Newsletter</h2>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus sapiente impedit quam nemo vero amet
+                dolores.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos, doloremque?</p>
+            <hr>
+        </div>
+
+                <div class="mail">
+                    <input type="text" placeholder="Email" size="50">
+                    <button>SUBSCRIBE NOW</button>
+                </div>
+
+    </div>
+
+    <div class="socials">
+                <div class="sicons">
+                    <i class="fa-brands fa-square-twitter"></i>
+                    <i class="fa-brands fa-square-facebook"></i>
+                    <i class="fa-brands fa-square-snapchat"></i>
+                    <i class="fa-brands fa-square-pinterest"></i>
+                    <i class="fa-brands fa-square-github"></i>
+                </div>
+                <div class="footer">
+                    <p>MADE BY A <bold>WEBSITE</bold>. IMAGES COURTESY TO <bold>ANOTHER WEBSITE</bold>
+                    </p>
+                    <p>PLEASE DONT GOOGLE THE CODE, TRY TO DO IT YOURSELF.</p>
+                </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/challange 05/style.css
+++ b/challange 05/style.css
+.some {
+  text-align: center;
+  padding-top: 120px;
+  padding-bottom: 30px;
+}
+.some h2 {
+  font-size: 30px;
+}
+.some p {
+  font-size: 15px;
+  width: 50%;
+  margin-left: 25%;
+}
+@media (max-width: 375px) {
+  .some p {
+    width: 50%;
+    margin-left: 25%;
+    text-align: center;
+  }
+}
+@media (max-width: 768px) {
+  .some p {
+    text-align: center;
+    margin-left: 25%;
+  }
+}
+.some hr {
+  margin-top: 80px;
+  width: 10%;
+  border: none;
+  color: rgb(32, 174, 240);
+  background-color: rgb(32, 174, 240);
+  height: 3px;
+}
+@media (max-width: 375px) {
+  .some hr {
+    width: 40%;
+  }
+}
+@media (max-width: 768px) {
+  .some hr {
+    width: 30%;
+  }
+}
+
+button {
+  background-color: rgb(32, 174, 240);
+  padding: 16px;
+  padding-left: 36px;
+  padding-right: 36px;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  margin: 10px;
+  font-weight: bold;
+  cursor: pointer;
+}
+@media (max-width: 375px) {
+  button {
+    width: 40%;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: rgb(63, 63, 63);
+}
+
+h1,
+h2,
+h3,
+p,
+ul {
+  margin-top: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+.main {
+  background-image: url(./images/hero.jpg);
+  background-size: cover;
+  position: relative;
+  height: 100vh;
+  color: white;
+}
+.main .tint {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(77, 71, 71, 0.6);
+}
+.main header {
+  line-height: 60px;
+  padding-left: 60px;
+  padding-top: 30px;
+  display: inline;
+  font-size: 20px;
+}
+@media (max-width: 375px) {
+  .main header {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+  }
+}
+.main ul {
+  line-height: 60px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding-right: 80px;
+  float: right;
+}
+@media (max-width: 375px) {
+  .main ul {
+    margin-left: 10%;
+  }
+}
+.main ul li {
+  display: inline;
+}
+.main ul li a {
+  text-decoration: none;
+  margin: 5px;
+  color: white;
+}
+.main .h1 {
+  text-align: center;
+  padding-top: 300px;
+  font-size: 25px;
+  padding-bottom: 400px;
+}
+@media (max-width: 375px) {
+  .main .h1 {
+    padding-top: 200px;
+  }
+}
+@media (max-width: 768px) {
+  .main .h1 {
+    padding-top: 170px;
+  }
+}
+
+.photos {
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 80px;
+  margin-bottom: 80px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.photos .row {
+  display: flex;
+  width: 100%;
+  height: 250px;
+}
+@media (max-width: 375px) {
+  .photos .row {
+    flex-direction: column;
+    width: initial;
+    height: initial;
+  }
+}
+@media (max-width: 768px) {
+  .photos .row {
+    flex-direction: column;
+    width: initial;
+    height: initial;
+  }
+}
+.photos .row div {
+  padding: 15px;
+}
+.photos .row div img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+@media (max-width: 375px) {
+  .photos .row div img {
+    width: 150px;
+    height: 450px;
+  }
+}
+@media (max-width: 768px) {
+  .photos .row div img {
+    width: 700px;
+    height: 450px;
+  }
+}
+.photos .row .long {
+  flex-basis: 40%;
+}
+.photos .row .short {
+  flex-basis: 60%;
+}
+
+.grey {
+  background-color: rgb(237, 238, 238);
+}
+
+.icons {
+  margin: 100px;
+  margin-top: 0;
+  display: flex;
+  gap: 80px;
+}
+@media (max-width: 375px) {
+  .icons {
+    padding-top: 100px;
+    flex-direction: column;
+    width: initial;
+    height: initial;
+    width: 40%;
+    margin-left: 30%;
+  }
+}
+@media (max-width: 768px) {
+  .icons {
+    padding-top: 100px;
+    flex-direction: column;
+    width: initial;
+    height: initial;
+    width: 40%;
+    margin-left: 30%;
+  }
+}
+.icons .icon {
+  width: 100%;
+  text-align: center;
+}
+.icons .icon i {
+  font-size: 36px;
+  color: rgb(32, 174, 240);
+}
+.icons .icon p,
+.icons .icon h4 {
+  color: rgb(63, 63, 63);
+}
+
+.mail {
+  text-align: center;
+  padding-bottom: 75px;
+}
+.mail button {
+  background-color: rgb(32, 174, 240);
+  padding: 16px;
+  padding-left: 36px;
+  padding-right: 36px;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  margin: 10px;
+  font-weight: bold;
+  cursor: pointer;
+}
+@media (max-width: 375px) {
+  .mail button {
+    width: 40%;
+  }
+}
+@media (max-width: 768px) {
+  .mail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 250px;
+    margin-right: 250px;
+    align-items: center;
+  }
+}
+@media (max-width: 375px) {
+  .mail {
+    margin: 0;
+  }
+}
+.mail input[type=text] {
+  margin: 10px;
+  height: 36px;
+}
+.mail input[placeholder] {
+  padding-left: 10px;
+}
+@media (max-width: 375px) {
+  .mail input[placeholder] {
+    width: 110px;
+  }
+}
+@media (max-width: 768px) {
+  .mail input[placeholder] {
+    width: 350px;
+    padding-right: 100px;
+  }
+}
+
+.socials {
+  background-color: rgb(65, 63, 63);
+  text-align: center;
+}
+.socials .sicons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+.socials .sicons i {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: white;
+}
+@media (max-width: 375px) {
+  .socials .sicons i {
+    font-size: 30px;
+  }
+}
+.socials .footer {
+  padding-bottom: 40px;
+}
+.socials .footer p {
+  font-size: 10px;
+  margin: 0;
+  color: rgb(177, 177, 177);
+}
+@media (max-width: 375px) {
+  .socials .footer p {
+    width: 70%;
+    margin-left: 15%;
+  }
+}
+.socials .footer p bold {
+  color: rgb(255, 255, 255);
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
--- a/challange 05/style.css.map
+++ b/challange 05/style.css.map
+{"version":3,"sources":["_text.scss","style.css","_mixins.scss","_button.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
--- a/challange 05/style.scss
+++ b/challange 05/style.scss
+@import 'text';
+@import 'button';
+@import 'mixins';
+$white: white;
+$blue: rgb(32, 174, 240);
+$grey: rgb(237, 238, 238);
+$dgrey:rgb(63, 63, 63);
+@mixin marg {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    color: $dgrey;
+}
+
+h1,
+h2,
+h3,
+p,
+ul {
+    margin-top: 0;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+.main {
+    background-image: url(./images/hero.jpg);
+    background-size: cover;
+    position: relative;
+    height: 100vh;
+    color: $white;
+
+    .tint {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(77, 71, 71, 0.6);
+    }
+header {
+    line-height: 60px;
+    padding-left: 60px;
+    padding-top: 30px;
+    display: inline;
+    font-size: 20px;
+        @include mobile-m-styles {
+               display: flex;
+               justify-content: center;
+               padding: 0;
+            }
+}
+
+    ul {
+        line-height: 60px;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        padding-right: 80px;
+        float: right;
+            @include mobile-m-styles {
+                 margin-left: 10%;
+                }
+
+        li {
+            display: inline;
+            a {
+                text-decoration: none;
+                margin: 5px;
+                color: $white;               
+            }
+        }
+    }
+.h1 {
+    text-align: center;
+    padding-top: 300px;
+    font-size: 25px;
+    padding-bottom: 400px;
+
+    @include mobile-m-styles {
+        padding-top: 200px;
+
+
+    }
+
+    @include tablet-styles {
+        padding-top: 170px;
+    }
+}
+}
+
+.photos {
+    width: 95%;
+    @include marg;
+    margin-top: 80px;
+    margin-bottom: 80px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .row {
+        display: flex;
+        width: 100%;
+        height: 250px;
+            @include mobile-m-styles {
+            flex-direction: column;
+            width: initial;
+            height: initial;
+                }
+                                @include tablet-styles {
+                                flex-direction: column;
+                                    width: initial;
+                                    height: initial;
+                                    
+                                }
+                div {
+                    padding: 15px;
+        
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+        
+                        @include mobile-m-styles {
+                            width: 150px;
+                            height: 450px;
+                            // padding-right: 100px;
+                        }
+        
+                        @include tablet-styles {
+                            width: 700px;
+                            height: 450px;
+                        }
+                    }
+                }
+
+        .long {
+            flex-basis: 40%;
+        }
+
+        .short {
+            flex-basis: 60%;
+        }
+    }
+}
+
+.grey {
+    background-color: $grey;
+}
+
+.icons {
+    margin: 100px;
+    margin-top: 0;
+    display: flex;
+    gap: 80px;
+
+    @include mobile-m-styles {
+        padding-top: 100px;
+        flex-direction: column;
+        width: initial;
+        height: initial;
+        width: 40%;
+        margin-left: 30%;
+    }
+
+    @include tablet-styles {
+        padding-top: 100px;
+        flex-direction: column;
+        width: initial;
+        height: initial;
+        width: 40%;
+        margin-left: 30%;
+    }
+
+    .icon {
+        width: 100%;
+        text-align: center;
+
+        i {
+            font-size: 36px;
+            color: $blue;
+        }
+
+        p,
+        h4 {
+            color: $dgrey;
+        }
+    }
+}
+.mail {
+    @import 'button';
+    text-align: center;
+    padding-bottom: 75px;
+    @include tablet-styles {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 250px;
+        margin-right: 250px;
+        align-items: center;
+    }
+                @include mobile-m-styles {
+                margin: 0;
+
+                }
+    
+
+    input[type='text'] {
+        margin: 10px;
+        height: 36px;
+       
+    }
+
+    input[placeholder] {
+        padding-left: 10px;
+            @include mobile-m-styles {
+                    width: 110px;
+
+                }
+                @include tablet-styles {
+                    width: 350px;
+                    padding-right: 100px;
+                }
+    }
+}
+.socials {
+    background-color: rgb(65, 63, 63);
+    text-align: center;
+
+    .sicons {
+
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+
+        i {
+            margin-top: 40px;
+            margin-bottom: 20px;
+            font-size: 24px;
+            color: white;
+                @include mobile-m-styles {
+                        font-size: 30px;
+                    }
+        }
+    }
+
+    .footer {
+        padding-bottom: 40px;
+
+        p {
+            font-size: 10px;
+            margin: 0;
+            color: rgb(177, 177, 177);
+                @include mobile-m-styles {
+                        width: 70%;
+                        margin-left: 15%;
+                    }
+
+            bold {
+                color: rgb(255, 255, 255);
+            }
+        }
+    }
+}
+