Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@bayan-almasri10
bayan-almasri10 authored Jan 1, 2024
1 parent 8ff31ac commit 4e91033
Show file tree
Hide file tree
Showing 11 changed files with 115 additions and 49 deletions.
69 changes: 56 additions & 13 deletions css/slicez.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,8 +466,8 @@ header .mega-menu .links li a i{
.services .container{
padding-top: var(--main-padding-bottom);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
gap: 50px;
grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
gap: 40px;
}
.services .main-title{
color: var(--section-background);
Expand All @@ -482,19 +482,49 @@ header .mega-menu .links li a i{
letter-spacing: 0.8;
}
.services p{
font-size: 20px;
font-size: 22px;
color: var(--section-background);
text-align: center;
margin: 0px 40px;
padding: 30px 30px;
}
@media (max-width:767px){
.services .container{
padding-top: 40px;
}
.services h4{
font-size: 30px;
font-weight: 600;
}
.services p{
font-size: 22px;
color: var(--section-background);
text-align: center;
margin: 10px 30px;
padding:0px;
}
}
.services .para{
font-size: 17px;
color: var(--section-background);
text-align: left;
margin: 0px 40px;
padding: 20px 10px;
}

.services .box{
background-image: url(../imgs/mainBackground.png);
background-size:cover;
width: 300px;
background-size:250px 500px;
overflow: hidden;
width: 250px;
transition: var(--main-transition);
position: relative;
height: 500px;
height:500px;
}
@media (max-width:767px){
.services .box{
margin: auto;
}
}
.services .box .info h2{
z-index: -1;
Expand All @@ -503,9 +533,10 @@ header .mega-menu .links li a i{
color:var(--section-background);
margin-top: 80%;
display: flex;
font-size: 25px;
align-items: center;
justify-content: center;
text-align: center;
text-align: left;
font-weight: 600;
letter-spacing: 0.8;
}
Expand Down Expand Up @@ -561,9 +592,11 @@ header .mega-menu .links li a i{
.services .video:hover{
background-image: url(../imgs/video.png);
}
.services .digitalMarkitin{
background-image: url(../imgs/digitalMarkiting.png);
transition: var(--main-transition);
.services .digitalMarketing:hover{
background-image: url(../imgs/digitalMarketing.png);
}
.services .interior:hover{
background-image: url(../imgs/interior.png);
}
@media (max-width:767px){
.services .box,
Expand Down Expand Up @@ -611,9 +644,13 @@ header .mega-menu .links li a i{
.services .video{
background-image: url(../imgs/video.png);
}
.services .digitalMarkiting{
background-image: url(../imgs/digitalMarkiting.png);
.services .digitalMarketing{
background-image: url(../imgs/digitalMarketing.png);
}
.services .interior{
background-image: url(../imgs/interior.png);
}

}
.services .box > i{
margin: 30px auto 15px;
Expand Down Expand Up @@ -1181,12 +1218,18 @@ header .mega-menu .links li a i{
display: flex;
}
.footer .box .social li{
margin-left: 8px;
margin-left: 16px;
}
.footer .box .social li .ico{
width: 30px;
height: 30px;
}
.footer .box .social li .linkedin{
margin-top: 4px;
width: 25px;
height: 25px;
}
linkedin
.footer .box .social li a{
background-color:var(--section-background) ;
color:white;
Expand Down
Binary file added imgs/digitalMarketing.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-28.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-29.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-30.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-31.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-32.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-33.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/f-34.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/linkedinIcon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 59 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,23 @@
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/slicez.css">
<link rel="icon" href="./imgs/SZ-07.png">

<link rel="preload" as="image" href="./imgs/adCreactive.png">
<link rel="preload" as="image" href="./imgs/brandIdentity.png">
<link rel="preload" as="image" href="./imgs/concept.png">
<link rel="preload" as="image" href="./imgs/digitalMarkiting.png">
<link rel="preload" as="image" href="./imgs/eBook.png">
<link rel="preload" as="image" href="./imgs/email.png">
<link rel="preload" as="image" href="./imgs/motionDesign.png">
<link rel="preload" as="image" href="./imgs/illustration.png">
<link rel="preload" as="image" href="./imgs/presentation.png">
<link rel="preload" as="image" href="./imgs/webDesign.png">
<link rel="preload" as="image" href="./imgs/video.png">
<link rel="preload" as="image" href="./imgs/socialMedia.png">
<link rel="preload" as="image" href="./imgs/packaging.png">
<link rel="preload" as="image" href="./imgs/printDesign.png">
<link rel="preload" as="image" href="./imgs/interior.png">

<!-- font Awesome -->
<link rel="stylesheet" href="./css/all.min.css">
<!-- google font poppins -->
Expand Down Expand Up @@ -121,90 +138,96 @@ <h3 class="header">About US...</h3>
<div class="services" id="services">
<h2 class="main-title">Services</h2>
<h4>You Can Select The Service That You Need Here.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, fugiat? Iusto distinctio quam laborum laboriosam sed fuga illo quasi. Sint assumenda veniam libero dolore sapiente odio. Praesentium, nulla omnis? Officia!</p>
<p>We are keen to provide a variety of services to suit your requirements and we strive to provide the best design experience so that we can be part of your success</p>
<div class="container">
<div class="adCreactive box">
<div class="info">
<h2>Ad Creative</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Ad<br>Creative</h2>
<p class="para">Design and content creation for effective advertising campaigns across various platforms.</p>
</div>
</div>
<div class="socialMedia box">
<div class="info">
<h2>Social Media Creative</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Social Media<br>Creative</h2>
<p class="para">Crafting visually appealing and engaging content tailored for social media platforms.</p>
</div>
</div>
<div class="email box">
<div class="info">
<h2>Email Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Email<br>Design</h2>
<p class="para"> Creating visually appealing and effective designs for email marketing campaigns.</p>
</div>
</div>
<div class="webDesign box">
<div class="info">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Web<br>Design</h2>
<p class="para">Designing and structuring websites for optimal user experience and visual appeal.</p>
</div>
</div>
<div class="presentation box">
<div class="info">
<h2>Presentation Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Presentation<br>Design</h2>
<p class="para">Crafting visually compelling presentations for effective communication.</p>
</div>
</div>
<div class="packaging box">
<div class="info">
<h2>Packaging<br>Merch Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="para">Designing packaging for products with a focus on aesthetics and brand representation.</p>
</div>
</div>
<div class="eBook box">
<div class="info">
<h2>eBook Digital<br>Report Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>eBook Digital<br>Report<br>Design</h2>
<p class="para">Designing visually appealing digital reports and eBooks for effective communication of information.</p>
</div>
</div>
<div class="printDesign box">
<div class="info">
<h2>Print Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Print<br>Design</h2>
<p class="para">Creating designs for print materials such as brochures, flyers, and posters.</p>
</div>
</div>
<div class="motionDesign box">
<div class="info">
<h2>Motion Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Motion<br>Design</h2>
<p class="para"> Integrating animation and visual effects to enhance digital content.</p>
</div>
</div>
<div class="illustration box">
<div class="info">
<h2>Illustration<br>Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="para">Creating unique and customized illustrations for various purposes.</p>
</div>
</div>
<div class="brandIdentity box">
<div class="info">
<h2>Brand Identity Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h2>Brand<br>Identity<br>Design</h2>
<p class="para">Developing a cohesive visual identity that represents and distinguishes a brand.</p>
</div>
</div>
<div class="concept box">
<div class="info">
<h2>Concept<br>Creation</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="para"> Generating creative and original ideas for various design and marketing purposes.</p>
</div>
</div>
<div class="video box">
<div class="info">
<h2>Video<br>Production</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="info">
<h2>Video<br>Production</h2>
<p class="para">Planning, shooting, and editing videos for promotional or informational purposes.</p>
</div>
</div>
<div class="digitalMarkiting box">
<div class="digitalMarketing box">
<div class="info">
<h2>Digital<br>Marketing<br> Consulting</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="para">Strategizing and implementing online marketing campaigns to reach target audiences.</p>
</div>
</div>
<div class="interior box">
<div class="info">
<h2>Interior<br>Design</h2>
<p class="para"> Providing expert advice and guidance on design and marketing strategies for business success.</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -334,7 +357,7 @@ <h2 class="main-title">FeedBacks</h2>
<div class="sliderF">
<div class="slideF" id="slide1">
<div class="box">
<img src="./imgs/p5f.jpg" alt="">
<img src="./imgs/f-32.png" alt="">
<h3>eva</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -347,7 +370,7 @@ <h3>eva</h3>
</div>
<div class="slideF" id="slide2">
<div class="box">
<img src="./imgs/p1f.jpg" alt="">
<img src="./imgs/f-34.png" alt="">
<h3>Didi Center</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -360,7 +383,7 @@ <h3>Didi Center</h3>
</div>
<div class="slideF" id="slide3">
<div class="box">
<img src="./imgs/p2f.jpg" alt="">
<img src="./imgs/f-30.png" alt="">
<h3>Wherever Travel</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -373,7 +396,7 @@ <h3>Wherever Travel</h3>
</div>
<div class="slideF" id="slide4">
<div class="box">
<img src="./imgs/p6f.jpg" alt="">
<img src="./imgs/f-31.png" alt="">
<h3>Belkharroubi</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -386,7 +409,7 @@ <h3>Belkharroubi</h3>
</div>
<div class="slideF" id="slide5">
<div class="box">
<img src="./imgs/p3f.jpg" alt="">
<img src="./imgs/f-33.png" alt="">
<h3>Souf Delivery</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -399,7 +422,7 @@ <h3>Souf Delivery</h3>
</div>
<div class="slideF" id="slide6">
<div class="box">
<img src="./imgs/p4f.jpg" alt="">
<img src="./imgs/f-29.png" alt="">
<h3>Quiquo food </h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand All @@ -412,7 +435,7 @@ <h3>Quiquo food </h3>
</div>
<div class="slideF" id="slide7">
<div class="box">
<img src="./imgs/p7f.jpg" alt="">
<img src="./imgs/f-28.png" alt="">
<h3>Mazaj food</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
Expand Down Expand Up @@ -471,7 +494,7 @@ <h3>Mazaj food</h3>
</li>
<li>
<a href="https://www.linkedin.com/company/slicez/?viewAsMember=true" target="_blank">
<i class="fa-brands fa-linkedin ico"></i>
<img class="ico linkedin" src="./imgs/linkedinIcon.png">
</a>
</li>
</ul>
Expand Down

0 comments on commit 4e91033

Please sign in to comment.