Skip to content

initial commit for PR #1

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

Open
arshmohd wants to merge 3 commits into
base: master
Choose a base branch
from
Open

initial commit for PR #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31d63ad
initial commit for PR
arshmohd Sep 2, 2022
d0469a3
All version HTML layout/structure ready for CSS
arshmohd Sep 5, 2022
de6c5f2
Iteration-1: top-header css added
arshmohd Sep 5, 2022
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
75 changes: 75 additions & 0 deletions MyNotes/mynotes.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
My notes to initiate PR

Iteration 1 | Extra Small Screen (width < 768px)

1. header section=> slack-logo, hambuger (Sticky)
2. section-hero-1 => h2, article, div(email, button-(get started) - Already using? sign-in(underlined-txt))
3. section-hero-2 => div-img(#project-mobile), h2, para, div-button-Discover Way, div-list-of-Company-Icons(1-by-1), div-(Try-it for-free, Already using? sign-in(underlined-txt), email-address-box, button-get-started).
4. section-hero-3: Slack-ICON at the top
Lists:
h3-Company-list(below-list-items), h3-Products-list(below-list-items),
h3-Resources-list(below-list-items), h3-Extras-list(below-list-items),
5. Footer:
h4 => ul-lis: status, privacy & Terms, Contact US
ul-lis: US-flag, English(US), Down-Arrow-ICON
ul-lis: twitter-icon, fb-icon, yt-icon





Iteration 2 | Small Screen (961px > width > 767px):

1. header section=> slack-logo, hambuger (Sticky)
2. section-hero-1 =>
h2,
article,
div(email, button-(get started)
- Already using? sign-in(underlined-txt))
3. section-hero-2 => div-img(#project-mobile),
4. h2(you're in) ,
para(millions),
div-button-Discover Why,
div-list-of-Company-Icons(1-by-1)-IMP-ONLY 2 ICONS***
5. div-(Try-it for-free, Already using? sign-in(underlined-txt), email-address-box, button-get-started).
6. section-hero-3:
Slack-ICON at the top-left, Lists: h3-Company-list(below-list-items), h3-Products-list(below-list-items), h3-Resources-list(below-list-items), h3-Extras-(below-list-items),
5. Footer:
h4 => div-(ul-lis: status, privacy & Terms, Contact US), div(ul-lis: US-flag, English(US), Down-Arrow-ICON), div(ul-lis: twitter-icon, fb-icon, yt-icon)


Iteration 3 | Medium Screen (1024px > width > 960px)

4. h2(you're in) ,
para(millions),
div-button-Discover Why,
div-list-of-Company-Icons(1-by-1)-IMP-ONLY 3 ICONS***
5. div-(Try-it for-free, Div(email-address-box, div(button-get-started))
Already using? sign-in(underlined-txt))


Iteration 4 | Large Screen (width > 1200px)

1. header section=> slack-logo -left, IMP***=> Hamburger-Now is UL-list(Why Slack? Pricing, About US, button(Your Workspaces))
2. section-hero-1 =>
=> ON LEFT-side:-----> div-img(#project-mobile).
=> ON RIGHT-Side:
h1, BOLD Heading
article,
div(button-(get started)
- Already using? sign-in(underlined-txt))

4. h2(you're in) ,
para(millions),
div-button-Discover Why,
div-list-of-Company-Icons(1-by-1)-IMP-ONLY 3 ICONS***
5. div-(Try-it for-free, large space(WIDTH) div(button-get-started)
Already using? sign-in(underlined-txt))
6. section-hero-3:
Slack-ICON at the top-left, large space(WIDTH) Lists: h3-Company-list(below-list-items), h3-Products-list(below-list-items), h3-Resources-list(below-list-items), h3-Extras-(below-list-items),
5. Footer:
h4 => div-(ul-lis: status, privacy & Terms, Contact US), large space(WIDTH) div(ul-lis: US-flag, English(US), Down-Arrow-ICON), div(ul-lis: twitter-icon, fb-icon, yt-icon)




3 changes: 3 additions & 0 deletions starter_code/images/ci_hamburger.svg
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.
183 changes: 138 additions & 45 deletions starter_code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,49 +17,138 @@
</head>

<body>
<nav>
<img src="./images/slack-logo.png" alt="slack_logo" />
<ul>
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<li>Your Workspaces</li>
</ul>
<nav class="top-header">
<div class="slack-header-logo">
<img
src="./images/slack-logo.png"
alt="slack_logo"
class="header-slack-logo"
/>
</div>
<div class="nav-items-desktop">
<ul>
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<button class="your-workspace-button">Your Workspaces</button>
</ul>
</div>
<div class="hamburger-icon">
<img
src="./images/ci_hamburger.svg"
alt=""
srcset=""
class="hamburg-icon"
/>
</div>
</nav>
<header>
<img src="./images/home_talking.png" alt="home_work_happening" />
<h1>Where Work Happens</h1>
<p>
When your team needs to kick off a project, hire a new employee, deploy
some code, review a sales contract, finalize next year's budget, measure
an A/B test, plan your next office opening, and more, Slack has you
covered.
</p>
<button type="button" name="button">GET STARTED</button>
<header class="hero-1">
<div class="hero-img-projectMobile">
<img
src="./images/home_talking.png"
alt="home_work_happening"
class="project-mobile-img"
/>
</div>
<div class="heading-whereWork">
<h1 class="whereWork-heading">Where Work Happens</h1>
</div>
<article class="hero-1-para">
<p class="hero-1-article-para">
When your team needs to kick off a project, hire a new employee,
deploy some code, review a sales contract, finalize next year's
budget, measure an A/B test, plan your next office opening, and more,
Slack has you covered.
</p>
</article>
<div class="email-form">
<form action="" class="email-form">
<input
type="email"
name=""
id=""
class="default-email-txt"
placeholder="Email address"
/>
</form>
</div>
<div class="hero-1-button">
<button type="button" name="button" class="hero-1-button-get-started">
GET STARTED
</button>
</div>
<p>Already using Slack? <a href="#">Sign in</a></p>
</header>
<main>
<div>
<h2>You're in good company</h2>
<p>
Millions of people around the world have already made Slack the place
where their work happens.
</p>
<button>DISCOVER WHY</button>
<img src="./images/airbnb-logo.png" alt="" />
<img src="./images/capital-one-logo.png" alt="" />
<img src="./images/harvard-logo.png" alt="" />
<img src="./images/los-angeles-times-logo.png" alt="" />
<img src="./images/oracle-logo.png" alt="" />
<img src="./images/ticketmaster-logo.png" alt="" />
<main class="hero-2">
<div class="section-hero-2">
<div class="hero-2-heading">
<h2 class="heading-hero-2">You're in good company</h2>
</div>
<div class="hero-2-para">
<p class="para-hero-2">
Millions of people around the world have already made Slack the
place where their work happens.
</p>
</div>
<div class="hero-2-button">
<button class="button-hero-2">DISCOVER WHY</button>
</div>
<div class="hero-2-company-logos">
<div class="hero-2-logo-airbnb">
<img src="./images/airbnb-logo.png" alt="" class="logo-airbnb" />
</div>
<div class="hero-2-logo-capital-one">
<img
src="./images/capital-one-logo.png"
alt=""
class="logo-capital-one"
/>
</div>
<div class="hero-2-logo-harvard">
<img src="./images/harvard-logo.png alt=" class="logo-harvard" />
</div>
<div class="hero-2-logo-la-times">
<img
src="./images/los-angeles-times-logo.png"
alt=""
class="logo-la-times"
/>
</div>
<div class="hero-2-logo-oracle">
<img src="./images/oracle-logo.png" alt="" class="logo-oracle" />
</div>
<div class="hero-2-logo-ticketmaster">
<img
src="./images/ticketmaster-logo.png"
alt=""
class="logo-ticketmaster"
/>
</div>
</div>
</div>
<div>
<p>Try it for free</p>

<div class="hero-2-try-free">
<p class="try-for-free">Try it for free</p>
<p>Already using Slack? <a href="">Sign in</a></p>
<button type="button" name="button">GET STARTED</button>
<div class="email-form">
<form action="" class="email-form">
<input
type="email"
name=""
id=""
class="default-email-txt"
placeholder="Email address"
/>
</form>
</div>
<div class="hero-2-get-button">
<button type="button" name="button" class="get-started-button">
GET STARTED
</button>
</div>
</div>
</main>
<footer>
<footer class="final-footer">
<div>
<img src="./images/iso-slack.png" alt="" />
<ul>
Expand Down Expand Up @@ -95,19 +184,23 @@ <h2>You're in good company</h2>
<li>Slack Fund</li>
</ul>
</div>
<div>
<ul>
<div class="footer-bottom">
<ul class="footer-left-ul">
<li>Status</li>
<li>Privacy & Terms</li>
<li>Contact Us</li>
</ul>
<div>
<img src="./images/us-flag.png" alt="" />
<span>English (US)</span>
<i class="fas fa-chevron-down"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-youtube"></i>
<div class="footer-right-ul">
<div class="footer-right-ul-usflag">
<img src="./images/us-flag.png" alt="" />
<span>English (US)</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="footer-right-ul-social-icons">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
</footer>
Expand Down
50 changes: 50 additions & 0 deletions starter_code/stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,53 @@ main-titles dark-grey: #2C303F;
paragraph grey: #5b5e6d;
nav grey: #5b5e6d;
*/

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.top-header{
display: grid;
}

.slack-header-logo{
grid-area: slack-header-logo;
}
.header-slack-logo{
width: 8rem;
}

.nav-items-desktop {
grid-area: nav-items-desktop;
}

.hamburger-icon{
grid-area: hamburger-icon;

}

.hamburg-icon{
width: 2rem;
color: lightgrey;
}

/*Break points:*/
@media (max-width:768px) {
.top-header {
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
grid-template-areas: "slack-header-logo hamburger-icon";
column-gap: 40%;
justify-items: center;
align-items: center;
padding: 1rem 1rem;
margin: 1rem 1rem;
}
}
@media (min-width:767px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:961px) {
/* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (min-width:1200px) { /* hi-res laptops and desktops */ }