Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Levent #9

Merged
merged 6 commits into from
Aug 9, 2024
Merged

Levent #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
384bfa1
index.html created
leventkoybasi Aug 9, 2024
b4609d1
mobile css created
leventkoybasi Aug 9, 2024
4dca1f8
css mobile added
leventkoybasi Aug 9, 2024
209c15f
tablet css created
leventkoybasi Aug 9, 2024
5b4d8ff
Completed responsive design for section 4
leventkoybasi Aug 9, 2024
1e6f07c
Merge branch 'main' into levent
leventkoybasi Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/img/image-4-45678.jpg
View file
Open in desktop
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 assets/img/image-5-56789.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 38 additions & 1 deletion css/desktop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,44 @@ body {

/* Section Three */

/* Section Four */

/* Section Four */ /* Levent KOYBASI */
.fresh-harvest-main-container {
padding: 100px 100px;
min-width: 1280px;
}
.fresh-harvest-container {
min-width: 1080px;
}
.fresh-harvest {
align-self: self-start;
width: 751px;
margin-bottom: 50px;
margin-left: 0;
}
.order-form-social-container {
display: flex;
flex-direction: row;
gap: 24px;
}
.ordering-form-container {
border-radius: 30px;
padding: 50px;
width: 529px;
height: 534px;
}
.order-social {
border-radius: 30px;
padding: 50px;
width: 527px;
height: 534px;
}
.social-img {
border-radius: 15px;
width: 427px;
height: 273px;
}


/* Section Five Sudenur ÇELİK*/
.section-five {
Expand Down
168 changes: 166 additions & 2 deletions css/mobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ body {
}
/* Helper Class */
.container {
max-width: 335px;
min-width: 335px;
}

/* Header */
Expand All @@ -57,7 +57,171 @@ body {

/* Section Three */

/* Section Four */
/* Section Four */ /* Levent KOYBASI */

.section-four {
background-color: var(--background-2);
}
.fresh-harvest-main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--background-2);
padding: 80px 20px;
min-width: 375px;
}
.fresh-harvest-container {
display: flex;
flex-direction: column;
align-items: center;
min-width: 335px;
}
.fresh-harvest {
display: flex;
flex-direction: column;
gap: 29px;
margin-bottom: 40px;
}
.fresh-harvest-title {
font-family: var(--font-family);
font-weight: 600;
font-size: 48px;
line-height: 104%;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--main-text);
}
.harvest-span {
color: rgba(251, 251, 251, 0.3);
}
.fesh-harvest-text {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 129%;
color: var(--main-text);
}
.ordering-form-container {
border-radius: 30px;
padding: 40px 20px;
min-width: 335px;
height: 533px;
background: var(--main-text);
margin-bottom: 20px;
}
.ordering-form {
display: flex;
flex-direction: column;
gap: 40px;
}
.ordering-form-title {
font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
line-height: 108%;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text);
}
.from-us-span {
color: var(--background-2);
}
.the-form-span {
color: var(--background);
}
.form {
display: flex;
flex-direction: column;
gap: 15px;
}
.form input[type="text"],
.form input[type="email"] {
border: 1px solid rgba(20, 20, 20, 0.2);
border-radius: 30px;
padding: 14px 16px;
min-width: 295px;
height: 46px;
}
.form textarea {
border: 1px solid rgba(20, 20, 20, 0.2);
border-radius: 15px;
padding: 14px 0px 59px 16px;
min-width: 295px;
height: auto;
margin-bottom: 5px;
}
.btn {
border: none;
border-radius: 30px;
padding: 16px 129px;
min-width: 295px;
height: 50px;
background: var(--background);

font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--main-text);
}
.order-social {
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 30px;
padding: 40px 20px;
min-width: 335px;
height: 465px;
background: var(--background);
}
.social-img {
background: rgba(20, 20, 20, 0.3) url("../assets/img/image-3.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 15px;
min-width: 295px;
height: 273px;
}
.social-container {
display: flex;
flex-direction: column;
gap: 14px;
}
.social-text {
font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: -0.01em;
color: rgba(251, 251, 251, 0.5);
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.social-link {
font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
line-height: 108%;
letter-spacing: -0.01em;
color: var(--main-text);
}
.social-span {
font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
line-height: 108%;
letter-spacing: -0.01em;
color: var(--main-text);
}
@media screen and (min-min-width: 320px) {
}

/* Section Five Sudenur ÇELİK*/
.section-five {
Expand Down
49 changes: 48 additions & 1 deletion css/tablet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,54 @@ body {

/* Section Three */

/* Section Four */
/* Section Four */ /* Levent KOYBASI */
.fresh-harvest-main-container {
padding: 100px 70px;
min-width: 768px;
}
.fresh-harvest-container {
min-width: 638px;
}
.fresh-harvest {
margin-left: -38px;
align-self: self-start;
width: 640px;
gap: 25px;
}
.fresh-harvest-title {
font-size: 64px;
line-height: 100%;
}
.fesh-harvest-text {
font-size: 16px;
line-height: 125%;
}
.ordering-form-container {
padding: 50px 100px;
width: 628px;
margin-bottom: 25px;
}
.ordering-form {
width: 428px;
gap: 40px;
}
.form textarea {
margin-bottom: 10px;
}
.order-social {
gap: 50px;
padding: 50px;
border-radius: 30px;
width: 628px;
}
.social-img {
background-size: 110%;
width: 528px;
height: 273px;
}
.social-links {
gap: 12px;
}

/* Section Five */
.section-five {
Expand Down
81 changes: 80 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,86 @@
<!-- Section Three -->
<section></section>
<!-- Section Four -->
<section></section>
<section class="section-four">
<div class="fresh-harvest-main-container">
<div class="fresh-harvest-container">
<div class="fresh-harvest">
<h3 class="fresh-harvest-title">
Fresh <span class="harvest-span">Harvest</span> Box has got you
covered
</h3>
<p class="fesh-harvest-text">
Our boxes are packed with delicious, nutritious vegetables,
perfect for anyone looking to eat healthier or support local
farmers. Order your box today and start enjoying the best that
nature has to offer!
</p>
</div>
<div class="order-form-social-container">
<div class="ordering-form-container">
<div class="ordering-form">
<h3 class="ordering-form-title">
Ordering <span class="from-us-span">from us</span> is quick
and easy! Fill out
<span class="the-form-span">the form</span> below and we
will contact you !
</h3>

<form class="form">
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
required
/>
<input
type="email"
name="email"
id="email"
placeholder="Email"
required
/>
<textarea
name="comment"
id="comment"
placeholder="Comment"
required
></textarea>
<button class="btn" type="submit">Send</button>
</form>
</div>
</div>
<div class="order-social">
<div class="social-img"></div>
<div class="social-container">
<p class="social-text">Follow us on our social networks:</p>
<div class="social-links">
<a
class="social-link"
href="https://www.instagram.com/"
target="_blank"
>instagram</a
><span class="social-span">/</span
><a
class="social-link"
href="https://www.facebook.com/"
target="_blank"
>facebook</a
><span class="social-span">/</span
><a
class="social-link"
href="https://www.youtube.com/"
target="_blank"
>youtube</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Section Five -->
<section class="section-five">
Expand Down