top of page

HTML

1

<!-- Basic Page Needs

–––––––––––––––––––––––––––––––––––––––––––––––––– –>

Purdue Admissions
 

1

<!-- Mobile Specific Metas

–––––––––––––––––––––––––––––––––––––––––––––––––– –>

1

<!-- FONT

–––––––––––––––––––––––––––––––––––––––––––––––––– –>

1

<!-- CSS

–––––––––––––––––––––––––––––––––––––––––––––––––– –>



 

1

<!-- Primary Page Layout

–––––––––––––––––––––––––––––––––––––––––––––––––– –>

<div class="topnav">

    <ul>

        <li>

            <a class="active" href="#">Admissions</a>

            <a href="#">Academics</a>

            <a href="#">Inclusions</a>

            <a href="#">Arts and Ideas</a>

            <a href="#">Research</a>

            <a href="#">Athletics</a>

            <a href="#">About</a>

        </li>

    </ul>

</div>

 

<section class="background">

    <div class="text-wrapper">

        <img src="img/whitearrow.png">

        <h1><b>Admissions</b></h1>

        <div class="divider"></div>

        <p><b>Applying to college is an important step toward your future — and we're here to help. From admissions requirements and a list of majors to info on housing and financial aid — you'll find it all here.</b></p>

    </div>

</section>

 

<section class="three">

    <div class="row">

        <div class="one-third column card">

            <img src="img/notes.png">

            <b>Application Status</b>

        </div>

        <div class="one-third column card">

            <img src="img/gift.png">

            <b>Freshman Scholarships</b>

        </div>

        <div class="one-third column card">

            <img src="img/home.png">

            <b>Housing</b>

        </div>

    </div>

</section>

<div class=whitetext>

    <div class="row four">

        <div class="three columns pen">

            <img src="img/pencil.jpg">

            <h5>Undergraduate Students</h5>

            <ul class="peeps">

                <li><a href="#">Apply Now</a></li>

                <li><a href="#">Accept My Undergraduate Offer</a></li>

                <li><a href="#">Admissions</a></li>

                <li><a href="#">Financial Aid</a></li>

                <li><a href="#">Visit Campus</a></li>

                <li><a href="#">Admitted Students</a></li>

                <li><a href="#">Majors and Minors</a></li>

            </ul>

        </div>

        <div class="three columns book">

            <img src="img/book.png">

            <h5>Graduate Students</h5>

            <ul class="peeps">

                <li><a href="#">Apply Now</a></li>

                <li><a href="#">Accept My Graduate Offer</a></li>

                <li><a href="#">Graduate Minors</a></li>

                <li><a href="#">How To Apply</a></li>

                <li><a href="#">Funding</a></li>

                <li><a href="#">Accepting Admission</a></li>

            </ul>

        </div>

        <div class="three columns world">

            <img src="img/world.jpg">

            <h5>International Students</h5>

            <ul class="peeps">

                <li><a href="#">Admissions</a></li>

                <li><a href="#">Graduate Admissions</a></li>

                <li><a href="#">International Students and Scholars</a></li>

                <li><a href="#">Student Visa</a></li>

                <li><a href="#">Admitted Students</a></li>

 

            </ul>

        </div>

        <div class="three columns lol">

            <img src="img/brownarrow.jpg">

            <h5>Transfer Students</h5>

            <ul class="peeps">

                <li><a href="#">Apply Now</a></li>

                <li><a href="#">Dates and Deadlines</a></li>

                <li><a href="#">Transfer Credit</a></li>

                <li><a href="#">Majors and Minors</a></li>

            </ul>

        </div>

    </div>

</div>

<section>

    <div class="row life">

        <div class="live">

            <h4>@LifeAtPurdue</h4>

            <button type="button">FOLLOW</button>

        </div>

        <div id="pics">

            <a href="#">

                <img src="https://www.instagram.com/p/CBiez2vHwe4/media?size=l" height=178 width=178>

            </a>

            <a href="#">

                <img src="https://www.instagram.com/p/CBgH1fVlscE/media?size=l" height=178 width=178>

            </a>

            <a href="#">

                <img src="https://www.instagram.com/p/CBfzNf8jm9e/media?size=l" height=178 width=178>

            </a>

            <a href="#">

                <img src="https://www.instagram.com/p/CBdVxLsptdK/media?size=l" height=178 width=178>

            </a>

            <a href="#">

                <img src="https://www.instagram.com/p/CBau8V_lqvH/media?size=l" height=178 width=178>

            </a>

            <a href="#">

                <img src="https://www.instagram.com/p/CBYVQEXFzCz/media?size=l" height=178 width=178>

            </a>

        </div>

    </div>

</section>

<section class="row dancing">

    <div class="one-half column image">

        <img src="img/dancemarathon.jpg" height=296 length=595>

    </div>

    <div class="one-half column dance">

        <h3><b>Dance Marathon</b></h3>

        <p>For the kids. Or FTK, as participants in the Purdue University Dance Marathon (PUDM) like to chant to keep them going during the 18 hours of nonstop dancing and fun.

 

 

            PUDM, established in 2005, has raised over $6.69 million for the kids and families at Riley Hospital for Children.

 

            The marathon has grown from having only 100 dancers in its first year to thousands of dancers who now enjoy showing off their best skills.

 

            PUDM is just one of many events in which the Purdue community comes together to make a difference and impact the world.</p>

    </div>

</section>

<footer>

    <div class="row footer">

        <div class="two columns comm">

            <h5>Communications</h5>

            <ul class="peeps">

                <li> <a href="#">OneCampus Portal</a></li>

                <li><a href="#">Brightspace</a></li>

                <li><a href="#">BoilerConnect</a></li>

                <li> <a href="#">Office 365</a></li>

                <li><a href="#">myPurdue</a></li>

            </ul>

        </div>

        <div class="two columns campus">

            <h5>Campus</h5>

            <ul class="peeps">

                <li><a href="#">Faculty and Staff</a></li>

                <li><a href="#">Human Resources</a></li>

                <li><a href="#">Careers</a></li>

                <li><a href="#">Colleges and Schools</a></li>

                <li><a href="#">Directory</a></li>

                <li><a href="#">Campus Map</a></li>

            </ul>

        </div>

        <div class="two columns info">

            <h5>Information</h5>

            <ul class="peeps">

                <li><a href="#">Purdue Today</a></li>

                <li><a href="#">Calendar</a></li>

                <li><a href="#">Libraries</a></li>

                <li><a href="#">Construction</a></li>

                <li><a href="#">Tuition Calculator</a></li>

                <li><a href="#">Center for Healthy Living</a></li>

            </ul>

        </div>

        <div class="two columns people">

            <h5>People</h5>

            <ul class="peeps">

 

                    <li><a href="#">Speak Up</a></li>

                    <li><a href="#">Diversity and Inclusion</a></li>

                    <li><a href="#">Ethics and Compliance</a></li>

                    <li><a href="#">Information Technology</a></li>

                    <li><a href="#">Annual Security Report</a></li>

                    <li><a href="#">Timely Warnings</a></li>

                </ul>

 

        </div>

        <div class="two columns img">

            <img src="img/PU.png" height=200 length=300>

        </div>

    </div>

</footer>

<!-- End Document

–––––––––––––––––––––––––––––––––––––––––––––––––– –>

CSS

nav {
padding-top: 24px;
padding-bottom: 1px;
padding-left: 30px;
background-color: black;
}
.topnav {
background-color: white;
overflow: hidden;
margin-top: 6px;
margin-left: 125px;
text-transform: uppercase !important;
font-family: acumin-pro-semi-condensed,”Franklin Gothic”,sans-serif;
}

/* Style the links inside the navigation bar */
.topnav a {
text-decoration: none;
float: left;
color: black;
text-align: center;
padding-top: 4px;
padding: 8px 18px;
text-decoration: none;
font-size: 16px;
}

/* Change the color of links on hover */
.topnav a:hover {
text-decoration: underline;
color: #bca527;
}

/* Add a color to the active/current link */
.topnav a.active {
text-decoration: underline;
color: #bca527;
}
.background{
background-image: url(“../img/students.jpg”);
background-repeat: no-repeat;
width: 100%;
height: 500px;
background-size: cover;
font-size: 18px;
text-decoration-color: black
}
.content-wrapper {
width: 100%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper img{
width: 10%;
min-width: 8%;
position: center;
}
.three{
background-color: white;
margin-top:80px;
margin-bottom: 80px;
}
.card{
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
}

.card img {
width: 25%;
height: auto;
}

.text-wrapper {
text-align: center;
position: center;
color: white;
font-size: 12;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
padding-left: 10%;
padding-top: 8%;
}

.four{
background-color: #2a2929;
padding-left: 150px;
padding-right: 150px;

}
.whitetext{
color:white
}
.pen {
width: 185px;
height: 493px;
padding-left: 25px;
padding-right: 25px;
background-color: black;
text-align: center;
color: white;
padding-top: 90px:
}
.book {
width: 185px;
height: 493px;
padding-left: 25px;
padding-right: 25px;
background-color: black;
text-align: center;
color: white;
padding-top: 40px:
}
.world {
width: 185px;
height: 493px;
padding-left: 25px;
padding-right: 25px;
background-color: black;
text-align: center;
color: white;
padding-top: 40px:
}
.lol {
width: 185px;
height: 493px;
padding-left: 25px;
padding-right: 25px;
background-color: black;
text-align: center;
color: white;
padding-top: 40px:
}

.whitetext li{
list-style: none;
color:white;
}

.life{
padding-top: 20px;
background-color: lightgray;
}
.live{
width: 100%;

}

.live h4 {
display: inline-block;
margin-left: 175px;
}

.live button {
display: inline-block;
float: right;
margin-right: 175px;}

pics{

1

2

3

text-align: center;

background-color: lightgray;

padding-bottom: 25px;

}
button{
background-color: black;
color: #bca527;
height: 50px;
width: 160px;
font-size: 15px;

}
.dancing{
margin-top: 25px;
margin-bottom: 25px;
background color: white;
}
.image{
text-align: center;
}
.dance{
text-align: center;
padding-right: 90px;
color: black;
padding-top: auto;
padding-bottom: auto;
}
.footer{
background-color: black;
padding-left: 150px;
padding-top: 25px

}
.comm{
text-align: center;
color: #bca527;
}
.campus{
text-align: center;
color: #bca527;
}
.info{
text-align: center;
color: #bca527;
}
.people{
text-align: center;
color: #bca527;
}
.img{
text-align: center;
}

ul{
list-style: none;
}

.peeps li a {
color: white;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.peeps li a:hover {
text-decoration: underline
}

FAVORITES​

WHAT'S NEW?

LOOKING FOR

CONTACT ME

I am currently an intern at LeadSigma, a Speed-to-Lead Agency based out of Kansas City, Missouri.

I am looking for an internship this summer within the field of User Experience Design, User Interface Design, or Web design!

Tel: 765-591-2388
Mail: porte168@purdue.edu

© 2023 by JOHN SMITH. Proudly created with Wix.com

bottom of page